WPF 分组
分组和树形结构是不一样的。
树形结构是以递归形式存在。分组是以键值对存在的形式,类似于GroupBy这样的形式。
举个例子
ID | NAME | SEX | Class |
1 | 张三 | 男 | 1 |
2 | 李四 | 女 | 2 |
3 | 王二 | 男 | 1 |
当以Sex为分组依据时则是
Key | Value | |||
男 | 1 | 张三 | 男 | 1 |
3 | 王二 | 男 | 1 | |
女 | 2 | 李四 | 女 | 2 |
那么,我们如何在WPF使用呢?当然了 我们在WPF中的表现形式和图表稍微不同的。
首先,我们介绍如何分组。
我们的数据模型如下
public enum Sex
{
男,
女
}
public class Test
{
public string Name { get; set; }
public int Id { get; set; }
public Sex SexType { get; set; }
public int Class { get; set; }
}
非常的简单,下面的代码是我们的ViewModel
public class ViewModel
{
public ViewModel()
{
for (int i = 0; i < 10; i++)
{
Test t = new Test();
t.Class = i % 2 == 0 ? 1 : 2;
t.Id = i * 100;
t.Name = "Name" + i;
t.SexType = i % 2 == 0 ? Sex.男 : Sex.女;
Model.Add(t);
}
for (int i = 0; i < 10; i++)
{
Test t = new Test();
t.Class = i % 2 == 0 ? 3 : 4;
t.Id = i * 200;
t.Name = "Name" + i;
t.SexType = i % 2 == 0 ? Sex.男 : Sex.女;
Model.Add(t);
}
}
private ObservableCollection<Test> mode = new ObservableCollection<Test>(); public ObservableCollection<Test> Model
{
get { return mode; }
set { mode = value; }
} }
就是简单的添加一些数据。
我们的前台界面上就是datagrid。
然后是最重要的分组xaml代码
<CollectionViewSource x:Key="cvs" Source="{Binding Model}">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="SexType"/>
<PropertyGroupDescription PropertyName="Class"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
Groupscriptptions内就是我们分组依据。
PropertyName是分组依据,是集合内的属性。
当我们添加了多个参数就还会产生层级分组,就是上一个分组基础上再次分组。
比如我们最开始的数据多次分组。
一开始SEX,我们再加上一个class分组依据:
Key | Value | ||||
男 | Key | value | |||
1 | 1 | 张三 | 男 | 1 | |
3 | 王二 | 男 | 1 | ||
女 | Key | value | |||
2 | 2 | 李四 | 女 | 2 |
当我们创建完分组后,则是布局
剩下就布局了。
布局就是(Datagrid,Listbox.).GroupStyle了,
其中
Panel属性是决定布局面板的,通常与你使用GroupStyle的空间有关。
DataGrid的GroupStyle的Panel使用DataGridRowsPresenter
因为Panel属性默认是StackPanel,所以DataGrid使用分组时,列的宽度设定为*时 可能出现错误。
所以要注意
ContainerStyle是决定生成GroupItem的样式,通常自己发挥就好了
由于分组之后的集合的类型是微软内部类。
最常用的属性
Name
Items
对应我图表中的Key和Value,换据说在ContainerStyle中你只有这两个常用属性可以绑定,Items是你分组后 ,你自己的类型的集合,这个时候就可以使用你自己的属性进行绑定了。
GroupStyle属性是一个集合,可以存在多个子项,子项的名称也是GroupStyle.
多个子项是对应不同的分级,既第一个子项对应第一层分组,第二对应第二层。
于是乎
我们给出这样的布局
<DataGrid HeadersVisibility="None" AutoGenerateColumns="False" CanUserAddRows="False" ItemsSource="{Binding Source={StaticResource cvs}}">
<DataGrid.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander ExpandDirection="Right" Header="{Binding Name}" IsExpanded="True">
<ItemsPresenter/>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Expander ExpandDirection="Down" Header="{Binding Name}" IsExpanded="True">
<Expander.HeaderTemplate>
<DataTemplate>
<Grid Background="Yellow" >
<TextBlock >
<Run Text="班级:"/>
<Run Text="{Binding Mode=OneWay}"/>
</TextBlock>
</Grid>
</DataTemplate>
</Expander.HeaderTemplate>
<ItemsPresenter/>
</Expander>
</Border> </ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
<DataGridTextColumn Width="*" Header="姓名" Binding="{Binding Name}"/>
<DataGridTextColumn Width="*" Header="性别" Binding="{Binding SexType}"/>
<DataGridTextColumn Width="*" Header="Id" Binding="{Binding Id}"/>
</DataGrid.Columns>
</DataGrid>
再稍微修改下样式,于是乎我们得到了这样的画面
因为我们是通过expander修改而成,如果想要更加细微的画面,建议自定义控件。
具体代码请参考源代码
WPF 分组的更多相关文章
- wpf CollectionViewSource与ListBox的折叠、分组显示,及输入关键字 Filter的筛选
在wpf中虽然ObservableCollection<T>作为ListBox的Itemsource,很好,很强大!但是CollectionViewSource与ListBox才是天作之合 ...
- WPF里ItemsControl的分组实现 --listbox 实现分组
我们在用到ItemsControl时,有时会用到分组,如ListBox,ListView,DataGrid.WPF的ItemsControl可以实现分组,是依托于GroupStyle,以ListBox ...
- WPF,ListView设置分组
原文:WPF,ListView设置分组 今天遇到一个问题,就是在ListView中设置分组.想了很久在网上早了些资料作出一个例子. 分组字段也可以在后台中定义: CollectionView view ...
- C# WPF DataGrid 分组(Group)
原文:C# WPF DataGrid 分组(Group) 效果如图,每个列的名字可以自定义.我随便用了”File”和”Attachment Name”. 在Window的Resources里面设置S ...
- WPF DataGrid分组和排序
之前一直用的Dev的GridControl,控件自带分组排序啥的.今天试了下在wpf自带的Datagrid控件上实现分组和排序. Datagrid上实现这些功能主要用到CollectionViewSo ...
- WPF里ItemsControl的分组实现
我们在用到ItemsControl时,有时会用到分组,如ListBox,ListView,DataGrid.WPF的ItemsControl可以实现分组,是依托于GroupStyle,以ListBox ...
- WPF - Group分组对ListBox等列表样式的约束
原文:WPF - Group分组对ListBox等列表样式的约束 在做WPF主题支持时,出现一个分组引起的莫名错误,可是折腾了我一番.在没有使用样式时,列表分组很正常,使用了别人写的ListBox列表 ...
- WPF下Itemscontrol分组 样式
原文 WPF下Itemscontrol分组 样式 <ItemsControl Grid.Row="1" DataContext="{Binding Layouts} ...
- WPF筛选、排序和分组
可以通过CollectionViewSource或者CollectionView对视图进行排序.筛选和分组. 一.通过CollectionViewSource listingDataView是Coll ...
随机推荐
- 使用Visual Studio查看C++类内存分布
书上类继承相关章节到这里就结束了,这里不妨说下C++内存分布结构,我们来看看编译器是怎么处理类成员内存分布的,特别是在继承.虚函数存在的情况下. 工欲善其事,必先利其器,我们先用好Visual Stu ...
- chrome插件one-read开发1:准备
阅读我的博客文章:chrome插件one-read开发:准备 前言 为啥要做这个,因为我原本想用chrome做一个书签管理的东西,但是很久没有碰过chrome的插件开发了.所以先做一个简单的,来熟悉下 ...
- 用Canvas画一棵二叉树
笔墨伺候 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 然后便可以挥毫泼墨 ...
- 【uniapp 开发】工具类 -- MathUtil
获取随机数 /* ** randomWord 产生任意长度随机字母数字组合 ** randomFlag 是否任意长度 min 任意长度最小位[固定位数] max 任意长度最大位 ** ** 生成6-1 ...
- 【小程序开发】文本text-overflow属性的使用
text-overflow原本是CSS3的一个属性,在微信小程序中也支持. text-overflow文本溢出显示省略号~ 注:使用text-overflow时,需要设置固定的宽度才起作用,所以该元素 ...
- java中StringTokenizer的用法
4.StringTokenizer StringTokenizer可以解析分隔符不是空格的情况.例子:import java.util.StringTokenizer;public class Tes ...
- java静态方法和实例方法的区别
静态方法(方法前冠以static)和实例方法(前面未冠以static)的区别 调用静态方法或说类方法时,可以使用类名做前缀,也可以使用某一个具体的对象名:通常使用类名.static方法只能处理sta ...
- css3,css的基础全局运用
浮动 1.浮动起来的盒子不占用位置,浮动了一个盒子下面的标准流的盒子会顶上来 可用清除浮动的方法来解决标准流会顶替位置的问题 清除浮动给父盒子加overflow: hidden; 鼠标经过事件 : ...
- kubectl get node -n wide --show-labels
集群环境:1.k8s用的是二进制方式安装2.操作系统是linux (centos)3.操作系统版本为 7.4/7.94.k8s的应用管理.node管理.pod管理等用rancher.k8s令牌以及ma ...
- 深入剖析 RocketMQ 源码 - 负载均衡机制
RocketMQ作为一款流行的消息中间件在各大互联网应用广泛,本文主要分析RocketMq在消息生产和消费过程中的负载均衡机制,并创新提出消费端负载均衡策略的改写以实现固定IP消费的可能.