WPF の DataGrid のヘッダーの調整に難儀したので、まとめがてらメモ。

　完成系のイメージは以下の通り。

　ところが、デフォルトの設定では、以下のように表示します。

　そこで、以下の設定をすることで、完成形のイメージを作りました。

<DataGrid ColumnHeaderHeight="40" Margin="10">

    <!-- 列ヘッダーのみ表示する(本来はDataGridタグ内の属性に記載の事) -->
    <DataGrid.HeadersVisibility>Column</DataGrid.HeadersVisibility>

    <DataGrid.Columns>
        <DataGridTextColumn Header="あああ" Width="3*" />
        <DataGridTextColumn Header="いいい&#xa;ううう" Width="5*" />
        <DataGridTextColumn Header="えええ" Width="5*"/>
    </DataGrid.Columns>

    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="DataGridColumnHeader">

            <!-- ヘッダーの罫線を黒にする -->
            <Setter Property="BorderThickness" Value="0,0,1,1"/>
            <Setter Property="BorderBrush" Value="Black"/>

            <!-- ヘッダー文字をセンタリングする -->
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="TextBlock.TextAlignment" Value="Center"/>
        </Style>
    </DataGrid.ColumnHeaderStyle>

    <DataGrid.Items>
        <!-- ここはフォーマット確認用のダミーなのでデタラメ -->
        <TextBox></TextBox>
        <TextBox></TextBox>
        <TextBox></TextBox>
    </DataGrid.Items>

</DataGrid>

　以下、設定のポイントを列挙します。

1. ヘッダーの罫線の色を変える

   　ColumnHeaderStyle の BorderBrush で色を、BorderThickness で線の太さを設定しました。
   　BorderThickness は四辺全部に線を引いてしまうと、線の太さが倍になって見えるので、右辺と下辺のみに線を入れました。（データ部の線の引き方とあわせた感じです）

   <DataGrid.ColumnHeaderStyle>
       <Style TargetType="DataGridColumnHeader">
           <!-- ヘッダーの罫線を黒にする -->
           <Setter Property="BorderThickness" Value="0,0,1,1"/>
           <Setter Property="BorderBrush" Value="Black"/>
   

2. センタリングする

   　ColumnHeaderStyle の HorizontalContentAlignment と TextBlock.TextAlignment で水平方向のセンタリングをします。片側だけ設定したのでは見た目は左寄せに見えるので、両方設定することが重要です。
   　VerticalContentAlignment はデフォルトが Center なので今回はケースでは必要ないです。上寄せとかにする場合はここを操作します。

   <DataGrid.ColumnHeaderStyle>
       <Style TargetType="DataGridColumnHeader">
           <!-- ヘッダー文字をセンタリングする -->
           <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
           <Setter Property="VerticalContentAlignment" Value="Center"/>
           <Setter Property="TextBlock.TextAlignment" Value="Center"/>
   

3. 行ヘッダーを消す

   　行ヘッダーを設定しなくても表示はされてしまうので、HeadersVisibility に Column を設定することで、列ヘッダーのみを表示するように（行ヘッダーを表示しないように）します。
   　（以下は要素ではなく属性に設定する場合の記述例）

   <DataGrid HeadersVisibility="Column">
   

4. 複数行テキストの設定

   　複数行のテキストを属性値として指定する場合は、改行コード(
)を指定します。

   <DataGridTextColumn Header="いいい&#xa;ううう" />
   

5. 列幅の比率指定

   　列幅(DataGridTextColumn.Width)の指定に "*"(star) が使えます。

   <DataGridTextColumn Header="あああ" Width="3*" />