DataGridコントロール

列ヘッダーのカスタマイズ †

[edit]

　複雑なデータモデルをDataGridコントロールに表示するため、いろいろなニーズが出てくると思います。DataGridコントロールの列ヘッダーを分割・結合できるように、見えるカスタマイズする方法を紹介します。

　具体的な方法がソースコード中で説明します。

<sdk:DataGridTemplateColumn IsReadOnly="True" MinWidth="45" Width="*">
   <sdk:DataGridTemplateColumn.HeaderStyle>
       //Headerのスタイルによって、Headerセルを分割します。
       <Style TargetType="sdk:DataGridColumnHeader">
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate>
                       <Grid>
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="10*" />
                               <ColumnDefinition Width="10*" />
                           </Grid.ColumnDefinitions>
                           <Grid.RowDefinitions>
                               <RowDefinition Height="10*" />
                               <RowDefinition Height="10*" />
                           </Grid.RowDefinitions>
                           //枠線を表示するため、Borderコントロールの枠を定義する
                           <Border Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" BorderThickness="0,0,0,1" BorderBrush="Black">
                               <TextBlock Text="メンバー" TextAlignment="Center"></TextBlock>
                           </Border>
                           <Border Grid.Column="0" Grid.Row="1" BorderThickness="0,0,1,0" BorderBrush="Black">
                               <TextBlock Text="Name" />
                           </Border>
                           <Border Grid.Column="1" Grid.Row="1"  BorderThickness="0,0,0,0" BorderBrush="Black">
                               <TextBlock Text="Age" />
                           </Border>
                       </Grid>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>
   </sdk:DataGridTemplateColumn.HeaderStyle>
   <sdk:DataGridTemplateColumn.CellTemplate >
       <DataTemplate>
           //Gridコントロールを利用して、データを二列に分けて表示する
           <Grid>
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="10*" />
                   <ColumnDefinition Width="10*" />
               </Grid.ColumnDefinitions>
               
               <Border Height="Auto" Width="Auto" BorderThickness="1,0,1,0" BorderBrush="Black" Grid.Column="0">
                   <TextBlock TextWrapping="Wrap" Text="{Binding Name, Mode=TwoWay}" VerticalAlignment="Center" HorizontalAlignment="Left" Width="Auto" Height="Auto"></TextBlock>
               </Border>
               <Border Height="Auto" Width="Auto" BorderThickness="1,0,1,0" BorderBrush="Black" Grid.Column="1">
                   <TextBlock TextWrapping="Wrap" Text="{Binding Age, Mode=TwoWay}" VerticalAlignment="Center" HorizontalAlignment="Left" Width="Auto" Height="Auto"></TextBlock>
               </Border>
           </Grid>
       </DataTemplate>
   </sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>

DataGridヘッダースタイルに定義するコントロールを取得する †

[edit]

　DataGridヘッダーのスタイルに名前付きでコントロールを定義しても、コードビハンドからコントロールを呼び出せません。どうしても呼び出したい場合では、「System.Windows.Media.VisualTreeHelper」クラスを利用して、コントロールのオブジェクトを取得することができます。

以下は「System.Windows.Media.VisualTreeHelper」クラスを用いるソースコードサンプルです。

public class VisualTreeUtility
{
   /// <summary>
   /// 指定するUI要素から子要素を取得する
   /// </summary>
   /// <param name="parentFrameworkElement">親要素のオブジェクト</param>
   /// <param name="childFrameworkElementNameToSearch">子要素の名前（x:Name=?）</param>
   /// <returns>子要素のオブジェクト</returns>
   public static FrameworkElement SearchFrameworkElement(FrameworkElement parentFrameworkElement, string childFrameworkElementNameToSearch)
   {
       FrameworkElement childFrameworkElementFound = null;
       searchFrameworkElement(parentFrameworkElement, ref childFrameworkElementFound, childFrameworkElementNameToSearch);
       return childFrameworkElementFound;
   }

   /// <summary>
   /// 指定する親要素からすべての子要素を取得する
   ///</summary>
   /// <param name="parentElement">親要素のオブジェクト</param>
   /// <returns>子要素のリスト</returns>
   public static List<FrameworkElement> GetAllChildFrameworkElement(FrameworkElement parentElement)
   {
       List<FrameworkElement> childFrameworkElementFound = new List<FrameworkElement>();
       searchAllChildFrameworkElement(parentElement, childFrameworkElementFound);
       return childFrameworkElementFound;
   }

   /// <summary>
   /// 要素のVisualTreeHelperを取得する
   /// </summary>
   /// <param name="parentFrameworkElement"></param>
   /// <param name="childFrameworkElementToFind"></param>
   /// <param name="childFrameworkElementName"></param>
   private static void searchFrameworkElement(FrameworkElement parentFrameworkElement, ref FrameworkElement childFrameworkElementToFind, string childFrameworkElementName)
   {
       int childrenCount = VisualTreeHelper.GetChildrenCount(parentFrameworkElement);
       if (childrenCount > 0)
       {
           FrameworkElement childFrameworkElement = null;
           for (int i = 0; i < childrenCount; i++)
           {
               childFrameworkElement = (FrameworkElement)VisualTreeHelper.GetChild(parentFrameworkElement, i);
               if (childFrameworkElement != null && childFrameworkElement.Name.Equals(childFrameworkElementName))
               {
                   childFrameworkElementToFind = childFrameworkElement;
                   return;
               }
               searchFrameworkElement(childFrameworkElement, ref childFrameworkElementToFind, childFrameworkElementName);
           }
       }
   }

   /// <summary>
   /// すべての子要素のVisualTreeHelperを取得する
   /// </summary>
   /// <param name="parentFrameworkElement"></param>
   /// <param name="allChildFrameworkElement"></param>
   private static void searchAllChildFrameworkElement(FrameworkElement parentFrameworkElement, List<FrameworkElement> allChildFrameworkElement)
   {
       int childrenCount = VisualTreeHelper.GetChildrenCount(parentFrameworkElement);
       if (childrenCount > 0)
       {
           for (int i = 0; i < childrenCount; i++)
           {
               FrameworkElement childFrameworkElement = (FrameworkElement)VisualTreeHelper.GetChild(parentFrameworkElement, i);
               allChildFrameworkElement.Add(childFrameworkElement);
               searchAllChildFrameworkElement(childFrameworkElement, allChildFrameworkElement);
           }
       }
   }
}

コメント：

お名前:

(画像の文字列を入力して下さい)