首页 > 解决方案 > 将列表列表绑定到 ListView 并将它们分组

问题描述

我有一个 ListView,我试图在其中绑定列表列表。

我根据 Key 对 mainList 的项目进行了分组。下面是用于将列表绑定到 ListView 的 XAML 和 C# 代码示例。

我按 Key 对 MainList 进行分组。没关系并且可以工作,但是如何将第二个 ListView 分组为子列表?

这是 XAML 的 mainList 的 listView 和 itemtemplate 中的另一个 listview 的 sublist :

   <ListView x:Name="MyList" >
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="20" />
                        <RowDefinition  />
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0" Text="{Binding Key}" />
                    <ListView  Grid.Row="1"  ItemsSource="{Binding SubList}">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition  />
                                        <ColumnDefinition  />
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Grid.Column="0" Text="{Binding id}" />
                                    <TextBlock Grid.Column="1" Text="{Binding name}" />
                                </Grid>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.GroupStyle>
            <GroupStyle>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Grid>                                        
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <StackPanel Margin="10" Orientation="Horizontal">
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="auto"/>
                                                    <ColumnDefinition Width="auto"/>


                                                </Grid.ColumnDefinitions>
                                            </Grid>
                                            <TextBlock Grid.Column="0" Margin="10,0,0,0" Text="Key :" Style="{StaticResource SubHeaderTextBlockStyle}"/>
                                            <TextBlock Grid.Column="1" Margin="10,0,10,0" Text="{Binding Key}" Style="{StaticResource TextBlockStyle}"/>

                                        </StackPanel>
                                        <ItemsPresenter Margin="10" Grid.Row="1" />
                                    </Grid>

                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </ListView.GroupStyle>
    </ListView>

这是 c# :

  public MainWindow()
        {
            InitializeComponent();
            ObservableCollection<ListObj> MainList1 = new ObservableCollection<ListObj>
            {
                new ListObj
                {
                    Key="key1", Value="value1",
                    SubList=new ObservableCollection<SubListObj>
                    {
                        new SubListObj{id="subid1", name="subname1" },
                        new SubListObj{id="subid2", name="subname2" }
                    }
                },
                new ListObj
                {
                    Key="key2", Value="value2",
                    SubList=new ObservableCollection<SubListObj>
                    {
                        new SubListObj{id="subid3", name="subname3" }
                    }
                }

        };

        MyList.ItemsSource = MainList1;
        CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(MyList.ItemsSource);
        PropertyGroupDescription gd = new PropertyGroupDescription("Key");
        view.GroupDescriptions.Add(gd);
    }


    public class ListObj
    {
        public string Key { get; set; }
        public string Value { get; set; }
        public ObservableCollection<SubListObj> SubList { get; set; } = new ObservableCollection<SubListObj>();
    }
    public class SubListObj
    {
        public string id { get; set; }
        public string name { get; set; }
    }

标签: c#wpf

解决方案


您必须在 XAML 中完成所有操作(数据初始化除外)。定义两个CollectionViewSource对象,一个用于外部,一个用于内部ListView

要布局组标题,请使用GroupStyle.HeaderTemplate(而不是GroupStyle.ContainerStyle):

主窗口.xaml

<Window>
  <Window.Resources>

    <CollectionViewSource x:Key="MainCollectionViewSource"
                          Source="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=local:SecondWindow}, Path=MainList}">
      <CollectionViewSource.GroupDescriptions>
        <PropertyGroupDescription PropertyName="Key" />
      </CollectionViewSource.GroupDescriptions>
    </CollectionViewSource>
  </Window.Resources>

  <ListView ItemsSource="{Binding Source={StaticResource MainCollectionViewSource}}">    
    <ListView.ItemTemplate>
      <DataTemplate DataType="ListObj">

        <Grid>
          <Grid.Resources>

            <CollectionViewSource x:Key="SubCollectionViewSource"
                                  Source="{Binding SubList}">
              <CollectionViewSource.GroupDescriptions>
                <PropertyGroupDescription PropertyName="id" />
              </CollectionViewSource.GroupDescriptions>
            </CollectionViewSource>
          </Grid.Resources>
          <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition />
          </Grid.RowDefinitions>

          <TextBlock Grid.Row="0"
                     Text="{Binding Value}" />

          <ListView Grid.Row="1"
                    ItemsSource="{Binding Source={StaticResource SubCollectionViewSource}}">
            <ListView.ItemTemplate>
              <DataTemplate DataType="SubListObj">

                <Grid>
                  <TextBlock Text="{Binding name}" />
                </Grid>
              </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.GroupStyle>
              <GroupStyle>
                <GroupStyle.HeaderTemplate>
                  <DataTemplate DataType="GroupItem">
                    <TextBlock FontWeight="Bold"
                               FontSize="14"
                               Text="{Binding Name}" />
                  </DataTemplate>
                </GroupStyle.HeaderTemplate>
              </GroupStyle>
            </ListView.GroupStyle>
          </ListView>
        </Grid>
      </DataTemplate>
    </ListView.ItemTemplate>
    <ListView.GroupStyle>
      <GroupStyle>
        <GroupStyle.HeaderTemplate>
          <DataTemplate DataType="GroupItem">

            <TextBlock FontWeight="Bold"
                       FontSize="14"
                       Text="{Binding Name}" />
          </DataTemplate>
        </GroupStyle.HeaderTemplate>
      </GroupStyle>
    </ListView.GroupStyle>
  </ListView>
</Window>

主窗口.xaml.cs

public partial class MainWindow : Window
{    
  public ObservableCollection<ListObj> MainList { get; set; }

  public MainWindow()
  {
    InitializeComponent();

    MainList1 = new ObservableCollection<ListObj>
    {
      new ListObj
      {
        Key="key1", Value="value1",
        SubList=new ObservableCollection<SubListObj>
        {
          new SubListObj{id="subid1", name="subname1" },
          new SubListObj{id="subid2", name="subname2" }
        }
      },
      new ListObj
      {
        Key="key2", Value="value2",
        SubList=new ObservableCollection<SubListObj>
        {
          new SubListObj{id="subid3", name="subname3" }
        }
      }    
    };
  }    
}

推荐阅读