読者です 読者をやめる 読者になる 読者になる

i++

プログラム系のメモ書きなど

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

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

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

f:id:tkyjhr:20150808095229p:plain

サンプルコード

<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 がかなり深い場所にあることがわかります。

f:id:tkyjhr:20150808103657p:plain