同一个窗口中不同的按钮控件使用同一个storyboard的方法（WPF）

  在<storyboard>标签中，有一个target name需要指定，在使用中，如果是同一个窗体里的不同按钮（背景风格不同）需要使用同一个storyboard，那么就会遇到target name

指定的问题，下面的方法是自己在工作中遇到类似问题的解决方案，希望能有所帮助。

解决思路：新建按钮模板，动态传入背景图片，在模板中加入<storyboard>，传入的就是一个模板中泛指的元素名。

style如下：

 <!--带有动画的按钮风格 背景图片的source通过按钮的dataContent传入-->
        <Style x:Key="StoryBtn" TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Border x:Name="border" BorderThickness=" 0" BorderBrush="Black">
                            <Grid x:Name="btngrid" Width="50" Height="20">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="20" MinWidth="16"/>
                                    <ColumnDefinition Width="30" MinWidth="25"/>
                                </Grid.ColumnDefinitions>
                                <Image Name="IMG" Source="{Binding}" Width="16" Height="16" HorizontalAlignment="Left"/>
                                <TextBlock x:Name="TXT" Grid.Column="1" Text="{TemplateBinding Content}" 
                                           HorizontalAlignment="Right" VerticalAlignment="Center"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!--鼠标移入移出-->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation To="18" Storyboard.TargetName="IMG" Storyboard.TargetProperty="(FrameworkElement.Width)"/>
                                            <DoubleAnimation To="18" Storyboard.TargetName="IMG" Storyboard.TargetProperty="(FrameworkElement.Height)"/>
                                            <DoubleAnimation To="13" Storyboard.TargetName="TXT" Storyboard.TargetProperty="(TextElement.FontSize)"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation To="16" Storyboard.TargetName="IMG" Storyboard.TargetProperty="(FrameworkElement.Width)"/>
                                            <DoubleAnimation To="16" Storyboard.TargetName="IMG" Storyboard.TargetProperty="(FrameworkElement.Height)"/>
                                            <DoubleAnimation To="12" Storyboard.TargetName="TXT" Storyboard.TargetProperty="(TextElement.FontSize)"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                                <Setter Property="FontWeight" Value="Bold" TargetName="TXT"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="BorderThickness" Value="0.1" TargetName="border"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

        </Style>

风格写好后，就是使用的问题了，使用方法如下：

 <StackPanel Orientation="Horizontal">
            <ToggleButton Content="全屏" Name="BtnFull" Foreground="#ff2c81cc" DataContext="images\full.png" 
                          Style="{DynamicResource StoryBtn}" Margin="5"/>
            <ToggleButton Content="四屏" Name="BtnFurth" Foreground="#ff2c81cc" DataContext="images\fourth.png" 
                          Style="{DynamicResource StoryBtn}"  Margin="10"/>
        </StackPanel>

运行效果如下：