如何用VisualStateManager为UWP XAML GridView项添加悬停效果？

你说得没错，VisualStateManager确实是做这类交互效果的最佳选择，不用写后台事件代码更简洁。问题的核心在于Grid不是Control派生类，而VisualStateManager.GoToState方法要求第一个参数必须是Control类型。解决这个问题的关键是给Grid套一个Control类型的容器，比如ContentControl或者Border，这样就能在容器上定义视觉状态了。

下面是具体的实现方案，纯XAML就能搞定：

完整修改后的XAML代码 #

<GridView Name="TheGridView" ItemsSource="{x:Bind stuff}">
    <GridView.ItemTemplate>
        <DataTemplate x:DataType="your-data-type-here">
            <!-- 用ContentControl包裹Grid，它是Control类型，支持VisualStateManager -->
            <ContentControl Background="{StaticResource TheBlackColor}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <!-- 默认状态 -->
                        <VisualState x:Name="Normal"/>
                        <!-- 鼠标悬停状态 -->
                        <VisualState x:Name="PointerOver">
                            <VisualState.Setters>
                                <Setter Target="ContentControl.Background" Value="{StaticResource YourHoverColor}"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <!-- 原来的Grid内容，背景设为Transparent让容器背景透出 -->
                <Grid Background="Transparent">
                    ...你的原有内容...
                </Grid>
            </ContentControl>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

关键说明 #

1. 容器选择：这里用ContentControl作为外层容器，它是标准的Control派生类，天然支持VisualStateManager。你也可以用Border（同样是Control），效果完全一致。
2. 视觉状态自动切换：UWP的Control会自动监听指针悬停事件，无需手动写PointerEntered/PointerExited处理逻辑，状态切换完全由框架自动完成。
3. Grid背景设置：把原来Grid的背景改成Transparent，这样容器的背景就能透出来；也可以直接去掉Grid的背景属性，让它继承容器的背景样式。

如果你更习惯用Border作为容器，代码示例如下：

<Border Background="{StaticResource TheBlackColor}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="PointerOver">
                <VisualState.Setters>
                    <Setter Target="Border.Background" Value="{StaticResource YourHoverColor}"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid>...</Grid>
</Border>

这样就能完美实现你想要的鼠标悬停背景色切换效果，而且符合UWP的设计规范，代码简洁易维护。

内容的提问来源于stack exchange，提问作者Auth Infant