[WPF][DataGrid] 列ヘッダーを装飾する

DataGrid

2022.12.06

本記事の概要
列ヘッダーを装飾する

本記事の概要

この記事では、DataGrid の列ヘッダーを装飾する（背景色や前景色、フォントサイズの変更）について説明します。
※データ表示方法については過去記事「データグリッドにデータを表示する方法」を参照してください。

公式サイト情報はコチラを参照してください。

列ヘッダーを装飾する

WPF の DataGrid の列ヘッダーは、ColumnHeaderStyle プロパティを使用して、装飾をすることができます。

また、背景色は Background で、前景色は Foreground で、フォントサイズは FontSize で指定することができます。このほか FontWeight で太さを指定したり、FontStyle で車体にしたりすることもできます。

<DataGridColumn.HeaderStyle>
    <Style TargetType="DataGridColumnHeader">
        <Setter Property="Background" Value="背景色を指定"/>
        <Setter Property="Foreground" Value="前景色を指定"/>
        <Setter Property="FontSize" Value="フォントサイズを指定"/>
    </Style>
</DataGridColumn.HeaderStyle>

以下の例は、「氏名」という列ヘッダーの背景色を青に、前景色を白に、フォントサイズを24 に設定する例です。

XAML の例

<Window x:Class="WpfSample.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"
        xmlns:local="clr-namespace:WpfSample"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid> 
        <DataGrid x:Name="dataGrid" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Id" Binding="{Binding Id}" CanUserSort="False"/>
                <DataGridTextColumn Header="氏名" Binding="{Binding Name}">
                    <DataGridColumn.HeaderStyle>
                        <Style TargetType="DataGridColumnHeader">
                            <Setter Property="Background" Value="Blue"/>
                            <Setter Property="Foreground" Value="White"/>
                            <Setter Property="FontSize" Value="24"/>
                        </Style>
                    </DataGridColumn.HeaderStyle>
                </DataGridTextColumn>
                <DataGridTextColumn Header="年齢" Binding="{Binding Age}"/>
                <DataGridTextColumn Header="郵便番号" Binding="{Binding ZipCode}"/>
                <DataGridTextColumn Header="住所" Binding="{Binding Address}" />
              </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

実行例は以下の通りです。