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