Silverlight DataGrid 多表头 样式实现

首先添加 列的样式引用

xmlns:dgCloumn="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Data"

自定义多表头样式

<UserControl.Resources>
        <Style x:Key="DZFXStyle"   TargetType="dgCloumn:DataGridColumnHeader">
            <Setter Property="Foreground" Value="#222"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <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 Width="1"/>     
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="1"/>
                            </Grid.ColumnDefinitions>
                            <Rectangle x:Name="VerticalSeparator1" Fill="#ccc"           
                                       VerticalAlignment="Stretch" Width="1" Visibility="Visible"       
                                     Grid.Column="0" Grid.Row="0" />
             
                            <Rectangle x:Name="BackgroundGradient" Fill="#eee"  Stretch="Fill" Grid.Column="1" Grid.ColumnSpan="2">
                            </Rectangle>
                            <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"     
                               Grid.Column="1"   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*"/>
                                    <ColumnDefinition Width="1" />
                                    <ColumnDefinition Width="100*"/>
                                    <ColumnDefinition Width="1" />
                                    <ColumnDefinition Width="100*"/>
                                </Grid.ColumnDefinitions>
                             
                 
                                <ContentPresenter Content="土壤墒情（%）" 
                                                  VerticalAlignment="Stretch" HorizontalAlignment="Center"    
                                                  Grid.ColumnSpan="8" Grid.Column="0" />
                 
                                <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Height="1"       
                                           Visibility="Visible" Grid.Row="1" Grid.ColumnSpan="7" />
                                <ContentPresenter Content="10CM" Grid.Row="2" VerticalAlignment="Stretch" 
                                                  HorizontalAlignment="Center" />
                                <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Width="1"     
                                           Visibility="Visible" Grid.Row="2" Grid.Column="1" />
                                <ContentPresenter Content="20CM" Grid.Row="2" Grid.Column="2"   
                                                  VerticalAlignment="Stretch" HorizontalAlignment="Center" />
                                <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Width="1"     
                                           Visibility="Visible" Grid.Row="2" Grid.Column="3" />
                                <ContentPresenter Content="40CM" Grid.Row="2" Grid.Column="4"   
                                                  VerticalAlignment="Stretch" HorizontalAlignment="Center" />
                                <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Width="1"     
                                           Visibility="Visible" Grid.Row="2" Grid.Column="5" />
                                <ContentPresenter Content="60CM" Grid.Row="2" Grid.Column="6"   
                                                  VerticalAlignment="Stretch" HorizontalAlignment="Center" />
                            </Grid>
                            <Rectangle x:Name="VerticalSeparator" Fill="#ccc"           
                                       VerticalAlignment="Stretch" Width="1" Visibility="Visible"       
                                       Grid.Row="1" Grid.Column="2"/>
                            
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

DataGrid 控件 创建

<sdk:DataGrid AutoGenerateColumns="False" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" ItemsSource="{Binding}"
                Grid.Row="1"      Name="dataGrid1">
                <sdk:DataGrid.Columns>
                    
                    <sdk:DataGridTemplateColumn  HeaderStyle="{StaticResource DZFXStyle}" Width="200*">
                        <sdk:DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="100*" />
                                        <ColumnDefinition Width="1" />
                                        <ColumnDefinition Width="100*" />
                                        <ColumnDefinition Width="1" />
                                        <ColumnDefinition Width="100*"/>
                                        <ColumnDefinition Width="1" />
                                        <ColumnDefinition Width="100*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock  Text="{Binding SLM10}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="0" />
                                    <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Width="1" Grid.Column="1"/>
                                    <sdk:Label  Content="{Binding SLM20}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="2"/>
                                    <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Width="1" Grid.Column="3" />
                                    <sdk:Label  Content="{Binding SLM40}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="4"/>
                                    <Rectangle Fill="#ccc" VerticalAlignment="Stretch" Width="1" Grid.Column="5"/>
                                    <sdk:Label  Content="{Binding SLM60}" HorizontalAlignment="Stretch" VerticalAlignment="Center" Grid.Column="6" />


                                </Grid>
                            </DataTemplate>
                        </sdk:DataGridTemplateColumn.CellTemplate>
                    </sdk:DataGridTemplateColumn>
                </sdk:DataGrid.Columns>
            </sdk:DataGrid>

创建一个模板列    里面放一个Grid（主要控制每一列的宽度）

Grid  必须与自定义样式 里的Grid  每列是一一对应的   否则显示的数据将会错位

实际上就是在表头里定义一个Grid 去定义多表头的样式

在DataGrid 定义一个与之对就的Grid去绑定具体的数值 

PS:定义Grid样式头时    边框其实就是一个Rectangle 宽度为1 或者长度为1   它也是要占单元格的