WPF/XAML : DataGrid の各セルを VerticalAlignment=Center にする（あるいは余白を設定する）

デフォルトでは上方向に寄ってしまいます。とくに CheckBox(DataGridCheckBoxColumn)の列で目立ちます。

これを縦方向中央揃えにするには VerticalAlignment=Center にするには、以下のようにスタイルを設定します。

サンプルコード

<DataGrid x:Name="VerticalCenteredCell_DataGrid">
    <DataGrid.Resources>
        <Style TargetType="DataGridCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridCell}">
                        <Grid Background="{TemplateBinding Background}">
                            <ContentPresenter VerticalAlignment="Center" Margin="4,4,4,4" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Height" Value="24"/>
        </Style>
    </DataGrid.Resources>
</DataGrid>

説明

• DataGrid.Resources 内に無名の（x:Key を設定しない）、DataGridCell に対する Style を設定することで、この DataGrid 内の DataGridCell 全てにこのスタイルが自動で設定されるようにしています
  • いろいろなところで同じスタイルを使う場合は、Windows.Resources で定義します。上寄せの DataGrid を同じウィンドウで併用する場合は、更にスタイルに Key を設定し、DataGrid の CellStyle プロパティに {StaticResources (スタイルのKey）} という形で設定します。
• VerticalAlignment を設定する対象は、DataGridCell の中身の見た目を決定している Template (Control.Template.aspx)) プロパティです。
• Value="..." の形では Value の方が上手く書けないので Value は Property-Element の形で記述します
• ControlTemplate の中に Grid があるのは、行が選択された際の背景色を正しく設定するためです
  • また、これがないとセル・行の選択自体正常に動かなくなります

…と、こんな感じです。

おまけ

今回の例の DataGrid の Visual Tree は以下の様になっています。
CheckBox がかなり深い場所にあることがわかります。