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

Question

我想在将鼠标悬停在 GridView 中的某个项目上时产生一些简单的效果，例如缩放或 dim/fade gridview 项目。我怎样才能做到这一点。下面是我想要实现的一些示例。

示例 1（比例）：

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

示例 2（淡入淡出）：

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

Answer 1

Example 1 (Scale) -- when hovering the mouse over an item in GridView

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

Example 2 (Fade)

第二个问题，你需要知道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();
    }

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

Enable effects on mouse hover in UWP GridView items

xaml

uwp

windows-10-universal

uwp-xaml