2021.1.8

DataGridの列ヘッダーの水平位置を設定する(左寄せ、中央寄せ)

DataGridの列ヘッダーの水平位置を左や中央に寄せる方法についてです。特定の列のみ設定することも可能です。

コード

すべての列に対して水平位置を設定するには、DataGridのColumnHeaderStyleにHorizontalContentAlignmentを設定します。

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

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

            <DataGrid.Columns>
                <DataGridTextColumn Header="商品名" Width="200"/>
                <DataGridTextColumn Header="金額" Width="100"/>
                <DataGridTextColumn Header="備考" Width="*"/>
            </DataGrid.Columns>
        </DataGrid>
    </Canvas>
</Window>

上記はすべての列を中央寄せ(Center)にしていますが、特定の列のみを左寄せ(Left)にしたいといった場合は、DataGridTextColumnを以下のようにします。


<DataGridTextColumn Header="備考" Width="*">
    <DataGridTextColumn.HeaderStyle>
        <Style TargetType="DataGridColumnHeader">
            <Setter Property="HorizontalContentAlignment" Value="Left" />
        </Style>
    </DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>

実際の表示

上記のコードを実際に表示すると以下のようになります。

WPF】関連記事