如何使用VisualStateManager定位多個UIElements？

Question

如果我做這樣的事情來改變一個Ellipse的不透明度：

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

的一種方法是定義多個DoubleAnimation s到同一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> 

但是，這是有點麻煩時，我有橢圓形的動態數量。
有沒有更優雅的方式？

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

（如果使用一個看不見的額外元素作爲一箇中間綁定目標似乎不太好，它可以改爲在你的橢圓所在的任何容器上的一些附加屬性）