Question

我有一个边框控件，当点击鼠标时，如果我视图模型中的“IsLeft”属性为true，我希望Border的背景会暂时变为绿色。如果“IsLeft”为假，我希望背景瞬间变红。

我有一个绿色动画的故事板，以及红色动画的第二个故事板。

我认为我需要将EventTrigger（用于鼠标单击）和DataTrigger（绑定到IsLeft）组合起来执行此操作，但我不确定如何。

请注意，我还有一个MVVM中继命令，可以在单击边框时在ViewModel中执行某些逻辑。

<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，而是将DiscreteColorKeyFrame.Value DependencyProperty绑定到IsLeft属性，然后使用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>

在WPF中选择基于条件的故事板

1 个答案: