在Silverlight中的DataGrid我们经常会觉得表头太过于简单，对于某一些业务中我们可能需要展现多层次的表头。本文将结合DataGridTemplateColumn和Style解决这种问题。
一：引用命名空间 xmlns:dgCloumn="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"，不需要单独引用其他的DLL。这个命名空间是为了让我们声明的样式指定类型为DataGridColumnHeader。
二：编写DataGrid表头样式如下：
<Style x:Key="CityNumStyle" TargetType="dgCloumn:DataGridColumnHeader"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Grid x:Name="Root"> <Rectangle x:Name="BackgroundGradient" Fill="#eee" Stretch="Fill" Grid.ColumnSpan="2" /> <ContentPresenter Content="区号" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="CityNameStyle" TargetType="dgCloumn:DataGridColumnHeader"> <Setter Property="Foreground" Value="#222"/> <Setter Property="HorizontalContentAlignment" Value="Left"/> <Setter Property="VerticalContentAlignment" Value="Center"/> <Setter Property="IsTabStop" Value="False"/> <Setter Property="SeparatorBrush" Value="#ccc"/> <Setter Property="Padding" Value="8"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <Grid x:Name="Root"> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Rectangle x:Name="BackgroundRectangle" Fill="#ccc" Stretch="Fill" Grid.ColumnSpan="2"/> <Rectangle x:Name="BackgroundGradient" Fill="#eee" Stretch="Fill" Grid.ColumnSpan="2"> </Rectangle> <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> <Grid.RowDefinitions> <RowDefinition Height="20" /> <RowDefinition Height="1" /> <RowDefinition Height="20" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="100"/> <ColumnDefinition Width="1" /> <ColumnDefinition Width="100"/> </Grid.ColumnDefinitions> <!--设置标题名--> <ContentPresenter Content="省份城市" VerticalAlignment="Center" HorizontalAlignment="Center" Grid.ColumnSpan="3" /> <!--设置间隔线--> <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Height="1" Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="3" /> <ContentPresenter Content="省名" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" /> <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="2" Grid.Column="1" /> <ContentPresenter Content="城市" Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center" /> </Grid> <Rectangle x:Name="VerticalSeparator" Fill="#ccc" VerticalAlignment="Stretch" Width="1" Visibility="Visible" Grid.Row="1" Grid.Column="1"/> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>
三：为DataGrid设置Header绑定，需要注意的是在DataGridTemplateColumn绑定行中，我们需要手动设置绑定列为两列，分别绑定两个属性。如下：
<Grid x:Name="LayoutRoot" Background="White"> <sdk:DataGrid AutoGenerateColumns="False" Height="400" HorizontalAlignment="Left" VerticalAlignment="Top" Name="dataGrid1" Width="305"> <sdk:DataGrid.Columns> <sdk:DataGridTemplateColumn Header="sec" HeaderStyle="{StaticResource CityNameStyle}"> <sdk:DataGridTemplateColumn.CellTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <sdk:Label Content="{Binding AddrName}" Width="100"/> <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Width="1" /> <sdk:Label Content="{Binding CityName}" Width="100"/> </StackPanel> </DataTemplate> </sdk:DataGridTemplateColumn.CellTemplate> </sdk:DataGridTemplateColumn> <sdk:DataGridTextColumn HeaderStyle="{StaticResource CityNumStyle}" Binding="{Binding TelNum}" Width="100" /> </sdk:DataGrid.Columns> </sdk:DataGrid> </Grid>
四：我们看后台代码如下：
public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); this.dataGrid1.ItemsSource = CityInformation.GetInfo(); } } /// <summary> /// 城市信息的实体类 /// </summary> public class CityInformation { private string _AddrName; private string _CityName; private string _TelNum; public string AddrName { get { return _AddrName; } set { _AddrName = value; } } public string CityName { get { return _CityName; } set { _CityName = value; } } public string TelNum { get { return _TelNum; } set { _TelNum = value; } } public static List<CityInformation> GetInfo() { return new List<CityInformation>() { new CityInformation(){ AddrName="四川", CityName="成都",TelNum="028"}, new CityInformation(){ AddrName="广东", CityName="广州",TelNum="021"}, new CityInformation(){ AddrName="广西", CityName="南宁",TelNum="0771"}, new CityInformation(){ AddrName="贵州", CityName="贵阳",TelNum="0851"} }; } }
五：效果如下图,如需源码请点击 SLDGHeader.zip 下载。
本文转自程兴亮博客园博客，原文链接：http://www.cnblogs.com/chengxingliang/archive/2012/09/10/2678505.html，如需转载请自行联系原作者
