none
DataGridRow - change color of selected row

    Question

  • Hi!

    I'm trying to change the color of the selected row in WPF datagrid but it's not working.
    I've defined triggers for 'IsSelected' and 'IsMouseOver' events and while 'IsMouseOver' works fine, 'IsSelected' doesn't.  
    The color of the selected row is allways default blue.

    Here's my code. What is wrong with it? Thanks

    P.S. I'm using Visual C# 2010 beta

    <DataGrid AutoGenerateColumns="False" CanUserDeleteRows="False" Margin="305,52,12,39" Name="gridTasks" BorderThickness="1" VerticalGridLinesBrush="{StaticResource GridLine}" HorizontalGridLinesBrush="{StaticResource GridLine}" AlternationCount="0">
                <DataGrid.Columns>
                    <DataGridTextColumn Binding="{Binding ID}" Header="ID" IsReadOnly="True" Visibility="Hidden" />
                    <DataGridTextColumn Binding="{Binding ProjectID}" Header="ProjectID" IsReadOnly="True" Visibility="Hidden" />
                    <DataGridTextColumn Binding="{Binding SubProjectID}" Header="SubProjectID" IsReadOnly="True" Visibility="Hidden" />
                    <DataGridTextColumn Binding="{Binding UserID}" Header="UserID" IsReadOnly="True" Visibility="Hidden" />
                    <DataGridTextColumn Binding="{Binding UserName}" Header="User name" IsReadOnly="True" Visibility="Visible" />
                    <DataGridTextColumn Binding="{Binding ProjectName}" Header="Project" IsReadOnly="True" Visibility="Visible" />
                    <DataGridTextColumn Binding="{Binding SubProjectName}" Header="Sub project" IsReadOnly="True" Visibility="Visible" />
                    <DataGridTextColumn Binding="{Binding StartTime}" Header="Start time" IsReadOnly="True" Visibility="Hidden" />
                    <DataGridTextColumn Binding="{Binding EndTime}" Header="Finish time" IsReadOnly="True" Visibility="Hidden" />
                    <DataGridTextColumn Binding="{Binding StartTimeFormatted}" Header="Start time" IsReadOnly="True" Visibility="Visible" />
                    <DataGridTextColumn Binding="{Binding EndTimeFormatted}" Header="Finish time" IsReadOnly="True" Visibility="Visible" />
                    <DataGridTextColumn Binding="{Binding Location}" Header="Location" IsReadOnly="True" Visibility="Visible" />
                    <DataGridTextColumn Binding="{Binding Description}" Header="Description" IsReadOnly="True" Visibility="Visible" Width="*" />
                </DataGrid.Columns>
                <DataGrid.RowStyle>
                    <Style TargetType="DataGridRow">
                        <Setter Property="Background" Value="#EEEEFF"/>
                        <Style.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="#FF0000"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#FFDDDD"/>
                            </Trigger>
                        </Style.Triggers>                    
                    </Style>
                </DataGrid.RowStyle>
            </DataGrid>
    Wednesday, March 03, 2010 12:54 PM

Answers

  • Hi Brtz,

    The reason why data trigger doesn't work on selected DataGridRow is that the DataGrid uses the highlight brush defined in the system scope to hight light the selected item. The solution is to override the system setting in the application. For example:



    <DataGrid ....>
                <DataGrid.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FF0000"/>
                </DataGrid.Resources>
                <DataGrid.Columns>
                    ...
                </DataGrid.Columns>
                <DataGrid.RowStyle>
                    <Style TargetType="DataGridRow">
                        <Setter Property="Background" Value="#EEEEFF"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#FFDDDD"/>
                            </Trigger>
                        </Style.Triggers>                    
                    </Style>
                </DataGrid.RowStyle>
    </DataGrid>

    Hope this helps.

    Sincerely,
    Linda Liu


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Welcome to the All-In-One Code Framework! If you have any feedback, please tell us.
    • Marked as answer by Linda Liu Wednesday, March 10, 2010 3:24 AM
    Sunday, March 07, 2010 4:14 PM

All replies

  • Hi Brtz,

    The reason why data trigger doesn't work on selected DataGridRow is that the DataGrid uses the highlight brush defined in the system scope to hight light the selected item. The solution is to override the system setting in the application. For example:



    <DataGrid ....>
                <DataGrid.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FF0000"/>
                </DataGrid.Resources>
                <DataGrid.Columns>
                    ...
                </DataGrid.Columns>
                <DataGrid.RowStyle>
                    <Style TargetType="DataGridRow">
                        <Setter Property="Background" Value="#EEEEFF"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#FFDDDD"/>
                            </Trigger>
                        </Style.Triggers>                    
                    </Style>
                </DataGrid.RowStyle>
    </DataGrid>

    Hope this helps.

    Sincerely,
    Linda Liu


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Welcome to the All-In-One Code Framework! If you have any feedback, please tell us.
    • Marked as answer by Linda Liu Wednesday, March 10, 2010 3:24 AM
    Sunday, March 07, 2010 4:14 PM
  • I have a User Control which contains a DataGrid. How can I do the same thing inside the UserControl.Resources, like a style?
    Tuesday, March 09, 2010 11:53 AM
  • Hi Angelica,

    No matter where the DataGrid resides, the solution is to override the system highlight brush by defining a SolidColorBrush in the resources of the DataGrid itself.


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.
    Welcome to the All-In-One Code Framework! If you have any feedback, please tell us.
    Wednesday, March 10, 2010 3:24 AM
  • I put inside a ResourceDirectory.xaml which I use for my App the following code:

    <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="Foreground" Value="Black"/>
                    </Trigger>
                    <Trigger Property="dg:DataGridRow.IsFocused" Value="True">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="BorderThickness" Value="0"/>
                    </Trigger>
    </Style.Triggers>
    So the selection now is transparent. Thank you anyway.
    Wednesday, March 10, 2010 8:41 AM
  • I have same requirement for selected Row's Foreground color. but its not working.

    I tried setting HighlightTextBrushKey to Transparent and then add triggers to datagridRow. but it still overrides Foreground color of row. plz help me out.


    Dheeraj



    • Edited by deathrace Tuesday, February 26, 2013 3:53 PM
    Tuesday, February 26, 2013 3:51 PM