Use 1 storyboard on any button

I have created this storyboard:

<Window.Resources>
    <Storyboard x:Key="OnMouseEnter1">
        <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Btn" Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#FF323232"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

<Window.Triggers>
    <EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="Btn">
        <BeginStoryboard x:Name="OnMouseEnter1_BeginStoryboard" Storyboard="{StaticResource OnMouseEnter1}"/>
    </EventTrigger>
</Window.Triggers>

How can I use this storyboard on more than 1开发者_如何学运维 button not just "Btn"? What would I need to write in Storyboard.TargetName to accomplish this?

In situations like this, you would be best off creating or editing the buttons template, and add the storyboard to that. Then other buttons would reference that template and "inherit" the storyboard and all styling and functionality from the template.

In the example below, there are two buttons, each of which reference ButtonStyle1. Button Style 1 has a trigger which says to begin the MouseOver storyboard.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:StackOverflow"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna" mc:Ignorable="d"
    x:Class="MainWindow"
    x:Name="Window"
    Title="MainWindow"
    Width="640" Height="480">
    <Window.Resources>
        <Storyboard x:Key="OnSizeChanged1"/>
        <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="OnMouseEnter1" AutoReverse="True">
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="Chrome">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true" ThemeColor="Metallic" Height="48.277" Margin="0,0,-37,0" RenderTransformOrigin="0.5,0.5">
                            <Microsoft_Windows_Themes:ButtonChrome.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Microsoft_Windows_Themes:ButtonChrome.RenderTransform>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Microsoft_Windows_Themes:ButtonChrome>
                        <ControlTemplate.Triggers>
                            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                <BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" DataContext="{Binding}">
        <Button Content="Button" Margin="193.093,39,251.093,0" VerticalAlignment="Top" Style="{DynamicResource ButtonStyle1}"/>
        <Button Content="Button" Margin="0,39,85.093,0" VerticalAlignment="Top" Style="{DynamicResource ButtonStyle1}" HorizontalAlignment="Right" Width="115.907"/>
    </Grid>
</Window>