DataGrid's selected row color when inactive

Question

How can I style WPF DataGrid to change the color of selected row when DataGrid lost its focus?

score 141 · Answer 1 · answered Oct 24 '12 at 16:30

141

After ages of searching, I found a surprisingly simple way to do this that's cleaner than the Got/LostFocus approach posted earlier:

<DataGrid.Resources>
    <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="DarkGray"/>
</DataGrid.Resources>

This just sets the inactive background colour to DarkGray, leaving the active background colour to the default, but you can change that too using the SystemColors.HighlightBrushKey too of course.

The foreground resource key for inactive selections is SystemColors.InactiveSelectionHighlightTextBrushKey.

answered Oct 24 '12 at 16:30

Steve Streeting

2,374
2
18
8

1

- Doesn't correct text color – jtimperley Oct 26 '12 at 17:34
4

InactiveSelectionHighlightBrushKey only works with FW 4.5 and throws an exception with FW 4.0. I wrote more on this http://stackoverflow.com/a/13827971/1815957 – Mikhail Shcherbakov Apr 14 '13 at 21:37
52

With .NET 4.5 I use this code: ` ` – Heiner Apr 15 '13 at 06:58
1

how come we need to specify a new value for the SystemColor key and not give Background another color like we usually would do ? is it because the DataGrid overrides the Background color in code ? or does it have something to do with the fact that our value comes from a static context ? – eran otzap Nov 25 '13 at 18:43
5

InactiveSelectionHighlightBrushKey isn't available in .net 4.0 :( – BigSandwich Sep 24 '14 at 23:55

BigSandwich · Answer 2 · 2014-09-25T16:05:36.090

Complete solution that works for 4.0. Note that this on the CellStyle.

<DataGrid.CellStyle>
    <!--Override Highlighting so that its easy to see what is selected even when the control is not focused-->
    <Style TargetType="{x:Type DataGridCell}">
        <Style.Triggers>
            <Trigger  Property="IsSelected" Value="true">
                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                <Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
            </Trigger>
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True" />
                    <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}, Path=IsKeyboardFocusWithin}" Value="False" />
                </MultiDataTrigger.Conditions>
                <MultiDataTrigger.Setters>
                    <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
                    <Setter Property="BorderBrush" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
                </MultiDataTrigger.Setters>
            </MultiDataTrigger>
        </Style.Triggers>
    </Style>
</DataGrid.CellStyle>

HCL · Answer 3 · 2011-11-03T17:07:38.617

10

Do it like this:

<DataGrid ...>
    <DataGrid.Resources> 
        <Style TargetType="DataGridRow"> 
            <Style.Resources> 
                <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"/>                                  
            </Style.Resources> 
        </Style> 
   </DataGrid.Resources> 
...

edited Nov 03 '11 at 17:07

answered Nov 03 '11 at 16:11

HCL

36,053
27
163
213

Thanks for the answer! It changes selection color. But also for active focus case. So the row always is red neither it is active or inactive. And I need another behavior: _blue_ selected row when DataGrid *has* focus and _red_ selected row when DataGrid *has no* focus. – white.zaz Nov 03 '11 at 16:33
@HCL how come we need to specify a new value for the SystemColor key and not give Background another color like we usually would do ? is it because the DataGrid overrides the Background color in code ? or does it have something to do with the fact that our value comes from a static context ? – eran otzap Nov 25 '13 at 18:42

score 8 · Answer 4 · answered Mar 31 '14 at 17:38

None of these answers gave me quite what I was looking for. The top rated by Steve Streeting changed other sections of the datagrid that I didn't want to change, and other answers weren't providing the inactive color change, but were properly targeting the row only. So here's a mixture of their answers that changes the inactive color, only on the rows and not in other places on the grid.

<DataGrid.Resources>
    <Style TargetType="DataGridRow">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="DarkGray"/>
        </Style.Resources>
    </Style>
</DataGrid.Resources>

score 7 · Answer 5 · answered Aug 04 '16 at 19:58

LATE ANSWER:

This works in .Net 4.0, and you don't have to hardcode the color:

<Style TargetType="DataGridRow">
    <Style.Resources>
         <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="{x:Static SystemColors.HighlightColor}" />
         <SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="{x:Static SystemColors.HighlightTextColor}"/>
    </Style.Resources>
</Style>

score 4 · Answer 6 · answered Aug 08 '14 at 13:20

For .Net Framework 4.0 (or if you don't want to use the InactiveSelection... brush keys): Create a DataGridRow style/control template, and add these triggers:

<ControlTemplate.Triggers>
    <Trigger  Property="IsSelected" Value="true">
        <Setter Property="Background" Value="{DynamicResource SelectionBrush}" />
    </Trigger>
    <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsSelected}" Value="True" />
            <Condition Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGrid}, Path=IsKeyboardFocusWithin}" Value="False" />
        </MultiDataTrigger.Conditions>
        <MultiDataTrigger.Setters>
            <Setter Property="Background" Value="{DynamicResource InactiveSelectionBrush}" />
        </MultiDataTrigger.Setters>
    </MultiDataTrigger>
</ControlTemplate.Triggers>

