Multiple DataTriggers - Storyboard overriden

Question

我有兩個綁定到屬性（Side）的DataTriggers，但只能啓動一個Storyboard（最後一個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> 

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

Answer 2

嘗試以下解決方案，把你的第二datatrigger進入行動在第一個datatrigger退出動作

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

希望這有助於