ListView with collapsible items?

Question

Does anyone have an idea, how to create a collapsable ListView?

e.g. I've a ListView with the Columns: Name, Age, County
and the following entries:

+ Max | 20 | Switzerland
+ Joe | 25 | Germany
+ Bob | 30 | Italy

When I click on the +, I want the ListView to collapse like this:
- Max | 20 | Switzerland
Lastname: Eastwood
Phone: 0041 11 222 33 44

+ Joe | 25 | Germany
+ Bob | 30 | Italy

Thanks for any help and ideas!

PS: In my case, I'll have two different types of Infos, depending on the "Person" Object
e.g.
- some Persons would show me Lastname + Phone#
- and from others I'd see Job + Employer.. I guess that'll be possible with some kind of a datatrigger?

EDIT:

I've edited the code to following:

<ListView ItemsSource="{Binding Path=DisplayedListe, Mode=OneWay}"
          VirtualizingStackPanel.IsVirtualizing="True"
          IsSynchronizedWithCurrentItem="True"
          Sorter:ListViewSorter.IsListviewSortable="True"
          Name="mainListView"
          >
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <ToggleButton x:Name="ToggleButton" Grid.Column="0" Content="+"/>
                    <Label Grid.Column="1" Content="Max"/>
                    <Label Grid.Column="2" Content="20"/>
                    <Label Grid.Column="3" Content="Switzerland"/>
                </Grid>
                <StackPanel Visibility="{Binding ElementName=ToggleButton, Path=IsChecked}">
                    <Label Content="Lastname: Eastwood"/>
                    <Label Content="Phone: 0041 11 222 33 44"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>

        <!--<ListView.View>
        <GridView >
            <GridViewColumn Header="+" DisplayMemberBinding="{Binding Path=IsCollapsible, Mode=OneWay}"/>
            <GridViewColumn Header="RgNr" DisplayMemberBinding="{Binding Path=RechnungsNr, Mode=OneWay}" />
            <GridViewColumn Header="ESR" DisplayMemberBinding="{Binding Path=Length, Mode=OneWay}"/>
            <GridViewColumn Header="S" DisplayMemberBinding="{Binding Path=Status, Mode=OneWay}"/>
            <GridViewColumn Header="M" DisplayMemberBinding="{Binding Path=AktuelleMahnStufe, Mode=OneWay}" />
        </GridView>
    </ListView.View>-->

</ListView>

This seems to work, but I can't figure out how I could make this sortable by clicking on a columnheader.. any ideas?

Answer 1

You should be able to do all of this with a simple datatemplate. The top line can be a grid with a toggle button in the first column, then below that a stackpanel or grid (depending on layout) with the visibility bound to the toggled value of the button.

I've done a test layout that you can directly paste into a window here, but you can convert it to a DataTemplate simply enough, the important part is the visibility binding on the second stackpanel:

    <Window.Resources>
        <BooleanToVisibilityConverter x:Key="BoolToVis"/>
    </Window.Resources>
    <StackPanel>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <ToggleButton x:Name="ToggleButton" Grid.Column="0" Content="+"/>
            <Label Grid.Column="1" Content="Max"/>
            <Label Grid.Column="2" Content="20"/>
            <Label Grid.Column="3" Content="Switzerland"/>        
        </Grid>
        <StackPanel Visibility="{Binding ElementName=ToggleButton, Path=IsChecked, Converter={StaticResource BoolToVis}}">
            <Label Content="Lastname: Eastwood"/>
            <Label Content="Phone: 0041 11 222 33 44"/>
        </StackPanel>
    </StackPanel>

A data template can also change based on which type of object you bind to it, so if your different layouts can be linked to object type then it is simple to change the look.

Answer 2

You can modify the ItemTemplate of the ListView and create content that will behave as you describe. Briefly you need to write XAML like this:

<ListView>
  <ListView.ItemTemplate>
    <DataTemplate>
      ... XAML to display each item in the ListView
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>