Wählen Sie Storyboard basierend auf der Bedingung in WPF

Question

Ich habe ein Border-Steuerelement, und wenn die Maus darauf geklickt wird Ich möchte, dass der Hintergrund des Rahmens vorübergehend grün wird, wenn die "IsLeft" -Eigenschaft aus meinem Ansichtsmodell wahr ist. Wenn "IsLeft" falsch ist, möchte ich, dass der Hintergrund für einen Moment rot wird.

Ich habe ein Storyboard für die grüne Animation und ein zweites Storyboard für die rote Animation.

Ich denke, ich brauche einen EventTrigger (für den Mausklick) und DataTrigger (gebunden an IsLeft), um dies zu tun, aber ich bin mir nicht sicher, wie.

Beachten Sie, dass ich auch einen MVVM-Relay-Befehl habe, um eine gewisse Logik im ViewModel auszuführen, wenn auf den Rahmen geklickt wird.

<Window x:Class="WpfTestBase.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:WpfTestBase" 
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
    xmlns:Custom="http://www.galasoft.ch/mvvmlight" 
    xmlns:h="clr-namespace:WpfTestBase.Helpers" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525" 
    DataContext="{Binding Path=Main, Source={StaticResource Locator}}"> 
<Window.Resources> 
    <Storyboard x:Key="StoryboardCorrect"> 
     <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsEnabled)"> 
      <DiscreteBooleanKeyFrame KeyTime="0" Value="False"/> 
      <DiscreteBooleanKeyFrame KeyTime="0:0:0.5" Value="True"/> 
     </BooleanAnimationUsingKeyFrames> 
     <ColorAnimationUsingKeyFrames Duration="0:0:0.5" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
      <DiscreteColorKeyFrame KeyTime="0:0:0" Value="#00FF00"/> 
      <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="LightBlue"/> 
     </ColorAnimationUsingKeyFrames> 
     <h:CommandFakeAnimation Duration="0:0:0" Command="{Binding Path=FakeAnimationCommand, Mode=OneWay}" 
             Storyboard.TargetProperty="Opacity" /> 
    </Storyboard> 
    <Storyboard x:Key="StoryboardWrong"> 
     <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsEnabled)"> 
      <DiscreteBooleanKeyFrame KeyTime="0" Value="False"/> 
      <DiscreteBooleanKeyFrame KeyTime="0:0:0.5" Value="True"/> 
     </BooleanAnimationUsingKeyFrames> 
     <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
      <DiscreteColorKeyFrame KeyTime="0:0:0" Value="#FF0000"/> 
      <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="LightBlue"/> 
     </ColorAnimationUsingKeyFrames> 
     <h:CommandFakeAnimation Duration="0:0:0" Command="{Binding Path=FakeAnimationCommand, Mode=OneWay}" 
             Storyboard.TargetProperty="Opacity" /> 
    </Storyboard> 
</Window.Resources> 
<Canvas> 
    <Viewbox Canvas.Left="025" Canvas.Top="57"> 
     <Border x:Name="border" Width="200" Height="82" Canvas.Left="098" Canvas.Top="93" BorderThickness="6,8,7,8" 
       BorderBrush="Black" Background="LightBlue"> 
      <i:Interaction.Triggers> 
       <i:EventTrigger EventName="MouseLeftButtonDown"> 
        <Custom:EventToCommand Command="{Binding BorderCommand, Mode=OneWay}"/> 
       </i:EventTrigger> 
      </i:Interaction.Triggers> 
      <Border.Triggers> 
       <EventTrigger RoutedEvent="Border.MouseLeftButtonUp"> 
        <BeginStoryboard Storyboard="{StaticResource StoryboardCorrect}"/> 
       </EventTrigger> 
      </Border.Triggers> 
      <TextBlock Text="{Binding CountModel.Word}"/> 
     </Border> 
    </Viewbox> 
    <TextBlock x:Name="textBlock1" Canvas.Left="312" TextWrapping="Wrap" Text="IsLeft:" Canvas.Top="188"/> 
    <TextBlock x:Name="textBlock2" Canvas.Left="348" TextWrapping="Wrap" Text="{Binding IsLeft}" Canvas.Top="188"/> 

</Canvas> 

Answer 1

Statt dynamisch ein Storyboard auswählen, können Sie eine einzelnes Storyboard verwenden, sondern binden Sie Ihre DiscreteColorKeyFrame.Value DependencyProperty auf Ihre IsLeft Eigenschaft und dann ein IValueConverter verwenden Sie den Wert in der entsprechenden Farbe zu konvertieren.

Der Konverter würde wie folgt aussehen:

[ValueConversion(typeof(bool), typeof(System.Windows.Media.Color))] 
public class IsLeftToColorConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     return ((bool)value) ? System.Windows.Media.Color.Green : System.Windows.Media.Color.Red 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

Ihre XAML dann wie folgt aussehen könnte:

<Border x:Name="border" Width="200" Height="82" Canvas.Left="098" Canvas.Top="93" BorderThickness="6,8,7,8" 
      BorderBrush="Black" Background="LightBlue"> 
     <Border.Triggers> 
      <EventTrigger RoutedEvent="Border.MouseLeftButtonUp"> 
       <BeginStoryboard> 
        <Storyboard> 
         <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsEnabled)"> 
          <DiscreteBooleanKeyFrame KeyTime="0" Value="False"/> 
          <DiscreteBooleanKeyFrame KeyTime="0:0:0.5" Value="True"/> 
         </BooleanAnimationUsingKeyFrames> 
         <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
          <DiscreteColorKeyFrame KeyTime="0:0:0" Value="{Binding IsLeft, Converter={StaticResource IsLeftToColorConverter}}"/> 
          <DiscreteColorKeyFrame KeyTime="0:0:0.5" Value="LightBlue"/> 
         </ColorAnimationUsingKeyFrames> 
         <h:CommandFakeAnimation Duration="0:0:0" Command="{Binding Path=FakeAnimationCommand, Mode=OneWay}" 
            Storyboard.TargetProperty="Opacity" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Border.Triggers> 
     <TextBlock Text="{Binding CountModel.Word}"/> 
    </Border>