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