UWP how to change foreground color when mouse over?

Question

UWP how to change foreground color when mouse over?

kw Lee 0

Below is my code in App.xaml. I could change the DataGridRow background color while mouse over, but I couldn't change the foreground color while mouse over. What I could add in the PointerOver part?

<Style x:Key="BasicDataGridRowStyle" TargetType="controls:DataGridRow">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="controls:DataGridRow">
                            <prim:DataGridFrozenGrid x:Name="RowRoot">
                                <prim:DataGridFrozenGrid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </prim:DataGridFrozenGrid.ColumnDefinitions>
                                <prim:DataGridFrozenGrid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </prim:DataGridFrozenGrid.RowDefinitions>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="NormalAlternatingRow"/>
                                        <VisualState x:Name="PointerOver">
                                           
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RowHoverColor}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                
                                                <DoubleAnimation Duration="0:0:.2" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To="1"/>

                                            </Storyboard>
                                        </VisualState>
                                        	.
						.
						.
                                        
                                    </VisualStateGroup>
                                    
                                </VisualStateManager.VisualStateGroups>
                                <Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="Transparent"/>
                                <Rectangle x:Name="InvalidVisualElement" Grid.ColumnSpan="2" Fill="{StaticResource SelectedRowColor}" Opacity="0"/>
                                <prim:DataGridRowHeader x:Name="RowHeader" prim:DataGridFrozenGrid.IsFrozen="True" Grid.RowSpan="3"/>
                                <prim:DataGridCellsPresenter x:Name="CellsPresenter" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" prim:DataGridFrozenGrid.IsFrozen="True" MinHeight="32"/>
                                <prim:DataGridDetailsPresenter x:Name="DetailsPresenter" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" Grid.Row="1"/>
                                <Rectangle x:Name="BottomGridLine" Grid.Column="1" HorizontalAlignment="Stretch" Height="1" Grid.Row="2"/>
                            </prim:DataGridFrozenGrid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

kw Lee 0 Reputation points

2026-03-09T10:24:59.05+00:00

Still looking forward for the above solution. AI can't solve this problem. :(

3 answers

Your answer

kw Lee 0 Reputation points

2026-03-09T10:24:59.05+00:00

Still looking forward for the above solution. AI can't solve this problem. :(

Answer 1

Danny Nguyen (WICLOUD CORPORATION) 6,455 Microsoft External Staff Moderator

Hi @kw Lee ,

You can’t animate CellsPresenter’s (Control.Foreground).(SolidColorBrush.Color) because in the UWP DataGrid template the prim:DataGridCellsPresenter is not a Control (so it doesn’t have a Foreground property). That’s why you get a runtime/template error on pointer-over. That’s why you get a runtime/template error on pointer-over..

Instead, change the cell content’s foreground via a DataGridCell style.

Foreground is applied on the cell / text element, not on the CellsPresenter. So set it on DataGridCell (or TextBlock) and use the cell’s own PointerOver visual state.

Example:


<!-- Foreground used on hover -->

<SolidColorBrush x:Key="RowHoverForegroundBrush" Color="Red"/>

<Style x:Key="BasicDataGridCellStyle" TargetType="controls:DataGridCell">

    <!-- default foreground -->

    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="controls:DataGridCell">

                <Grid x:Name="Root">

                    <ContentPresenter x:Name="ContentPresenter"

                                      Content="{TemplateBinding Content}"

                                      ContentTemplate="{TemplateBinding ContentTemplate}"

                                      Foreground="{TemplateBinding Foreground}"

                                      Margin="{TemplateBinding Padding}"/>

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal"/>

                            <VisualState x:Name="PointerOver">

                                <Storyboard>

                                    <!-- This works because DataGridCell IS a Control -->

                                    <ObjectAnimationUsingKeyFrames

                                        Storyboard.TargetName="Root"

                                        Storyboard.TargetProperty="(Control.Foreground)">

                                        <DiscreteObjectKeyFrame KeyTime="0"

                                            Value="{StaticResource RowHoverForegroundBrush}"/>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                </Grid>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

Then apply it:


<controls:DataGrid CellStyle="{StaticResource BasicDataGridCellStyle}" />

If you want it to follow the row hover:

You can still keep your DataGridRow hover background as-is, but foreground is best controlled at the cell level. If you want “row hover changes all cells”, the clean way is to also add triggers/visual states so the cell reacts when its parent row is pointer-over (usually done via Binding to an ancestor’s state or by using the built-in DataGrid default styles as a reference).

If you found my response helpful or informative, I would greatly appreciate it if you could follow this guidance provide feedback. Thank you.

kw Lee 0

Dear Danny,

Thank you so much for your solution. I'm so excited trying the code you provided, but still doesn't work. Below is the code for DataGrid in xml:

