Silverlight实用窍门系列：75.Silverlight中DataGrid制作复杂表头

　　在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 下载。