多个 DataTrigger - 故事板被覆盖答案

【问题标题】：Multiple DataTriggers - Storyboard overriden多个 DataTrigger - 故事板被覆盖
【发布时间】：2012-01-20 16:37:34
【问题描述】：

我有两个 DataTriggers 绑定到一个属性（Side），但只能启动一个情节提要（最后一个 DataTriggers 中的那个）。

为什么？

我觉得最后一个故事板覆盖了第一个故事板

<Border x:Name="layout" Background="Transparent" BorderBrush="#BAC8CE" BorderThickness="1" CornerRadius="5">
  <Border.Style>
    <Style TargetType="{x:Type Border}">
      <Style.Triggers>
        <DataTrigger Binding="{Binding Side}" Value="Up">
          <DataTrigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                                Duration="00:00:01"
                                From="Transparent"
                                To="Green"/>
                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                                Duration="00:00:00.5" 
                                From="Green"
                                To="Transparent"/>
              </Storyboard>
            </BeginStoryboard>
          </DataTrigger.EnterActions>
        </DataTrigger>
        <DataTrigger Binding="{Binding Side}" Value="Down">
          <DataTrigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                                Duration="00:00:01" 
                                From="Transparent"
                                To="Red"/>
                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                Duration="00:00:00.5" 
                                From="Red"
                                To="Transparent"/>
              </Storyboard>
            </BeginStoryboard>
          </DataTrigger.EnterActions>
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </Border.Style>
</Border>

【问题讨论】：

标签： c# wpf silverlight storyboard datatrigger

【解决方案1】：

我建议在另一个故事板运行之前停止您的故事板：

<Border x:Name="layout" Background="Transparent" BorderBrush="#BAC8CE" BorderThickness="1" CornerRadius="5">
    <Border.Style>
        <Style TargetType="{x:Type Border}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Side}" Value="Up">
                    <DataTrigger.EnterActions>
                        <StopStoryboard BeginStoryboardName="BeginStoryboardTwo" />
                        <BeginStoryboard x:Name="BeginStoryboardOne">
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                                                Duration="00:00:01"
                                                From="Transparent"
                                                To="Green"/>
                                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                                                Duration="00:00:00.5" 
                                                From="Green"
                                                To="Transparent"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
                <DataTrigger Binding="{Binding Side}" Value="Down">
                    <DataTrigger.EnterActions>
                        <StopStoryboard BeginStoryboardName="BeginStoryboardOne" />
                        <BeginStoryboard x:Name="BeginStoryboardTwo" >
                            <Storyboard>
                                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)" 
                                                Duration="00:00:01" 
                                                From="Transparent"
                                                To="Red"/>
                                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                                Duration="00:00:00.5" 
                                                From="Red"
                                                To="Transparent"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
    <TextBlock Text="Hello World!" />
</Border>

【讨论】：

你是对的。我的故事板从未停止过。因此，另一个故事板没有视觉效果。谢谢
在阅读此主题之前，我尝试使用“RemoveStoryboard”，但效果不如 StopStoryboard。谢谢。

【解决方案2】：

尝试以下解决方案，将您的第二个数据触发器输入操作放在第一个数据触发器退出操作中

<Border x:Name="layout"
        Grid.Row="1"
        Background="Transparent"
        BorderBrush="#BAC8CE"
        BorderThickness="1"
        CornerRadius="5">
  <Border.Style>
    <Style TargetType="{x:Type Border}">
      <Style.Triggers>
        <DataTrigger Binding="{Binding Side, ElementName=uc, Mode=OneWay}"
                      Value="Up">
          <DataTrigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                Duration="00:00:05"
                                From="Transparent"
                                To="Green" />
                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                Duration="00:00:00.5"
                                From="Green"
                                To="Transparent" />
              </Storyboard>
            </BeginStoryboard>
          </DataTrigger.EnterActions>
          <DataTrigger.ExitActions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                Duration="00:00:05"
                                From="Transparent"
                                To="Red" />
                <ColorAnimation Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
                                Duration="00:00:00.5"
                                From="Red"
                                To="Transparent" />
              </Storyboard>
            </BeginStoryboard>
          </DataTrigger.ExitActions>
        </DataTrigger>
      </Style.Triggers>
    </Style>
  </Border.Style>
</Border>

希望对你有帮助

【讨论】：