Question

因此...

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

我在listview上编辑了SelectedUnfocused状态。起初，我刚创建了一个scaletransform来缩放标志。但问题是缩放因子使得标志与其邻居重叠。所以我动画容器的宽度增长几个像素，以便它可以适应大小的变化，但这会导致快速选择更改的锯齿。所以我认为这是由listview内的stackpanel无法做到的快速重新测量和布置容器。我创建了一个sizechanged事件来使无效和重新布局但没有成功。关于我可以尝试强制itempanel在动画期间不断重新测量的任何想法吗？

行为视频 here

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

<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>

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

动画问题与尺寸变化元素

0 个答案: