DataGridのヘッダを結合する

DataGridを使用するためにの下準備。

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

以下のスタイルを定義する。

<Style x:Key="TimeSheetDayHeaderStyle" TargetType="data:DataGridColumnHeader" >
 <Setter Property="FontWeight" Value="Bold" />
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate>
    <Grid x:Name="Root">
     <Grid.ColumnDefinitions>
      <ColumnDefinition/>
      <ColumnDefinition Width = "Auto"/>
     </Grid.ColumnDefinitions>
     <Grid HorizontalAlignment = "{TemplateBinding HorizontalContentAlignment}" 
       VerticalAlignment = "{TemplateBinding VerticalContentAlignment}">
      <Grid.RowDefinitions>
       <RowDefinition Height = "20" />
       <RowDefinition Height = "1" />
       <RowDefinition Height = "20" />
      </Grid.RowDefinitions>
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width = "50"/>
       <ColumnDefinition Width = "1" />
       <ColumnDefinition Width = "50"/>
      </Grid.ColumnDefinitions>
      <!-- Row 0 -->
      <ContentPresenter Content    = "{TemplateBinding Content}" 
           VerticalAlignment = "Center"
           HorizontalAlignment = "Center" 
           Grid.ColumnSpan  = "3"
           />
      <!-- Row 1 -->
      <Rectangle Fill="#FFC9CACA"
         VerticalAlignment="Stretch"
         Height="1" 
         Visibility="Visible"
         Grid.Row="1"
         Grid.ColumnSpan="3"
         />
      <!-- Row 2 -->
      <ContentPresenter Content    = "Qty"
           Grid.Row   = "2"
           VerticalAlignment = "Center" 
           HorizontalAlignment = "Center"
           />
      <ContentPresenter Content    = "Hours"
           Grid.Row   = "2"
           Grid.Column   = "2" 
           VerticalAlignment = "Center"
           HorizontalAlignment = "Center"
           />
      <Rectangle Fill    = "#FFC9CACA"
         VerticalAlignment = "Stretch"
         Width    = "1"  
         Visibility   = "Visible"
         Grid.Row   = "2"
         Grid.Column   = "1"
         />
     </Grid>
     <Rectangle x:Name="VerticalSeparator" Fill="#FFC9CACA" 
                       VerticalAlignment="Stretch" Width="1" Visibility="Visible" 
                       Grid.Row="1" Grid.Column="1"/>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

以下のDataGridを定義する

<data:DataGrid>
    <data:DataGrid.Columns>
        <data:DataGridTemplateColumn Header="Tue" HeaderStyle="{StaticResource TimeSheetDayHeaderStyle}" />
    </data:DataGrid.Columns>
</data:DataGrid>

これで無事ソートも何もできない、多段＋結合ヘッダーの完成です。

実行結果

[ 参考URL ]
http://weblogs.asp.net/dwahlin/archive/2009/06/11/customizing-silverlight-3-datagrid-headers.aspx