Can you use VisualStateManager to apply hover behaviors to XAML grid?

Question

I have a UWP XAML page that defines a GridView. The individual GridView items are each a grid. Something like this:

    <GridView Name="TheGridView" ItemsSource="{x:Bind stuff}">

        <GridView.ItemTemplate>
            <DataTemplate x:DataType="more stuff">
                <Grid Background="{StaticResource TheBlackColor}">

                    ...stuff here...                    

                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>

   </GridView>

I would like to change the background color of the grid for an item when the mouse hovers over it (from TheBlackColor to something else). I know that I can put PointerEntered and PointerExited events on the Grid and then in my code behind I can set the background property, but this seems like the sort of thing that VisualStateManager is for.

However, I can't figure out quite how to make VisualStateManager work for this. If I define visual states in the XAML, then I assume I would still hook up to the PointerEntered and PointerExited events on the Grid, but in my code behind I would call GoToState to switch states. However, I don't know how to tell GoToState which item in the XAML tree needs to have its visual state changed. I would think that I would just pass the hovered grid item to the first parameter of GoToState (it's given to me as the 'sender' in my PointerEntered event) -- except I can't because the first parameter of GoToState is a Control and Grid does not derive from Control.

Answer 1

For your requirement, you could use XAML Behaviors to realize this feature. Please refer for the following code.

<Page
    x:Class="VisualStateTest.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:VisualStateTest"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
    xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
    xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid>
        <Interactivity:Interaction.Behaviors>
            <Core:EventTriggerBehavior EventName="PointerEntered">
                <Core:ChangePropertyAction PropertyName="Background">
                    <Core:ChangePropertyAction.Value>
                        <SolidColorBrush Color="Red"/>
                    </Core:ChangePropertyAction.Value>
                </Core:ChangePropertyAction>
            </Core:EventTriggerBehavior>
        </Interactivity:Interaction.Behaviors>
    </Grid>
</Page>