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

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

2016-09-30 chavakane

您可以在Style Template的VisualStateManager中添加一个Storyboard来在IsSelected状态下完成它。 –

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

首先，如何缩放一个物品，你可以使用ScaleTransform类。您可以在二维x-y坐标系中缩放对象。要在此处满足您的要求，可以为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 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。

来源

2016-10-03 09:52:14

谢谢，我能够做到这一点使用视觉状态，我现在正面临另一个问题，当我缩放gridview项目（在我的情况下是一张图片），它与其他gridview项目重叠，我希望所选项目在gridview中的每一项的顶部，通过设置ZIndex以某种方式，我还没有想出任何想法？ – chavakane

@chavakane。对不起，以后的回复。你解决了你的新问题吗？你还需要帮助吗？ –

@ SunteenWu-MSFT我有一个类似的问题与项目（只有一些）重叠..你可以看看它吗？不知道我要去哪里错了在这里https://stackoverflow.com/questions/48130969/irregular-behavior-xaml-uwp-community-toolkit-scale-animation – Pratyay

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

回答

相关问题