WPF ListBox中的对ListItems进行排序和分组GroupGroup折叠并展开 [英] Sort and Group ListItems in a WPF ListBox- GroupItem collapse and expand
问题描述
我对列表框项目进行排序和分组，为此我使用CollectioView.
I sort and group listbox items, I use CollectioView on this purpose.
从视图模型类中，我将集合绑定到ListBox的ItemSource属性上，就是这样.
From view model class I bind collection on ListBox ItemSource property, here is it.
public BindableCollection<UserInfo> Friends
{
get { return _friends; }
set
{
_friends = value;
NotifyOfPropertyChange(() => Friends);
}
}
ListBox项是UserInfo的类型.
ListBox items is type of UserInfo.
当我初始化ListBox时，我使用这种方法对项目进行排序和分组.
When I initialize ListBox I sort and group items with this method.
private ICollectionView _currentView;
//...
private void SortContactList()
{
_currentView = CollectionViewSource.GetDefaultView(Friends);
_currentView.GroupDescriptions.Add(new PropertyGroupDescription("TextStatus"));
_currentView.SortDescriptions.Add(new SortDescription("TextStatus", ListSortDirection.Ascending));
_currentView.SortDescriptions.Add(new SortDescription("Nick", ListSortDirection.Ascending));
}
TextStatus和Nick是userInfo类的属性.
TextStatus and Nick are properties of userInfo class.
我在Listbox GroupStyle中使用.在这里:
I use in Listbox GroupStyle. Here ist it:
<Style x:Key="MessengerView_ToogleBtn" TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Image x:Name="img" Source="/images/icons/Collapse.png" />
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="False">
<Setter TargetName="img" Property="Source" Value="/images/icons/Expand.png" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsBottomLevel}" Value="True">
<Setter TargetName="gridTemplate" Property="Grid.Background" Value="White" />
</DataTrigger>
</ControlTemplate.Triggers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Background="Black"
x:Name="gridTemplate"
Height="26"
VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="45" />
</Grid.ColumnDefinitions>
<ToggleButton x:Name="btnShowHide"
IsChecked="True"
Style="{StaticResource MessengerView_ToogleBtn}"/>
<TextBlock Style="{StaticResource MessengerView_LbGroupHeader_TextBlock}"
Text="{Binding Path=Name}"
Grid.Column="1"/>
<TextBlock TextAlignment="Left" Style="{StaticResource MessengerView_LbGroupHeader_TextBlock}"
Grid.Column="2"
Text="{Binding Path=ItemCount}"/>
</Grid>
<ItemsPresenter Visibility="{Binding ElementName=btnShowHide, Path=IsChecked,
Converter={StaticResource booleanToVisibilityConverter}}"
Margin="3,3,3,3"
Grid.Row="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
如果我运行应用程序，它将显示在这张图片上.
If I run app, it look on this picture.
1.
在编辑完列表框后，我在CollectionView上调用Refresh方法.我编辑了ListBox的源属性(添加，删除，更新).
I edit source property of ListBox, (add,remove, update), after edited listbox I call Refresh method on CollectionView.
_currentView.Refresh();
问题是GroupItem折叠了，我在所有GroupItem上都调用了Refresh方法.
Problem is that GroupItem is collapse and I call Refresh method on all GroupItem are expanded.
例如.
GroupItem 1为折叠状态.
GroupItem 1 is collapse.
GroupItem 2被超额使用.
GroupItem 2 is exapnded.
GroupItem 3为折叠状态.
GroupItem 3 is collapse.
在调用刷新列表框之前，如图所示:
Before call Refresh ListBox look like on this picture:
我在CollectionView上调用Refresh方法，并且所有GroupItems都展开了.我想保持原始状态，如何实现呢?
I call Refresh method on CollectionView and all GroupItems are expanded. I would like to keep the original state, how can I achive this?
调用Refresh Lisbox后，看起来像顶部的第一张图片.
After called Refresh Lisbox look like on first picture on the top.
推荐答案
该解决方法并不完美.正如我所说，最好将ViewModels与您自己的分组一起使用，但是它将需要更多的代码.
The workaround isn't perfect. As I said, it is better to use ViewModels with your own grouping, but it will require much more code.
您需要两个事件处理程序:
You need two event handlers:
private Dictionary<string, bool?> expandStates = new Dictionary<string, bool?>();
private void Grid_Loaded(object sender, RoutedEventArgs e)
{
var grid = (Grid)sender;
var dc = grid.DataContext as CollectionViewGroup;
var groupName = (string)dc.Name;
//If the dictionary contains the current group, retrieve a saved state of the group
if (this.expandStates.ContainsKey(groupName))
{
var btn = (ToggleButton)grid.FindName("btnShowHide");
btn.IsChecked = this.expandStates[groupName];
} //Else add default state
else this.expandStates.Add(groupName, true);
}
private void btnShowHide_Click(object sender, RoutedEventArgs e)
{
var btn = (ToggleButton)sender;
var dc = (CollectionViewGroup)btn.DataContext;
var groupName = (string)dc.Name;
//Loaded event is fired earlier than the Click event, so I'm sure that the dictionary contains the key
this.expandStates[groupName] = btn.IsChecked; //Save the current state
}
它们在此处与控件绑定:
They are bound with controls here:
<ControlTemplate TargetType="{x:Type GroupItem}">
<Grid Loaded="Grid_Loaded">
在这里:
<ToggleButton x:Name="btnShowHide" Click="btnShowHide_Click" IsChecked="True" Margin="3.5" />
如果在外部字典中的某个位置定义GroupItem的模板，则必须使用UserControl才能访问后台代码.
If you define Template for GroupItem somewhere in an external dictionary, you must use UserControl for the purpose of having access to code-behind.
这篇关于WPF ListBox中的对ListItems进行排序和分组GroupGroup折叠并展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
