Animating BorderBrush from DynamicResource animates everything using that brush

Question

I am trying to color a border based on a state, and an event. I have an On, and Off state, with a "Poked" event. On = Green, Off = Red, when Poked I want to fade from Blue back to its original color (based on its state). All are in the application resource, and used as a DynamicResource.

I have some code that does just that, but whenever I trigger the Poked event, everything that is using the color that the object is currently set to, changes from Blue to that color. I suspect what is happening is the color transition is actually running on the color stored in the application resource, rather than the color of the object in particular.

I may be way off the mark with how I'm handling the animation. I appreciate any help.

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

Code Behind

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

State to color converter

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

App resources

<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

Try setting x:Shared="False" on your Brush resources to force a separate instance to be created each time it is referenced.