WPF の DataGrid は既定テーマのままだと「選択行が青・文字が白」という無機質な見た目です。
この記事では、選択色／文字色／ホバー色を自分好みに変更する方法を紹介します💡
🎨 完成イメージ
| 状態 | 背景色 | 文字色 |
|---|---|---|
| 通常 | 白 | 黒 |
| ホバー時 | 薄い水色 | 黒 |
| 選択時 | 濃い青 | 白 |
| 非アクティブ選択時 | 赤 | 白 |
🧩 コード全体（XAML）
<DataGrid ItemsSource="{Binding Employees}"
SelectedItem="{Binding Selected, Mode=TwoWay}"
AutoGenerateColumns="False"
CanUserAddRows="False"
AlternatingRowBackground="#F9F9F9"
RowBackground="White"
AlternationCount="2">
<!-- ▼ 選択時やフォーカス外の行の色を上書き -->
<DataGrid.Resources>
<!-- 非アクティブ選択行（ウィンドウが非フォーカス時） -->
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Red"/>
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}" Color="White"/>
<!-- アクティブ選択行（フォーカス中） -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#1E90FF"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White"/>
</DataGrid.Resources>
<!-- ▼ 行ごとのスタイル設定 -->
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<!-- 通常時 -->
<Setter Property="Background" Value="White"/>
<Setter Property="Foreground" Value="Black"/>
<!-- 状態に応じたトリガー -->
<Style.Triggers>
<!-- マウスホバー中 -->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E0F3FF"/>
<Setter Property="Foreground" Value="Black"/>
</Trigger>
<!-- 選択中 -->
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#1E90FF"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
<!-- ▼ 列定義 -->
<DataGrid.Columns>
<DataGridTextColumn Header="ID" Binding="{Binding EmployeeId}" IsReadOnly="True" Width="60"/>
<DataGridTextColumn Header="名前" Binding="{Binding Name}" Width="*"/>
<DataGridTextColumn Header="年齢" Binding="{Binding Age}" Width="80"/>
<DataGridCheckBoxColumn Header="有効" Binding="{Binding IsActive}" Width="80"/>
</DataGrid.Columns>
</DataGrid>
💡 ポイント解説
🟥 1. DataGrid.Resources でシステムブラシを上書き
WPF の DataGrid は選択行の描画に システムブラシキー を使っています。
| キー名 | 説明 | 例 |
|---|---|---|
SystemColors.HighlightBrushKey |
選択中の背景色 | 青 |
SystemColors.HighlightTextBrushKey |
選択中の文字色 | 白 |
SystemColors.InactiveSelectionHighlightBrushKey |
非アクティブ時の背景 | グレー |
SystemColors.InactiveSelectionHighlightTextBrushKey |
非アクティブ時の文字色 | 黒 |
これらを <SolidColorBrush> で上書きすれば、
その DataGrid 内でだけ選択行の色を自由に変えられます。
🟦 2. IsMouseOver トリガーでホバー色を指定
DataGridRow の Style.Triggers に以下を入れるだけで、
マウスを乗せた行の背景が変わります。
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#E0F3FF"/>
</Trigger>
WPF の各要素（Button, ListBoxItem, TreeViewItem, DataGridRow …）には
すべて IsMouseOver が用意されているため、
UI の「ホバー演出」を統一的に管理できます。
🟩 3. IsSelected トリガーで選択行を強調
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#1E90FF"/>
<Setter Property="Foreground" Value="White"/>
</Trigger>
このトリガーがあることで、キーボード操作で選択しても色が反映されます。
（SelectionChanged イベントなどを使う必要はありません）
🧠 補足：スコープの違い
| 書く場所 | 影響範囲 |
|---|---|
<DataGrid.Resources> |
その DataGrid 限定 |
<Window.Resources> |
同じウィンドウ内のすべての DataGrid |
<Application.Resources> |
アプリ全体の DataGrid に適用 |
個別調整したい場合は DataGrid.Resources に、
アプリ全体の統一デザインにしたい場合は App.xaml に書くのが◎です。
✨ まとめ
| やりたいこと | 方法 |
|---|---|
| 選択行の背景色を変える |
HighlightBrushKey を上書き |
| 選択行の文字色を変える |
HighlightTextBrushKey を上書き |
| ホバー時に色を変える |
IsMouseOver トリガー |
| 非アクティブ選択の色を変える |
InactiveSelectionHighlightBrushKey を上書き |
💬 さいごに
ほんの数行の XAML で、DataGrid の操作感が一気にモダンになります。
ホバーや選択時の色をブランドカラーに統一するだけでも、
アプリ全体の印象がぐっと良くなります✨
WPF のカスタマイズは少し奥深いですが、
「リソース上書き」と「トリガー」を押さえれば、自由自在にデザインできます。
👋 この記事が役に立ったら LGTM 👍 をお願いします！
質問や別テーマのカスタマイズ（行境界線、セル単位の色変え、行アニメーションなど）も
コメントで気軽にどうぞ。