在 UWP GridView 项目中启用鼠标悬停效果答案

【问题标题】：Enable effects on mouse hover in UWP GridView items在 UWP GridView 项目中启用鼠标悬停效果
【发布时间】：2017-01-09 05:36:28
【问题描述】：

当鼠标悬停在 GridView 中的项目上时，我想要一些简单的效果，例如缩放或暗淡/淡化 gridview 项目。我怎样才能做到这一点。我想要实现的一些示例如下。

示例 1（比例）：

`https://codepen.io/wifeo/pen/qzwkb`

示例 2（淡入淡出）：

`http://codepen.io/chrisgrabinski/full/gpqtc/`

【问题讨论】：

嗨，您需要在 GridView/GridViewItem 的样式模板中自定义 XAML，您可以通过快速谷歌搜索找到一些基本示例，例如“自定义 GridView XAML”和在您尝试了一些事情之后，当您有一些代码要显示一个更具体的问题时，请回来并很乐意提供帮助。然而，通常首先需要付出一些努力。干杯！
嗨，我确定这与 GridViewItem 的模板样式无关。我正在寻找类似于移动器悬停时的行为，启动一些动画以淡化或突出显示 gridviewitem。

标签： xaml uwp windows-10-universal uwp-xaml

【解决方案1】：

示例 1（缩放）- 将鼠标悬停在 GridView 中的项目上时

第一个问题应该已经在 SO:In UWP, how can I scale an item on GridView when item is selected 上回答过了，根据您的要求，您只需要使用 PointerEntered 和 PointerExited 事件即可获得。

示例 2（淡入淡出）

第二个问题，你要知道Fade animation我做了一个简单的代码示例供你参考。

<GridView x:Name="gv">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited">
                    <Grid.Resources>
                        <Storyboard x:Name="EnterStoryboard">
                            <FadeOutThemeAnimation Storyboard.TargetName="myRectangle" />
                        </Storyboard>
                        <Storyboard x:Name="ExitStoryboard">
                            <FadeInThemeAnimation Storyboard.TargetName="myRectangle" />
                        </Storyboard>
                    </Grid.Resources>
                    <Rectangle Fill="Blue" x:Name="myRectangle" Width="100" Height="100"></Rectangle>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
    {
        Storyboard sb = ((Grid)sender).Resources["EnterStoryboard"] as Storyboard;
        sb.Begin();
    }

    private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
    {
        Storyboard sb = ((Grid)sender).Resources["ExitStoryboard"] as Storyboard;
        sb.Begin();
    }

【讨论】：

谢谢。这似乎是一个合乎逻辑的解决方案。会尝试让你知道结果。