DataGrid组件_自定义头模板
Silverlight强大的DataGrid组件_自定义头模板(HeaderTemplate)
在DataGrid的开发设计中，我们经常会碰到设计样式各异的表头以满足各种要求。而头模板的作用是显示DataGrid控件的首行中的文本、图片或是绑定数据的。通过对头模板的设定，可以为我们定制所需样式的DataGrid。本文将为大家介绍如何自定义DataGrid的头模板。
具体步骤：
1）在XAML文件中的UserControl标签中加入如下命名空间：
xmlns:dataprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
2）设置呈现头模板的样式HeaderStyle的属性
3）可以利用StackPanel标签组合编排添加在头模板内的组件的位置。
实例：
通过实例来了解头模板制定的基本方法。
先来看看效果：
在代码中会指明操作的关键步骤。
MainPage.xaml文件代码：
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:dataprimitives="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"
mc:Ignorable="d" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="SilverlightClient.MainPage"
d:DesignWidth="640" d:DesignHeight="320">
<Grid x:Name="LayoutRoot" Width="640" Height="320" Background="White">
<data:DataGrid x:Name="dgEmployee" AutoGenerateColumns="False" Margin="8,8,36,71" Background="#FFDEF2F0" FontSize="12">
<data:DataGrid.Columns>
<data:DataGridTemplateColumn Width="260">
<data:DataGridTemplateColumn.HeaderStyle>
<Style TargetType="dataprimitives:DataGridColumnHeader">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<!--呈现的关键-->
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="" Width="80"/>
<TextBlock Text=" 2009-07" Width="80"/>
<TextBlock Text="" Width="100"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="单价" Width="80"/>
<TextBlock Text="数量" Width="80"/>
<TextBlock Text="总额" Width="100"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</data:DataGridTemplateColumn.HeaderStyle>
<!--这里用到了我上一篇中提到的方法-->
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Width="80" Text="{Binding Quantity}"/>
<TextBlock Width="80" Text="{Binding Price}"/>
<TextBlock Width="100" Text="{Binding Total}"/>
</StackPanel>
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
<data:DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Width="80" Text="{Binding Quantity,Mode=TwoWay}"/>
<TextBox Width="80" Text="{Binding Price,Mode=TwoWay}"/>
<TextBox Width="100" Text="{Binding Total,Mode=TwoWay}"/>
</StackPanel>
</DataTemplate>
</data:DataGridTemplateColumn.CellEditingTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
</Grid>
</UserControl>
MainPage.xaml.cs文件代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace SilverlightClient
{
public class Products
{
public int Quantity { get; set; }
public int Price { get;set;}
public int Total { get; set; }
}
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
List<Products> em1 = new List<Products>();
em1.Add(new Products() { Quantity = 20, Price = 130, Total = 2600 });
em1.Add(new Products() { Quantity = 5, Price=800, Total = 4000 });
em1.Add(new Products() { Quantity = 10, Price=2000, Total = 20000 });
dgEmployee.ItemsSource = em1;
}
}
}
