带有可折叠项目的 ListView？答案

【问题标题】：ListView with collapsible items?带有可折叠项目的 ListView？
【发布时间】：2009-07-22 11:55:49
【问题描述】：

有人知道如何创建可折叠的 ListView 吗？

例如我有一个包含以下列的 ListView：姓名、年龄、县
以及以下条目：

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

当我点击 + 时，我希望 ListView 像这样折叠：
- Max | 20 | Switzerland
Lastname: Eastwood
Phone: 0041 11 222 33 44

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

感谢您的帮助和想法！

PS：就我而言，我将有两种不同类型的信息，具体取决于“人”对象
例如
- 有些人会告诉我姓氏 + 电话#
- 从其他人那里，我会看到 Job + Employer.. 我想这可以通过某种数据触发器来实现？

编辑：

我已将代码编辑为以下内容：

<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>

这似乎可行，但我不知道如何通过单击列标题来使其可排序.. 有什么想法吗？

【问题讨论】：

标签： c# wpf listview

【解决方案1】：

您应该能够使用简单的数据模板完成所有这些操作。顶行可以是第一列中带有切换按钮的网格，然后在其下方是可见性绑定到按钮切换值的堆栈面板或网格（取决于布局）。

我已经做了一个测试布局，你可以在这里直接粘贴到一个窗口中，但是你可以很简单地将它转换为一个 DataTemplate，重要的部分是第二个堆栈面板上的可见性绑定：

    <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>

数据模板还可以根据您绑定到的对象类型进行更改，因此如果您的不同布局可以链接到对象类型，那么更改外观很简单。

【讨论】：

谢谢，这看起来不错，但是如何将其集成到 ListView 中（以便稍后对其进行排序）？
这真的取决于您目前拥有的内容，如果您按照 Martin Liversage 在他的回答中描述的那样将其设置为数据模板，然后将项目源绑定到 ListView，它将为每个重复此模板源中的项目。您可以在列表视图本身中处理排序 (switchonthecode.com/tutorials/…)
感谢您的回复。我尝试将其结合起来，但我不知道如何使用该方法（我需要排序）获取 ColumnHeader？ PS：我已经在我的问题下面发布了代码

【解决方案2】：

您可以修改ListView 的ItemTemplate 并创建将按照您描述的方式运行的内容。简而言之，您需要像这样编写 XAML：

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

【讨论】：