问题描述

WPF自带的ListView和DataGrid控，都提供了数据分组的支持，并可以对分组的Header进行自定义。但是，如果想在每个分组的Header中，显示出本分组的"小计"就不是一件容易的事情了。

假设要用一个ListView用于显示全校学生成绩。按班级分组，并在分组头中显示班级平均分。

最终效果大致如下：

图1. 在分组的Header中显示本分组的Aggregation

怎么样？有什么思路？实现的难点有：

Group Header中的第一例显示为分组的名称。
Group Header中的其它列与数据一致。
Group Header中各列的宽度与ListView中列对应始终一致。
Group Header 中各列的对齐方式与ListView中各列一致。

数据

Model层只有一个类，ScoreInfo，代码如下：

public class 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 class SchoolScoreProvider
{
     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中声明（实体化）数据源，代码如下：

< ObjectDataProvider x:Key ="Data"
                    ObjectType =" {x:Type l:SchoolScoreProvider} "
                    MethodName ="ReadAllScoreInfo" />
< CollectionViewSource x:Key ="DataView"
                      Source =" {StaticResource Data} " >
     
     < CollectionViewSource.GroupDescriptions >
         < PropertyGroupDescription PropertyName ="ClassName" />
     </ CollectionViewSource.GroupDescriptions >
     
     < CollectionViewSource.SortDescriptions >
         < c:SortDescription PropertyName ="TotalScore" Direction ="Descending" />
     </ CollectionViewSource.SortDescriptions >
</ CollectionViewSource >

UI层代码

然后是ListView的定义：

< ListView DataContext =" {StaticResource DataView} "
          ItemsSource =" {Binding} " >
     
     < ListView.GroupStyle >
         < GroupStyle />
     </ ListView.GroupStyle >
     < ListView.View >
         < GridView >
             
             
             < 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 class GroupDataAggregator : IValueConverter
{
     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 x:Key ="GroupHeaderListViewItemStyle"
       TargetType =" {x:Type ListViewItem} "
       BasedOn =" {StaticResource {x:Type ListViewItem}} " >
     < Setter Property ="Template" >
         < Setter.Value >
             < ControlTemplate TargetType =" {x:Type ListViewItem} " >
                 
                 < 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} " >
                 
                 < 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分钟）

如果只是要方案。这里是完整的代码。

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 ListView、DataGrid 不显示列标题 vue表格之:summary-method="getSummaries"与show-summary（列求和） ListView 设置列对齐方式 ListView 两列多行实现 ListView显示Sqlite的数据设置ListView显示CheckBox listview加载显示图片 WPF ListView多行显示 listview显示固定条数让Android Preference Summary中实时显示内容变更