WPF の DataGrid に関するメモ


WPF の DataGrid のスタイル定義に関する覚書です。

ヘッダーのセンタリング

以下の様に ColumnHeaderStyle を指定します。

<DataGrid>
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Center" />
        </Style>
    </DataGrid.ColumnHeaderStyle>
</DataGrid>

カラム毎の align の設定

まず、App.xaml 等で以下のスタイルを定義します。

<Style x:Key="DataGridCell_AlignCenter" TargetType="DataGridCell">
    <Setter Property="TextBlock.TextAlignment" Value="Center" />
</Style>

<Style x:Key="DataGridCell_AlignRight" TargetType="DataGridCell">
    <Setter Property="TextBlock.TextAlignment" Value="Right" />
</Style>

次に、DataGrid の Columns の設定で以下の様にスタイルを適用します。

<DataGrid>
    <DataGrid.Columns>
        <DataGridTextColumn Header="左寄せカラム" />
        <DataGridTextColumn Header="センタリングカラム"
                            CellStyle="{StaticResource DataGridCell_AlignCenter}" />
        <DataGridTextColumn Header="右寄せカラム"
                            CellStyle="{StaticResource DataGridCell_AlignRight}" />
    </DataGrid.Columns>
</DataGrid>

より柔軟な設定が必要な場合は DataGridTextColumn の代わりに DataGridTemplateColumn を使うと良いです。

VerticalAlign の設定

DataGridTextColumn や DataGridCheckBoxColumn はデフォルトで VerticalAlign の設定が Top になっています。 この設定をまとめて Center にしたい場合は以下の様にします。

まず、App.xaml 等で以下のスタイルを定義します。

<Style x:Key="Body_Content_DataGrid_Centering" TargetType="{x:Type DataGridCell}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridCell}">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter VerticalAlignment="Center" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

これを以下の様に適用します。

<DataGrid CellStyle="{StaticResource Body_Content_DataGrid_Centering}">
</DataGrid>

参考

c# – DataGrid row content vertical alignment – Stack Overflow

カテゴリー: 記事 パーマリンク

コメントを残す