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

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.