1

所以...

我有一个列表视图，其中包含几个相隔 20 像素的标志图像（按照规范）。当用户选择一个标志时，该标志需要“变大 2 倍”以表明它已被选中。所以我尝试了以下方法：

我在列表视图上编辑了 SelectedUnfocused 状态。起初，我只是创建了一个 scaletransform 来缩放标志。但问题是缩放因子使标志与其邻居重叠。所以我动画容器的宽度增长了几个像素，以便它可以适应大小的变化，但是这会导致快速选择变化时出现锯齿状。所以我认为这是由于列表视图中的堆栈面板无法足够快地重新测量和布置容器。我创建了一个 sizechanged 事件来使布局无效并重新布局，但没有成功。关于我可以尝试强制项目面板在动画期间不断重新测量的任何想法？

这里的行为视频

请注意，图像的大小会增长并与邻居重叠。只有在动画完成后才会重新布局

<VisualState x:Name="SelectedUnfocused">
     <Storyboard>
          <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionBackground"/>
          <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>
          <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
          <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="contentPresenter">
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListViewItemSelectedForegroundThemeBrush}"/>
          </ObjectAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="OuterContainer">
               <EasingDoubleKeyFrame KeyTime="0" Value="108"/>
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="150"/>
          </DoubleAnimationUsingKeyFrames>
          <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="OuterContainer">
               <EasingDoubleKeyFrame KeyTime="0" Value="100"/>
               <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="400"/>
           </DoubleAnimationUsingKeyFrames>
         </Storyboard>
    </VisualState>

（我知道这不是传统的地铁设计等，但我遵循规范）

4

0 回答 0