问题描述
WPF自带的ListView和DataGrid控,都提供了数据分组的支持,并可以对分组的Header进行自定义。但是,如果想在每个分组的Header中,显示出本分组的"小计"就不是一件容易的事情了。
假设要用一个ListView用于显示全校学生成绩。按班级分组,并在分组头中显示班级平均分。
最终效果大致如下:
图1. 在分组的Header中显示本分组的Aggregation
怎么样?有什么思路?实现的难点有:
- Group Header中的第一例显示为分组的名称。
- Group Header中的其它列与数据一致。
- Group Header中各列的宽度与ListView中列对应始终一致。
- Group Header 中各列的对齐方式与ListView中各列一致。
数据
Model层只有一个类,ScoreInfo,代码如下:
{
public ScoreInfo(string studentNo, string className, int math, int english)
{
StudentNo = studentNo;
ClassName = className;
MathScore = math;
EnglishScore = english;
}
public string StudentNo { get; set; }
public string ClassName { get; set; }
public int MathScore { get; set; }
public int EnglishScore { get; set; }
[ReadOnly(true)]
public int TotalScore
{
get { return MathScore + EnglishScore; }
}
}
一次考试中,学生的这些数据都不会变。所以不需要实现INotifyPropertyChanged接口。
DAL层直接返回假数据,代码如下:
{
public List<ScoreInfo> ReadAllScoreInfo()
{
var random = new Random();
return (from i in Enumerable.Range(0, 4)
let className = String.Format("({0}) 班", i + 1)
from s in Enumerable.Range(i * 6 + 1, 6)
let mScore = random.Next(101)
let eScore = random.Next(101)
select new ScoreInfo(s.ToString(), className, mScore, eScore))
.ToList();
}
}
在XAML中声明(实体化)数据源,代码如下:
<!-- Just for demo, DON'T initialize your Data Source this way in real project. -->
<ObjectDataProvider x:Key="Data"
ObjectType="{x:Type l:SchoolScoreProvider}"
MethodName="ReadAllScoreInfo" />
<CollectionViewSource x:Key="DataView"
Source="{StaticResource Data}">
<!-- Group By ClassName -->
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="ClassName" />
</CollectionViewSource.GroupDescriptions>
<!-- Sort By TotalScore -->
<CollectionViewSource.SortDescriptions>
<c:SortDescription PropertyName="TotalScore" Direction="Descending" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
UI层代码
然后是ListView的定义:
ItemsSource="{Binding}">
<!-- Specify the current ListView should Group data source items. -->
<ListView.GroupStyle>
<GroupStyle />
</ListView.GroupStyle>
<ListView.View>
<GridView>
<!-- CellTemplate is the only NORMAL way to make the column text right align. -->
<!-- The following code should works with the default ListViewItem style above in Resources.
BUT it doesn't.
<GridViewColumn Header="学号" Width="75"
DisplayMemberBinding="{Binding StudentNo}"
TextBlock.TextAlignment="Right" />
Think, if you need to change the Alignment while running. Their differences will be obvious.
-->
<GridViewColumn Header="学号" Width="75">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding StudentNo}"
TextAlignment="Right" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="数学成绩" Width="75">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding MathScore}"
TextAlignment="Right" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="英语成绩" Width="75">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding EnglishScore}"
TextAlignment="Right" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
为了让Group支持分列,直接能想到的方法就是在其中放置一个ListViewItem。经过尝试这个方案是可行的。需要自定义GroupItem的ControlTemplate。代码如下:
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<ListViewItem Style="{StaticResource GroupHeaderListViewItemStyle}"
Content="{Binding Converter={StaticResource GroupDataAggregator}}" />
<ToggleButton Name="expander"
Style="{StaticResource ToggleExpanderStyle}" />
<ItemsPresenter Grid.Row="1"
Visibility="{Binding IsChecked, ElementName=expander, Converter={StaticResource BooleanToVisibilityConverter}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
其中的关键点是,在里面放了一个ListViewItem。这里直接放GridViewRowPresenter也是可以正确显示出数据的,但是由于没有ListViewItem作Host,每列中的文字会始终向左对齐。
使用一个Converter,对当前组的数据进行Aggregation,生成一个表示班级平均分的ScoreInfo。Convert的代码如下:
{
public object Convert(object value, Type type, object arg, CultureInfo culture)
{
var groupData = value as CollectionViewGroup;
if (groupData != null)
{
var scores = groupData.Items.Cast<ScoreInfo>();
var avgMath = (int)scores.Average(x => x.MathScore);
var avgEng = (int)scores.Average(x => x.EnglishScore);
return new ScoreInfo(groupData.Name.ToString(), null, avgMath, avgEng);
}
return new InvalidOperationException();
}
public object ConvertBack(object value, Type type, object arg, CultureInfo culture)
{
throw new NotImplementedException();
}
}
当然,这个Convert并不重点。另一个重点是,要为GroupItem中的ListViewItem写一个特殊的Style,否则,什么东西都看不到。
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
<!-- Style apply to the ListViewItem in GroupItem header -->
<Style x:Key="GroupHeaderListViewItemStyle"
TargetType="{x:Type ListViewItem}"
BasedOn="{StaticResource {x:Type ListViewItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<!-- KEY STEP: Binding the Columns to ListView's -->
<GridViewRowPresenter Columns="{Binding View.Columns, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListView}}}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
关键的一步就是给GridViewRowPresenter指定Columns,ListView可不会自动为这个外人设置这个属性的。
再回去讲GroupItem,用于展开GroupItem的是其Template中的ToggleButton,即图中三角图标。其代码如下:
<Style x:Key="ToggleExpanderStyle"
TargetType="{x:Type ToggleButton}">
<Setter Property="Width" Value="16" />
<Setter Property="Height" Value="16" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="IsChecked" Value="True" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Background" Value="Black" />
<Setter Property="Padding" Value="0" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Content">
<Setter.Value>
<StreamGeometry>M6,0 L6,6 L0,6Z</StreamGeometry>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<!-- The border is used to make the control a rectangle which is easier to click. -->
<Border Background="Transparent"
BorderThickness="0">
<Path Stretch="None"
Data="{TemplateBinding Content}"
Margin="{TemplateBinding Padding}"
Fill="{TemplateBinding Background}"
Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#007ACC" />
<Setter Property="BorderBrush" Value="#007ACC" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background" Value="White" />
<Setter Property="Content">
<Setter.Value>
<StreamGeometry>M0,0 L4,4 L0,8Z</StreamGeometry>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
题外话
另给勤奋些、不喜欢吃冷饭的同学几个思考的方向,用于确认对上面代码的理解程度。
针对上面这个ToggleButton的Style:
- 每个Setter都有什么作用?删除每一个都有什么不同后果?哪些是可以删除的?(用时5分钟)
- 使用TemplateBinding与直接在ControlTemplate中写值有什么不同?(30秒)
- 为什么把BorderThickness绑定给了Path,而不是Border?(30秒)
- Style中的Trigger能否放在ControlTemplate.Triggers中?为什么使用Style Trigger而不是ControlTemplate Trigger?(5分钟)
- 如果你不会StreamGeometry中的语法,那么尝试解读StreamGeometry中的语法(其中Z表示曲线向原点闭合),并写出一个+ - 号风格的ToggleButton Style。(15分钟)
如果只是要方案。这里是完整的代码。
http://www.cnblogs.com/nankezhishi/archive/2012/09/04/groupsummaryinlistview.html