<controls:DataGrid x:Name="dataGrid"           
            HorizontalScrollBarVisibility="Visible"
            VerticalScrollBarVisibility="Visible" 
            RowStyle="{StaticResource BasicDataGridRowStyle}"
          
            <controls:DataGrid.Columns>
                <controls:DataGridTextColumn Width="65" Header="#" Binding="{Binding No}" Tag="No" />
               			.
				        .
				        .
            </controls:DataGrid.Columns>
        </controls:DataGrid>

Below is the code for App.xml:

<Style x:Key="BasicDataGridRowStyle" TargetType="controls:DataGridRow">
                <Setter Property="IsTabStop" Value="False"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="controls:DataGridRow">
                            <prim:DataGridFrozenGrid x:Name="RowRoot">
                                <prim:DataGridFrozenGrid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </prim:DataGridFrozenGrid.ColumnDefinitions>
                                <prim:DataGridFrozenGrid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </prim:DataGridFrozenGrid.RowDefinitions>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="NormalAlternatingRow"/>
                                        <VisualState x:Name="PointerOver">
                                           
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RowHoverColor}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                
                                                <DoubleAnimation Duration="0:0:.2" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="Opacity" To="1"/>

                                            </Storyboard>
                                        </VisualState>
                                        	.
						.
						.
                                        
                                    </VisualStateGroup>
                                    
                                </VisualStateManager.VisualStateGroups>
                                <Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="Transparent"/>
                                <Rectangle x:Name="InvalidVisualElement" Grid.ColumnSpan="2" Fill="{StaticResource SelectedRowColor}" Opacity="0"/>
                                <prim:DataGridRowHeader x:Name="RowHeader" prim:DataGridFrozenGrid.IsFrozen="True" Grid.RowSpan="3"/>
                                <prim:DataGridCellsPresenter x:Name="CellsPresenter" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" prim:DataGridFrozenGrid.IsFrozen="True" MinHeight="32"/>
                                <prim:DataGridDetailsPresenter x:Name="DetailsPresenter" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" Grid.Row="1"/>
                                <Rectangle x:Name="BottomGridLine" Grid.Column="1" HorizontalAlignment="Stretch" Height="1" Grid.Row="2"/>
                            </prim:DataGridFrozenGrid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Danny Nguyen (WICLOUD CORPORATION) 6,455 Microsoft External Staff Moderator

You should try changing the foreground on the cells. In the Toolkit DataGrid, the text color is owned by DataGridCell/TextBlock, and CellsPresenter doesn’t have a Foreground you can animate.

Add a CellStyle like this:


<SolidColorBrush x:Key="RowHoverForegroundBrush" Color="Red"/>

<Style x:Key="BasicDataGridCellStyle" TargetType="controls:DataGridCell">

    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />

    <Setter Property="PointerOverForeground" Value="{StaticResource RowHoverForegroundBrush}" />

</Style>

Then apply it to the grid:


<controls:DataGrid

    x:Name="dataGrid"

    RowStyle="{StaticResource BasicDataGridRowStyle}"

    CellStyle="{StaticResource BasicDataGridCellStyle}">

    ...

</controls:DataGrid>

kw Lee 0

Dear Danny,

Again thank you very very much for your solution. I just tried. When the code built, error occurred.

There is no "PointerOverForeground" in UWP. :(

<SolidColorBrush x:Key="RowHoverForegroundBrush" Color="Red"/>
<Style x:Key="BasicDataGridCellStyle" TargetType="controls:DataGridCell">
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />

    <!-- Error shows: Unknown member 'PointerOverForeground' on 'DataGridCell' -->
    <Setter Property="PointerOverForeground" Value="{StaticResource RowHoverForegroundBrush}" />
</Style>

Danny Nguyen (WICLOUD CORPORATION) 6,455 Microsoft External Staff Moderator

Thanks for the correction.

The docs show DataGridCell has a PointerOver visual state, so you should try to override the DataGridCell template and set the Foreground in that PointerOver state. (learn.microsoft.com)

Add a CellStyle like this:


<SolidColorBrush x:Key="RowHoverForegroundBrush" Color="Red"/>

<Style x:Key="BasicDataGridCellStyle" TargetType="controls:DataGridCell">

    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="controls:DataGridCell">

                <Grid x:Name="Root" Background="{TemplateBinding Background}">

                    <ContentPresenter x:Name="ContentPresenter"

                                      Content="{TemplateBinding Content}"

                                      ContentTemplate="{TemplateBinding ContentTemplate}"

                                      Margin="{TemplateBinding Padding}" />

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="PointerOver">

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames

                                        Storyboard.TargetName="Root"

                                        Storyboard.TargetProperty="(Control.Foreground)">

                                        <DiscreteObjectKeyFrame KeyTime="0"

                                            Value="{StaticResource RowHoverForegroundBrush}" />

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualState>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                </Grid>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>

Then apply it:


<controls:DataGrid

    x:Name="dataGrid"

    RowStyle="{StaticResource BasicDataGridRowStyle}"

    CellStyle="{StaticResource BasicDataGridCellStyle}">

    ...

</controls:DataGrid>

Note: this changes color on cell hover (which is how the Toolkit DataGrid is structured); doing it from the DataGridRow template won’t work because the row template doesn’t own the text foreground. (learn.microsoft.com)

kw Lee 0

Dear Danny,

Thank you very very much for your further explanation. ;) When all your code are added, the code built successfully. However, when I hover the UI, an error shows in App.g.i.cs:

