在 UWP 中，如何在选择项目时缩放 GridView 上的项目? [英] In UWP, how can I scale an item on GridView when item is selected?

问题描述

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

I'm using UWP to build an XBOX ONE app. I have a GridView and I need to scale the width and height of the selected Item. Anyone has an example of how to perform that behavior?

推荐答案

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

In UWP, how can I scale an item on GridView when item is selected?

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

Firstly, for how to scale an item you can use ScaleTransform class. You can scales an object in the two-dimensional x-y coordinate system. To meet your requirements here you can create a ScaleTranform object for the ContentBorder of the GridView item's style template.

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

其次，如何改变item被选中时的视觉状态，需要在默认GridViewItem 样式和模板.您可以将以下动画添加到 PointOverSelected 视觉状态以实现缩放.

Secondly, for how to change the visual state when item is selected, you need to change the PointerOverSelected state or Selected state based on the default GridViewItem styles and templates. You can add the following animations to the PointOverSelected visual state to implement the scale.

 <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%.您可以在此处下载演示.

I wrote a completed demo about when the GridView item selected, the height and width of the item will scale to 150%. You can download the demo here.

这篇关于在 UWP 中，如何在选择项目时缩放 GridView 上的项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！