How can I create `ListView` with groups and expanders in XAML without data binding?

36 Views Asked by At

How can I create a ListView with groups and expanders only in XAML?

I have found many examples with data binding, but I need to define all groups and items in XAML for demonstration/mockup purposes.

This is my ListView (I realize, that GroupItem controls are totally wrong). local:BlockControl is custom control Grid used as main container.

<ListView>
            <GroupItem Content="In/Out"/>

            <local:BlockControl Inputs="0" Outputs="1" FunctionName="I" ToolTip="Digital Input"/>
            <local:BlockControl Inputs="0" Outputs="1" FunctionName="AI" ToolTip="Analog Input"/>
            <local:BlockControl Inputs="1" Outputs="1" FunctionName="Q" ToolTip="Digital Output"/>
            <local:BlockControl Inputs="1" Outputs="1" FunctionName="AQ" ToolTip="Analog Output"/>
            
            <GroupItem Content="Constants"/>

            <local:BlockControl Inputs="0" Outputs="1" FunctionName="0" ToolTip="Digital 0"/>
            <local:BlockControl Inputs="0" Outputs="1" FunctionName="1" ToolTip="Digital 1"/>


            <GroupItem Content="Local variables"/>
            
            <local:BlockControl Inputs="1" Outputs="1" FunctionName="AM" ToolTip="Analog Marker"/>
            <local:BlockControl Inputs="1" Outputs="1" FunctionName="M" ToolTip="Digital Marker"/>
            <local:BlockControl Inputs="1" Outputs="1" FunctionName="AM" ToolTip="Analog Marker"/>

            <GroupItem Content="Network variables"/>

            <local:BlockControl Inputs="0" Outputs="1" FunctionName="NI" ToolTip="Network Digital Input"/>
            <local:BlockControl Inputs="0" Outputs="1" FunctionName="NAI" ToolTip="Network Analog Input"/>
            <local:BlockControl Inputs="1" Outputs="1" FunctionName="NQ" ToolTip="Network Digital Output"/>
            <local:BlockControl Inputs="1" Outputs="1" FunctionName="NAQ" ToolTip="Network Analog Output"/>

</ListView>
1

There are 1 best solutions below

0
Andrew KeepCoding On

You can do it this way.

<ListView>
    <!--  Group Item In/Out  -->
    <Expander Header="In/Out">
        <StackPanel>
            <local:BlockControl />
            <local:BlockControl />
            <local:BlockControl />
            <local:BlockControl />
        </StackPanel>
    </Expander>
    <!--  Group Item Constants  -->
    <Expander Header="Constants">
        <StackPanel>
            <local:BlockControl />
            <local:BlockControl />
        </StackPanel>
    </Expander>
    <!--  Group Item Local variables  -->
    <Expander Header="Local variables">
        <StackPanel>
            <local:BlockControl />
            <local:BlockControl />
            <local:BlockControl />
        </StackPanel>
    </Expander>
    <!--  Group Item Network variables  -->
    <Expander Header="Network variables">
        <StackPanel>
            <local:BlockControl />
            <local:BlockControl />
            <local:BlockControl />
            <local:BlockControl />
        </StackPanel>
    </Expander>
</ListView>