如何使用 VisualStateManager 定位多个 UIElement？答案

【问题标题】：How can I target multiple UIElements with VisualStateManager?如何使用 VisualStateManager 定位多个 UIElement？
【发布时间】：2012-04-21 19:29:18
【问题描述】：

如果我做这样的事情来改变椭圆的不透明度：

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup x:Name="VisualStateGroup">
    <VisualStateGroup.Transitions>
      <VisualTransition GeneratedDuration="0:0:1">
        <VisualTransition.GeneratedEasingFunction>
          <CircleEase EasingMode="EaseIn"/>
        </VisualTransition.GeneratedEasingFunction>
      </VisualTransition>
    </VisualStateGroup.Transitions>
    <VisualState x:Name="Lit"/>
    <VisualState x:Name="Unlit">
      <Storyboard>
        <DoubleAnimation Duration="0" To="0.225" 
                         Storyboard.TargetProperty="(UIElement.Opacity)" 
                         Storyboard.TargetName="ellipse"  d:IsOptimized="True"/>
      </Storyboard>
    </VisualState>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<Ellipse x:Name="ellipse" Width="100" Height="100" Fill="Azure"/>


VisualStateManager.GoToState(this, "Unlit", true);

效果很好。

但是假设我有几个椭圆并且想对它们应用相同的StoryBoard，我该怎么做？

<Ellipse x:Name="ellipse1" Width="100" Height="100" Fill="Azure"/>
<Ellipse x:Name="ellipse2" Width="100" Height="100" Fill="Azure"/>
<Ellipse x:Name="ellipse3" Width="100" Height="100" Fill="Azure"/>

一种方法是将多个DoubleAnimations 定义为同一个StoryBoard：

  <Storyboard>
    <DoubleAnimation Duration="0" To="0.225" 
                     Storyboard.TargetProperty="(UIElement.Opacity)" 
                     Storyboard.TargetName="ellipse1"
                       d:IsOptimized="True"/>
    <DoubleAnimation Duration="0" To="0.225" 
                     Storyboard.TargetProperty="(UIElement.Opacity)" 
                     Storyboard.TargetName="ellipse2"
                       d:IsOptimized="True"/>
  </Storyboard>

但是当我有动态数量的椭圆时，这有点麻烦。
还有更优雅的方式吗？

【问题讨论】：

标签： silverlight visualstatemanager uielement

【解决方案1】：

我不确定优雅，但一种方法可能是为中间属性设置动画，并将真正的目标属性绑定到该属性：

<Grid x:Name="animationTarget" Visibility="Collapsed" />
<Ellipse x:Name="ellipse1" Width="100" Height="100" Fill="Azure" 
    Opacity={Binding Opacity, ElementName=animationTarget}/>
<Ellipse x:Name="ellipse2" Width="100" Height="100" Fill="Azure" 
    Opacity={Binding Opacity, ElementName=animationTarget}/>

和

<Storyboard>
    <DoubleAnimation Duration="0" To="0.225" 
                     Storyboard.TargetProperty="(UIElement.Opacity)" 
                     Storyboard.TargetName="animationTarget" />
</Storyboard>

（如果使用不可见的额外元素作为中间绑定目标似乎不太好，则可以改为在椭圆所在的任何容器上的某个附加属性上）

【讨论】：

太棒了，这是同步动画元素的好解决方案。（例如在项目控件中）