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

Question

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

Answer 1

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

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

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

其次，关于如何在选择项目时更改视觉状态，您需要基于默认的GridViewItem样式和模板来更改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％。 您可以在此处下载演示。