c# - 从 DynamicResource 为 BorderBrush 设置动画会使用该画笔为所有内容设置动画

Question

我正在尝试根据状态和事件为边框着色。我有一个开启和关闭状态，带有“Poked”事件。 On = Green，Off = Red，当 Poked 时，我想从蓝色淡化回其原始颜色(基于其状态)。所有都在应用程序资源中，并用作 DynamicResource。

我有一些代码可以做到这一点，但每当我触发 Poked 事件时，使用对象当前设置的颜色的所有内容都会从蓝色变为该颜色。我怀疑正在发生的事情是颜色转换实际上是在应用程序资源中存储的颜色上运行的，而不是特定对象的颜色。

我处理动画的方式可能有点离谱。感谢您的帮助。

主窗口.xaml

<Window x:Class="ColorAnimatorIssue.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:ColorAnimatorIssue"
    Title="MainWindow" 
    Height="350" 
    Width="525"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Window.Resources>
    <local:StateColorConverter x:Key="ColorConverter"/>
    <Storyboard x:Key="Poke1">
        <ColorAnimation Storyboard.TargetName="B1"
                        Storyboard.TargetProperty="(BorderBrush).(SolidColorBrush.Color)"
                        From="{DynamicResource PokeColor}"
                        Duration="0:0:2"/>
    </Storyboard>
    <Storyboard x:Key="Poke2">
        <ColorAnimation Storyboard.TargetName="B2"
                        Storyboard.TargetProperty="BorderBrush.Color"
                        From="{DynamicResource PokeColor}"
                        Duration="0:0:2"/>
    </Storyboard>
</Window.Resources>
<Grid>
    <Button Content="Poke 1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="7,37,0,0" Click="Poke1_Click"/>
    <Button Content="Poke 2" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="87,37,0,0" Click="Poke2_Click"/>
    <Border x:Name="B1"
            BorderBrush="{Binding MyState1, Converter={StaticResource ColorConverter}}"
            BorderThickness="10" 
            Margin="199,37,217,183">
        <Rectangle Height="100" Width="100" Fill="Black"/>
    </Border>
    <Border x:Name="B2"
            BorderBrush="{Binding MyState2, Converter={StaticResource ColorConverter}}"
            BorderThickness="10" 
            Margin="305,37,111,183">
        <Rectangle Height="100" Width="100" Fill="Black"/>
    </Border>
    <Button Content="Toggle 1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="7,10,0,0" Click="Toggle1_Click" />
    <Button Content="Toggle 2" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="87,10,0,0" Click="Toggle2_Click" />
</Grid>

代码隐藏

public enum States
{
    On, Off
}

/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window, INotifyPropertyChanged
{

    States myState1 = States.Off;
    States myState2 = States.Off;

    public MainWindow()
    {
        InitializeComponent();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public States MyState1
    {
        get
        {
            return myState1;
        }
        set
        {
            if(myState1 != value)
            {
                myState1 = value;
                OnPropertyChanged("MyState1");
            }
        }
    }

    public States MyState2
    {
        get
        {
            return myState2;
        }
        set
        {
            if (myState2 != value)
            {
                myState2 = value;
                OnPropertyChanged("MyState2");
            }
        }
    }

    void OnPropertyChanged(string propertyName)
    {
        if(PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    private void Poke1_Click(object sender, RoutedEventArgs e)
    {
        (FindResource("Poke1") as Storyboard).Begin(this);
    }

    private void Poke2_Click(object sender, RoutedEventArgs e)
    {
        (FindResource("Poke2") as Storyboard).Begin(this);
    }

    private void Toggle1_Click(object sender, RoutedEventArgs e)
    {
        MyState1 = (MyState1 == States.On) ? States.Off : States.On;
    }

    private void Toggle2_Click(object sender, RoutedEventArgs e)
    {
        MyState2 = (MyState2 == States.On) ? States.Off : States.On;
    }
}

状态到颜色转换器

public class StateColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        switch((States)value)
        {
            case States.On:
                return Application.Current.FindResource("OnBrush") as Brush;
            case States.Off:
                return Application.Current.FindResource("OffBrush") as Brush;
            default:
                return null;
        }
    }

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

应用资源

<Application.Resources>
    <Color  A="255" R="0" G="255" B="0" x:Key="OnColor"/>
    <SolidColorBrush Color="{DynamicResource OnColor}" x:Key="OnBrush"/>
    <Color  A="255" R="255" G="0" B="0" x:Key="OffColor"/>
    <SolidColorBrush Color="{DynamicResource OffColor}" x:Key="OffBrush"/>
    <Color  A="255" R="0" G="0" B="255" x:Key="PokeColor"/>
</Application.Resources>

Answer 1

尝试在您的 Brush 资源上设置 x:Shared="False" 以强制在每次引用时创建一个单独的实例。