2021.1.8

DataGridのデータ行を垂直方向に中央で表示する

DataGridのデータ行に表示する文字を垂直方向に中央で表示したいことがあったので、その方法についてです。

コード

データ行の垂直位置を設定するには、Styleのテンプレート(Template)にVerticalAlignmentを設定する必要があります。

◆MainWindow.xaml


<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="MainWindow" Height="400" Width="600">
    <Canvas>
        <DataGrid Name="DataGrid01" Canvas.Top="40" Canvas.Left="10" Width="564" Height="300" 
                  AutoGenerateColumns="False" CanUserAddRows="False" AlternatingRowBackground="#f8f8f8">
            <DataGrid.CellStyle>
                <Style TargetType="DataGridCell">
                    <Setter Property="FontSize" Value="16" />
                    <Setter Property="Height" Value="40" />

                    <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>

            <DataGrid.Columns>
                <DataGridTextColumn Header="商品名" Binding="{Binding Name}" Width="200"/>
                <DataGridTextColumn Header="金額" Binding="{Binding Price}" Width="100"/>
                <DataGridTextColumn Header="備考" Binding="{Binding Description}" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
    </Canvas>
</Window>

実行結果

Styleの設定なし。

Styleの設定あり。

WPF】関連記事