C# の WPF の DataGrid で 行を交互に背景色を変える＋選択色を変える＋カラムが無い所も変える…

盛りだくさんのタイトルになりましたがまぁそういう事…
注意：個々のコードは最終確認してません。（動いている物から必要ない箇所を削除してます）

DataGrid を使って表を作ることはよくあると思います。
で、見やすくするために「1行ごとに背景色を変える」っていうのは「AlternationCount」と「AlternatingRowBackground」を使えばすぐ出来ます。
こんな感じですね

<DataGrid AlternationCount="2"
          AlternatingRowBackground="SkyBlue" 
          SelectionMode="Single"
          SelectionUnit="FullRow">

で、そこにユーザが選択した時の色を変えるのもその辺に良く落ちてます。
こんな感じですね。

<DataGrid AlternationCount="2"
          AlternatingRowBackground="SkyBlue"
          SelectionMode="Single"
          SelectionUnit="FullRow"
          Background="Transparent">
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Black"/>
            <Style.Triggers>
                
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="#0078D7"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>
</DataGrid>

で、この場合下記のようにカラムの無い場所の背景色は変わってくれません。

さてさて見た目が悪いですねー…困りました…
本来「AlternatingRowBackground」の実装側で未指定（白）と同じように扱ってほしいですよね
（素人が考えるにメソッドの順番変えるだけだとは思うが…要望に上がらないのかね…？）


というわけで、カラムが無い所の背景色も選択色にしたい！ってなった場合に、こうなりました。
ちなみにChatGPTと相談しましたが30分かけて解決しなかったので諦めました。
…ChatGPTが有効だったのは最初の10分だけだった…orz

こんな感じになりました。

<DataGrid AlternationCount="2"
          SelectionMode="Single"
          SelectionUnit="FullRow"
          Background="Transparent">
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Black"/>
            <Style.Triggers>
                
                <Trigger Property="AlternationIndex" Value="1">
                    <Setter Property="Background" Value="SkyBlue"/>
                </Trigger>
                
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="#0078D7"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>

結果はこんな感じです。

変更内容：
１．「AlternatingRowBackground」を消す！
　⇒　こいつが全ての現況
２．「DataGrid.RowStyle」で行に対しデフォルト背景・文字色を設定する。
　⇒　今回は背景:白、文字:黒 です
３．「AlternationIndex」を使って、行ごとの色を指定する。
　⇒　今回は「AlternationCount=2」を指定しているので、0～1 がとれます。
　　　AlternationCountの値を行数を増やすとそれ時応じて値が増えるので、指定行の色を指定します。
　　　これは「AlternatingRowBackground」と同じ機能を実装しています。
４．「IsSelected」を使って選択行の色を指定する。
　⇒　trueの場合が選択行の場合なので、そこで指定する。

これをすることで、タイトルを改修しました！


ちなみに、DataGridがフォーカスアウトした場合、これまた色が変わってしまいます。
まぁ、「未選択中」ってのが分かりやすいので良いのですが、嫌だなぁ～って人は下記を追加してください。
「DataGrid.RowStyle」の【前】が無難だと思う…

<DataGrid.Resources>
    
    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}"
                     Color="#0078D7" />
    
    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}"
                     Color="White" />
</DataGrid.Resources>

というわけで、最終形態はこうなりました。
他に問題出ないでくれ…

<DataGrid AlternationCount="2"
          SelectionMode="Single"
          SelectionUnit="FullRow"
          Background="Transparent">
    <DataGrid.Resources>
        
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}"
                         Color="#0078D7" />
        
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightTextBrushKey}"
                         Color="White" />
    </DataGrid.Resources>
    <DataGrid.RowStyle>
        <Style TargetType="DataGridRow">
            
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Black"/>
            <Style.Triggers>
                
                <Trigger Property="AlternationIndex" Value="1">
                    <Setter Property="Background" Value="SkyBlue"/>
                </Trigger>
                
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="Background" Value="#0078D7"/>
                    <Setter Property="Foreground" Value="White"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </DataGrid.RowStyle>

ちゃんちゃん…

C#/WPF/DataGrid

/**********************************************************************************

本記事はGooブログから作成者本人が移行しました。

 **********************************************************************************/