ストーリーボードをWPFで選択する

Question

私はボーダーコントロールを持っています。マウスをクリックすると、ビューモデルの "IsLeft"プロパティが真の場合、ボーダーの背景が緑色になります。 "IsLeft"がfalseの場合は、背景が赤くなるようにします。

緑のアニメーション用のストーリーボードと赤いアニメーション用の第2ストーリーボードがあります。

これを行うには、EventTrigger（マウスクリックの場合）とDataTrigger（IsLeftにバインドされている）を組み合わせる必要があると思いますが、わかりません。

ボーダーをクリックしたときにViewModelで何らかのロジックを実行するためのMVVM Relayコマンドもあります。

<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

代わりに動的にStoryboardを選択するには、単一Storyboardを使用しますが、あなたのIsLeftプロパティにごDiscreteColorKeyFrame.ValueたDependencyPropertyをバインドし、適切な色に値を変換するためにIValueConverterを使用することができます。

[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(); 
    } 
} 

あなたのXAMLは、このようなものになります：：

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

コンバータは、次のようになります