c# - 将列表列表绑定到 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; }
}
解决方案
您必须在 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" }
}
}
};
}
}
推荐阅读
- python - 在 python 3 中获得正确的输出
- javascript - 最大长度的快速高效排列
- php - 在 codeigniter、querybuilder 和 "classical" 中查询
- python - 如何通过 conda 将 selenium 更新到 3.9
- ruby-on-rails - 设计正在使用空 UID 保存用户
- sql-server - 用游标循环中的当前行更新下一行列
- python - 如何通过 Python 打开不同类型的网络浏览器?
- ssh - Ansible Notebook ping 用户的问题
- java - Java Get String Between Two Strings
- xml - 为什么我的模态底页没有挡住主屏幕?