You may have to do this for the DataGrid.CellStyle instead of the row. Its still unclear to me when each style is used. — BigSandwich, Sep 25 '14 at 15:53
OK, where does this code go? Within a or within . a complete, working answer would be useful. — Stealth Rabbi, Jan 08 '15 at 13:03

score 4 · Answer 7 · answered Jan 24 '17 at 12:59

I added this to my ResourceDictionary so that it applies to all data grids in my program.

<Style TargetType="DataGrid">
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="LightGray"/>
    </Style.Resources>        
</Style>

score 4 · Answer 8 · answered Sep 12 '17 at 11:22

You should define section "DataGrid.CellStyle" inside your DataGrid like this:

    <DataGrid>
        <DataGrid.CellStyle>
            <Style TargetType="DataGridCell">
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="LightBlue"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </DataGrid.CellStyle>
    </DataGrid>

But why it's works like that? Why SelectedRow trigger is not enough? — Dodikaedr, Jun 09 '21 at 12:47

score 3 · Answer 9 · answered Jul 07 '16 at 12:14

For .net Framework 4.0

<Style TargetType="DataGridRow">
 <Style.Resources>
     <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="DarkGray" />
     <SolidColorBrush x:Key="{x:Static SystemColors.ControlTextBrushKey}" Color="White"/>
 </Style.Resources>
</Style>

https://social.msdn.microsoft.com/Forums/vstudio/en-US/635642e6-4808-4b3e-8aea-c8c434397d0f/datagrid-lost-focus-brush?forum=wpf

white.zaz · Accepted Answer · 2012-05-22T18:57:39.100

Find an answer by myself.

Add to DataGrid's resources the brush, which can change its 'Color' property from code behind, and reference HighlightBrushKey to it:

<DataGrid.Resources>
    <SolidColorBrush x:Key="SelectionColorKey" Color="DarkGray"/>
    <Style TargetType="DataGridRow">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="{Binding Source={StaticResource SelectionColorKey}, Path=Color}"/>
        </Style.Resources>
    </Style>
</DataGrid.Resources>

Then add DataGrids event handlers to manually change the color:

private void DataGrid1_LostFocus(object sender, RoutedEventArgs e)
{
    ((SolidColorBrush)DataGrid1.Resources["SelectionColorKey"]).Color = Colors.DarkGray;
}

private void DataGrid1_GotFocus(object sender, RoutedEventArgs e)
{
    ((SolidColorBrush)DataGrid1.Resources["SelectionColorKey"]).Color = SystemColors.HighlightColor;
}

private void DataGrid1_LostKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
{
    ((SolidColorBrush)DataGrid1.Resources["SelectionColorKey"]).Color = Colors.DarkGray;
}

Hans-Peter Kalb · Answer 11 · 2020-05-05T06:26:26.280

For .NET 4.0 or higher: It is also possible to set the colors programmatically:

if (TestDataGrid.RowStyle == null)
{
  TestDataGrid.RowStyle = new Style(typeof(DataGridRow));
}

// Set colors for the selected rows if focus is inactive
TestDataGrid.RowStyle.Resources.Add(SystemColors.ControlBrushKey, new SolidColorBrush(Colors.SkyBlue));
TestDataGrid.RowStyle.Resources.Add(SystemColors.ControlTextBrushKey, new SolidColorBrush(Colors.Black));

// Set colors for the selected rows if focus is active
TestDataGrid.RowStyle.Resources.Add(SystemColors.HighlightBrushKey, new SolidColorBrush(Colors.Red));
TestDataGrid.RowStyle.Resources.Add(SystemColors.HighlightTextBrushKey, new SolidColorBrush(Colors.White));

For .NET 4.5 or higher there is the following alternative to set the colors programmatically:

if (TestDataGrid.Resources == null)
{
  TestDataGrid.Resources = new ResourceDictionary();
}

// Set colors for the selected rows if focus is inactive
TestDataGrid.Resources.Add(SystemColors.InactiveSelectionHighlightBrushKey, new SolidColorBrush(Colors.SkyBlue));
TestDataGrid.Resources.Add(SystemColors.InactiveSelectionHighlightTextBrushKey, new SolidColorBrush(Colors.Black));

// Set colors for the selected rows if focus is active
TestDataGrid.Resources.Add(SystemColors.HighlightBrushKey, new SolidColorBrush(Colors.Red));
TestDataGrid.Resources.Add(SystemColors.HighlightTextBrushKey, new SolidColorBrush(Colors.White));

score 0 · Answer 12 · edited May 28 '21 at 09:13

I had a similar problem. The scenario was a DataGrid with colors assigned for: RowBackground and AlternatingRowBackground. When the DataGrid Lose Focus, the selected row became Gray, returning to the correct color when the DataGrid regained Focus by clicking on any row. This effect was unpleasant. I started from the solution proposed here by Steve Streeting:

<Style TargetType="DataGrid">
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" 
                         Color="LightGray"/>
    </Style.Resources>
</Style>

but by changing Color = "Transparent".

<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" 
                 Color="Transparent"/>

this solved the problem in a simple and satisfactory way. valid for .net 4.5, not for .net 4.0.

Hope this solution is useful

incorrect behavior:

incorrect behavior

correct behavior:

correct behavior

DataGrid's selected row color when inactive

12 Answers12

incorrect behavior:

correct behavior:

Linked