#if DEBUG && !DISABLE_XAML_GENERATED_BREAK_ON_UNHANDLED_EXCEPTION
            UnhandledException += (sender, e) =>
            {
                if (global::System.Diagnostics.Debugger.IsAttached) global::System.Diagnostics.Debugger.Break();
            };
#endif

The above situation occurred only when CellStyle="{StaticResource BasicDataGridCellStyle}" is added

<controls:DataGrid

    x:Name="dataGrid"

    RowStyle="{StaticResource BasicDataGridRowStyle}"

    CellStyle="{StaticResource BasicDataGridCellStyle}">

    ...

</controls:DataGrid>

Danny Nguyen (WICLOUD CORPORATION) 6,455 Reputation points Microsoft External Staff Moderator

2026-03-11T09:12:59.0766667+00:00
You should try changing the storyboard target to the ContentPresenter’s Foreground. Right now it’s likely pointing to (Control.Foreground) on a Grid, which isn’t a Control and causes the hover exception.

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RowHoverForegroundBrush}" /> </ObjectAnimationUsingKeyFrames>
kw Lee 0 Reputation points

2026-03-11T12:47:43.3966667+00:00

Thank you Danny! I think we are almost there. So far, no error. When the mouse over, everything is good, but the foreground color didn't change. What else we can do?
Danny Nguyen (WICLOUD CORPORATION) 6,455 Reputation points Microsoft External Staff Moderator

2026-03-12T10:48:10.18+00:00
You should try setting Foreground on the DataGridCell template and animating the ContentPresenter.Foreground, because Foreground only works if the template uses it (see docs: https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.control.foreground?view=winrt-26100).

Make sure the presenter is bound:

<ContentPresenter x:Name="ContentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Padding}" />

I hope this works for you.

Answer 2

kw Lee 0

Adding the code below shows error when mouse over the Data grid. How can I modify the code?

<!-- New foreground animation -->
        <ColorAnimation
            Storyboard.TargetName="CellsPresenter"
            Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
            To="Red"             Duration="0:0:0.2" />

Answer 3

In the PointerOver visual state, add a storyboard animation that targets the foreground (typically the Foreground of the cells or a brush used for text) in the same way you target BackgroundRectangle.Fill.

For UWP XAML, this is done by animating a brush property via a Storyboard in the VisualState.Storyboard. The pattern is the same as in the examples where a Grid background is animated between states using Storyboard.TargetName and Storyboard.TargetProperty.

Assuming the text in the row uses a named element (for example, CellsPresenter) and its Foreground is a SolidColorBrush, add a ColorAnimation in the PointerOver state storyboard, and another in the Normal state to restore it. Conceptually:

<VisualState x:Name="Normal">
    <Storyboard>
        <!-- Restore foreground color -->
        <ColorAnimation
            Storyboard.TargetName="CellsPresenter"
            Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
            To="YourNormalColor"
            Duration="0:0:0.2" />
    </Storyboard>
</VisualState>

<VisualState x:Name="PointerOver">
    <Storyboard>
        <!-- Existing background animation -->
        <ObjectAnimationUsingKeyFrames
            Storyboard.TargetName="BackgroundRectangle"
            Storyboard.TargetProperty="Fill">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RowHoverColor}" />
        </ObjectAnimationUsingKeyFrames>
        <DoubleAnimation Duration="0:0:.2"
                         Storyboard.TargetName="BackgroundRectangle"
                         Storyboard.TargetProperty="Opacity" To="1"/>

        <!-- New foreground animation -->
        <ColorAnimation
            Storyboard.TargetName="CellsPresenter"
            Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)"
            To="YourHoverColor"
            Duration="0:0:0.2" />
    </Storyboard>
</VisualState>

Key points:

Use VisualState.Storyboard to define state-specific property changes.
Target a named element in the template (Storyboard.TargetName) that actually owns the Foreground used by the row’s text.
Use Storyboard.TargetProperty to point to the brush color property, e.g. (Control.Foreground).(SolidColorBrush.Color) or the appropriate property path for your element.

This follows the same mechanism described for animating template elements between visual states using storyboards.

References:

VisualState.Storyboard Property

Share via

UWP how to change foreground color when mouse over?

3 answers

Your answer