WPF 4 DataGrid 控件（进阶篇二）

原文: WPF 4 DataGrid 控件（进阶篇二）      上一篇 《WPF 4 DataGrid 控件（进阶篇一）》

中我们通过DataGridTemplateColumn 类自定义编辑了日期列的样式，当然也可以根据个人需要设置任何样式模板。上例中Pass Exam 列显示学生是否通过考试，但我们并不知道该学生每门学科的成绩是多少。本篇将为DataGrid 行增加这些详细信息，使得DataGrid 数据更加充实。

首先，我们仍然先更新一下Member 类，增加Math 和History 两门学科：

public class Member
{
    public string Name { get; set; }
    public string Age { get; set; }
    public SexOpt Sex { get; set; }
    public bool Pass { get; set; }
    public DateTime ExamDate { get; set; }
    public Uri Email { get; set; }
    public int Math { get; set; }
    public int History { get; set; }
}      

为学生赋上考试成绩：

… …
memberData.Add(new Member()
{
    Name = "Lucy",
    Age = "25",
    Sex = SexOpt.Female,
    Pass = true,
    ExamDate = new DateTime(2010, 4, 10),
    Email = new Uri("mailto:[email protected]"),
    Math = 80,
    History = 85
});
dataGrid.DataContext = memberData;      

http://11011.net/software/vspaste

接下来就要到XAML 中为考试成绩设计样式模板：

<Window.Resources>
    ... ...
    <DataTemplate x:Key="RowDetails">
        <Border BorderThickness="0" Background="Orchid" Padding="10">
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Math: " VerticalAlignment="Center"/>
                    <TextBlock Text="{Binding Math}" VerticalAlignment="Center"
                                FontSize="15" FontWeight="Bold"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="History: " VerticalAlignment="Center"/>
                    <TextBlock Text="{Binding History}" VerticalAlignment="Center"
                                FontSize="15" FontWeight="Bold"/>
                </StackPanel>
            </StackPanel>
        </Border>
    </DataTemplate>
</Window.Resources>
      

http://11011.net/software/vspaste

在<DataGrid>中为RowDetailsTemplate 属性添加RowDetails 模板:

<DataGrid x:Name="dataGrid" ItemsSource="{Binding}" 
          AutoGenerateColumns="False" SelectionUnit="CellOrRowHeader" 
          RowDetailsTemplate="{StaticResource RowDetails}">
… …
      

http://11011.net/software/vspaste

     当然，我们也可以直接在<DataGrid>中添加<DataGrid.RowDetailsTemplate> 完成上面所有XAML 代码。注：上面代码中<DataGrid>的RowDetailsTemplate 属性要清除。

... ...
<DataGrid.RowDetailsTemplate>
    <DataTemplate>
        <Border BorderThickness="0" Background="Orchid" Padding="10">
            <StackPanel Orientation="Vertical">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Math: " VerticalAlignment="Center"/>
                    <TextBlock Text="{Binding Math}" VerticalAlignment="Center"
                    FontSize="15" FontWeight="Bold"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="History: " VerticalAlignment="Center"/>
                    <TextBlock Text="{Binding History}" VerticalAlignment="Center"
                    FontSize="15" FontWeight="Bold"/>
                </StackPanel>
            </StackPanel>
        </Border>
    </DataTemplate>
</DataGrid.RowDetailsTemplate>
... ...
      

编译程序，点击行头显示详细考试成绩数据。完成这几篇开发后，我们的DataGrid 内容是不是充实了很多。

相关文章

1.

WPF 4 DataGrid 控件（基本功能篇）

2.

WPF 4 DataGrid 控件（自定义样式篇

）

3.

WPF 4 DataGrid 控件（进阶篇一）

源代码下载