1,105,594 Community Members

WPF DataGrid row foreground mouseover color

Member Avatar
mfas
Newbie Poster
3 posts since Jun 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi all,

I have been messing around with datagrid styling for a couple of days now, and I am having one issue left which I can not seem to solve.

I want to highligt the text of the row on which I hover with the mouse. Well this seems like an easy task, but at the same time I want custom selection color of the row background and foreground. This combination seems impossible for me to solve.

If I override the datagridrow style I can get everything but the selection style on the row. If I also override the datagridcell style, I can get everything but the mouseover foreground full row highlight. What I have below is complete styling I have come up with so far. I know it contains duplicate attributes for the same tasks, but I have been trying everything. Only the complete row mouseover highlight is missing - only the hovered cell is highlighted.

Can you help me solve this tiny detail?

The code below is attached as a zip file. Alternatively put the below code in a WPF Window (I know the coloring is awful, they are just for the example):

<Window.Resources>
        <XmlDataProvider x:Key="persondata"
                         Source="datagrid.xml"
                         XPath="Data" />

        <!-- DataGrid -->
        <Style x:Key="{x:Type DataGrid}"
               TargetType="{x:Type DataGrid}">
            <Setter Property="AlternatingRowBackground"
                    Value="Orange" />
            <Setter Property="AlternationCount"
                    Value="2" />
            <Setter Property="Background"
                    Value="Green" />
            <Setter Property="BorderThickness"
                    Value="0" />
            <Setter Property="Foreground"
                    Value="Cyan" />
            <Setter Property="HeadersVisibility"
                    Value="Column" />
            <Setter Property="RowBackground"
                    Value="Yellow" />
        </Style>

        <!-- Column header - remove header background -->
        <Style x:Key="{x:Type DataGridColumnHeadersPresenter}"
               TargetType="{x:Type DataGridColumnHeadersPresenter}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
                        <ItemsPresenter />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Column header sort arrow -->
        <Style x:Key="ColumnHeaderSortArrowStyle"
               TargetType="{x:Type Path}">
            <Setter Property="Data"
                    Value="M0,0 L1,0 0.5,1 z" />
            <Setter Property="Fill">
                <Setter.Value>
                    <SolidColorBrush Color="Blue" />
                </Setter.Value>
            </Setter>
            <Setter Property="Height"
                    Value="6" />
            <Setter Property="Margin"
                    Value="0,0,8,0" />
            <Setter Property="RenderTransformOrigin"
                    Value="0.5,0.4" />
            <Setter Property="Stretch"
                    Value="Fill" />
            <Setter Property="VerticalAlignment"
                    Value="Center" />
            <Setter Property="Visibility"
                    Value="Collapsed" />
            <Setter Property="Width"
                    Value="8" />
        </Style>

        <!-- Column header gripper -->
        <Style x:Key="ColumnHeaderGripperStyle"
               TargetType="{x:Type Thumb}">
            <Setter Property="Width"
                    Value="8" />
            <Setter Property="Background"
                    Value="Transparent" />
            <Setter Property="Cursor"
                    Value="SizeWE" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Border Background="{TemplateBinding Background}"
                                Padding="{TemplateBinding Padding}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Column header -->
        <Style x:Key="{x:Type DataGridColumnHeader}"
               TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                        <Border BorderThickness="0,1,1,0"
                                Background="Black"
                                CornerRadius="5,5,0,0">
                            <Border.BorderBrush>
                                <SolidColorBrush Color="Red" />
                            </Border.BorderBrush>

                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>

                                <Thumb x:Name="PART_LeftHeaderGripper"
                                       Grid.Column="0"
                                       Grid.Row="0"
                                       HorizontalAlignment="Left"
                                       Style="{StaticResource ColumnHeaderGripperStyle}" />

                                <ContentPresenter Grid.Column="0"
                                                  Grid.Row="0"
                                                  Margin="6,3,6,3"
                                                  VerticalAlignment="Center" />

                                <Path x:Name="SortArrow"
                                      Grid.Column="1"
                                      Grid.Row="0"
                                      Style="{StaticResource ColumnHeaderSortArrowStyle}">
                                </Path>

                                <Thumb x:Name="PART_RightHeaderGripper"
                                       Grid.Column="1"
                                       Grid.Row="0"
                                       HorizontalAlignment="Right"
                                       Style="{StaticResource ColumnHeaderGripperStyle}" />
                            </Grid>
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver"
                                     Value="True">
                                <Setter TargetName="SortArrow"
                                        Property="Fill">
                                    <Setter.Value>
                                        <SolidColorBrush Color="Blue" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>

                            <Trigger Property="SortDirection"
                                     Value="Ascending">
                                <Setter TargetName="SortArrow"
                                        Property="Visibility"
                                        Value="Visible" />
                                <Setter TargetName="SortArrow"
                                        Property="RenderTransform">
                                    <Setter.Value>
                                        <RotateTransform Angle="180" />
                                    </Setter.Value>
                                </Setter>
                            </Trigger>

                            <Trigger Property="SortDirection"
                                     Value="Descending">
                                <Setter TargetName="SortArrow"
                                        Property="Visibility"
                                        Value="Visible" />
                            </Trigger>

                            <Trigger Property="DisplayIndex"
                                     Value="0">
                                <Setter Property="Visibility"
                                        Value="Collapsed"
                                        TargetName="PART_LeftHeaderGripper"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="True">
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <SolidColorBrush Color="Blue" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

        <!-- Row -->
        <Style x:Key="{x:Type DataGridRow}"
               TargetType="{x:Type DataGridRow}">
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex"
                         Value="0">
                    <Setter Property="Background"
                            Value="Yellow" />
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <SolidColorBrush Color="Black" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="ItemsControl.AlternationIndex"
                         Value="1">
                    <Setter Property="Background"
                            Value="Orange" />
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <SolidColorBrush Color="Black" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsMouseOver"
                         Value="true">
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <SolidColorBrush Color="Magenta" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsSelected"
                         Value="True">
                    <Setter Property="Background"
                            Value="Brown" />
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <SolidColorBrush Color="White" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

        <!-- Cell -->
        <Style x:Key="{x:Type DataGridCell}"
               TargetType="{x:Type DataGridCell}">
            <Setter Property="Foreground">
                <Setter.Value>
                    <SolidColorBrush Color="Black" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver"
                         Value="true">
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <SolidColorBrush Color="Magenta" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger Property="IsSelected"
                         Value="True">
                    <Setter Property="Background"
                            Value="Brown" />
                    <Setter Property="BorderBrush"
                            Value="Brown" />
                    <Setter Property="Foreground">
                        <Setter.Value>
                            <SolidColorBrush Color="White" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>

    <Grid>
        <DataGrid AutoGenerateColumns="False"
                  ItemsSource="{Binding Source={StaticResource persondata}, XPath=Person}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="First Name"
                                    Binding="{Binding XPath=@Firstname}" />
                <DataGridTextColumn Header="Last Name"
                                    Binding="{Binding XPath=@Lastname}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>

Put the below xml in a file called "datagrid.xml" in the same solution:

<?xml version="1.0" encoding="utf-8" ?>
<Data>
    <Person Firstname="Fred"
            Lastname="Flintstone">
    </Person> 
    <Person Firstname="Barney"
            Lastname="Rubble">
    </Person> 
    <Person Firstname="Joe"
            Lastname="Rockhead">
    </Person> 
</Data>

Thank you...
mfas

Attachments Code.zip (2.33KB)
Member Avatar
mfas
Newbie Poster
3 posts since Jun 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

OK - my initial problem was, that I used a basestyle, which all other styles inherited from. This meant that styles such as Foreground was overriden multiple times through the style hierarchy. This messed thing up bad enough to make the above impossible.

The solution for me was to removed the BasedOn attribute of all datagrid styles except the DataGrid itself (datagridrowheader, datagridrow, datagridcell). Set the foreground color only on the DataGrid and you can override it in the row and cell styles with no problem.

/mfas

Question Self-Answered as of 2 Years Ago
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: