UWP GridViewアイテムのマウスホバーへのエフェクトを有効にする

Question

GridViewのアイテム上にマウスを置いたときに、Gridviewアイテムの縮尺やぼかし/フェードなどの簡単な効果が必要です。どうすればこれを実現できますか？達成したいことのいくつかの例は以下の通りです。

例1（スケール）：

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

例2（フェード）：

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

Answer 1

例1（スケール） - GridViewの

のアイテムの上にマウスをホバリング

最初の質問は、SO：In UWP, how can I scale an item on GridView when item is selectedに回答されているはずです。要件に応じて、ポインタを取得するにはPointerEnteredとPointerExitedイベントを使用するだけです。

例2（フェード）

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(); 
    }