在UWP中，如何在选择项目时在GridView上缩放项目？

Question

我正在使用UWP构建一个XBOX ONE应用程序。我有一个GridView，我需要缩放所选项目的宽度和高度。任何人都有一个如何执行该行为的例子吗？

Answer 1

  

在UWP中，如何在选择项目时在GridView上缩放项目？

首先，对于如何缩放项目，您可以使用ScaleTransform类。您可以在二维x-y坐标系中缩放对象。为了满足您的要求，您可以为ScaleTranform项目样式模板的ContentBorder创建GridView对象。

 <Grid
     x:Name="ContentBorder"
     Background="{TemplateBinding Background}"
     BorderBrush="{TemplateBinding BorderBrush}"
     BorderThickness="{TemplateBinding BorderThickness}">
     <Grid.RenderTransform>
         <ScaleTransform x:Name="contentborderscale"></ScaleTransform>
     </Grid.RenderTransform>

其次，对于如何在选择项目时更改视觉状态，您需要根据默认GridViewItem styles and templates更改PointerOverSelected州或Selected州。您可以将以下动画添加到PointOverSelected视觉状态以实现比例。

 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentborderscale" Storyboard.TargetProperty="ScaleY" >
     <DiscreteObjectKeyFrame KeyTime="0" Value="1.5" />
 </ObjectAnimationUsingKeyFrames>
 <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentborderscale" Storyboard.TargetProperty="ScaleX">
     <DiscreteObjectKeyFrame KeyTime="0" Value="1.5" />
 </ObjectAnimationUsingKeyFrames>

我写了一个完整的演示，说明选择GridView项目的时间，项目的height和width将扩展到150％。您可以下载演示here。