issue in Deleting Storyboard in wpf

Question

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="QWERTY.animation"
x:Name="Window"
Title="animation"
Width="640" Height="480">
<Window.Resources>
    <Storyboard x:Key="Animation">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontSize)" Storyboard.TargetName="btn_1">
            <EasingDoubleKeyFrame KeyTime="0" Value="11"/>
            <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="10.667"/>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.FontWeight)" Storyboard.TargetName="btn_1">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <FontWeight>Normal</FontWeight>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
            <DiscreteObjectKeyFrame KeyTime="0:0:0.3">
                <DiscreteObjectKeyFrame.Value>
                    <FontWeight>Bold</FontWeight>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="btn_1">
            <EasingColorKeyFrame KeyTime="0" Value="#FFEAF0ED"/>
            <EasingColorKeyFrame KeyTime="0:0:0.3" Value="#FF106285"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <Button x:Name="btn_2" Content="B" Height="55" Margin="236,98,0,0" VerticalAlignment="Top" Click="btn_2_Click" HorizontalAlignment="Left" Width="72" />
    <Button x:Name="btn_1" Content="A" Height="55" Margin="115,98,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="72" Click="btn_1_Click">
        <Button.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="#FFEAF0ED" Offset="0.9"/>
            </LinearGradientBrush>
        </Button.Background>
    </Button>
    <Button Content="Remove" HorizontalAlignment="Left" Margin="173,179,0,217" Width="75" Click="Button_Click" />
</Grid>

The design will be like below

public partial class animation : Window
        {
    Storyboard SB;
    public animation()
    {
        this.InitializeComponent();         
    }

    public void Animate(string name)
    {
        SB = (Storyboard)(FindResource("Animation"));
        Storyboard.SetTargetName(SB.Children[0], name);
        Storyboard.SetTargetName(SB.Children[1], name);
        Storyboard.SetTargetName(SB.Children[2], name);
        SB.Begin();            
    }
    private void btn_1_Click(object sender, RoutedEventArgs e)
    {
        Button Btn_1 = (Button)sender;
        Animate(btn_1.Name);
    }

    private void btn_2_Click(object sender, RoutedEventArgs e)
    {
        Button Btn_2 = (Button)sender;
        Animate(Btn_2.Name);
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        SB.Remove();
    }
}

It's output will be like below

The above result is after i clicked two buttons one by one.Then I clicked the remove button,only the button B animation is removed. But i want to remove button A and button B animation by clicking of remove button.

Answer 1

You can have only one TargetName at a Time assigned to the Storyboard. By using SetTargetName you are Transfering the Target to the new Button. Then when you click remove, you remove the last one you added. Take a look at this Blog its for SilverLight but should apply here. Your only other option would to be to use Style.Triggers and put your animation in the Style.

From above Link:

In this example, it might not be desirable to stop an animation on one rectangle so that the animation can start on another rectangle. Perhaps you want both animations to run at the same time. However, you cannot use the same animation object to run two separate animations at the same time, because there is only one TargetName. This does not mean that you are back to creating a separate Storyboard for every object. Instead, you need one Storyboard for each animation that you want to run concurrently (synchronously).