Silverlight DataGrid 多表头 样式实现

首先添加 列的样式引用

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

 自定义多表头样式 
 
@H_450_27@

 
 
<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>@H_419_11@ 

 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>@H_419_11@创建一个模板列    里面放一个Grid（主要控制每一列的宽度） 
 
Grid  必须与自定义样式 里的Grid  每列是一一对应的   否则显示的数据将会错位
 
实际上就是在表头里定义一个Grid 去定义多表头的样式
 
在DataGrid 定义一个与之对就的Grid去绑定具体的数值 
 
PS:定义Grid样式头时  
@H_450_27@
  边框其实就是一个Rectangle 宽度为1 或者长度为1   它也是要占单元格的