Edit this page

Modify foreground color of Selected/Hovered row

This help article will show you how to modify the foreground color of GridViewRow on selecting it or hovering over it.

Every row shows a set of GridViewCells. In order to change the foreground of all the GridViewCells when their parent row is hovered/selected you should predefine the template of GridViewRow and access the part DataCellsPresenter. This element is a plain presenter used to display the cells contained in a row.

You should then add an additional animation to the default hover/selection states of a row and manipulate the Foreground property of PART_DataCellsPresenter.

For example:Selected State

XAML

<VisualState x:Name="Selected">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Background_Selected"
UIElement.Visibility)">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NavigatorIndicatorBackground"
ackground">
            <DiscreteObjectKeyFrame KeyTime="0:0:0"
iew_RowIndicatorCellBackground_Selected}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_DataCellsPresenter"
oreground">
            <DiscreteObjectKeyFrame KeyTime="0:0:0"
iew_ItemForeground_Selected}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

MouseOver State

XAML

<VisualState x:Name="MouseOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Background_Over"
UIElement.Visibility)">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_DataCellsPresenter"
oreground">
            <DiscreteObjectKeyFrame KeyTime="0:0:0"
iew_ItemForeground_Over}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

You may also add your own brush resources with an appropriate color for this animation:

XAML

<SolidColorBrush x:Key="GridView_ItemForeground_Selected" Color="Green"/>
<SolidColorBrush x:Key="GridView_ItemForeground_Over" Color="Red"/>

See Also