如何在View中实现Storyboard的复用

在使用微软的WPF技术来编写前端时，我们经常会使用故事板来让控件变化的时候更流畅。如果需要对一个故事板进行复用，我们除了可以使用代码来实现一个故事板复用以外，也可以使用ControlTemplate来实现故事板效果的复用。

比如下边的例子中，是一个只针对thisButton的按钮控件来修改透明度的故事板。

<Storyboard x:Key="thisButtonCollapsed">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="thisButton">
        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>
<Button Name="thisButton" >
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{StaticResource thisButtonCollapsed}" />
                </EventTrigger>
            </Button>

当我们另写一个button的时候，我们只能重新写一个与这个很相似的故事板。但如果我们提前自定义一个ControlTemplate，并且将该故事板放进去，就能实现复用了，比如我们先定义一个ControlTemplate。

<ControlTemplate x:Key="buttonOpacityStyle" TargetType="Button">
    <ControlTemplate.Resources>
        <Storyboard x:Key ="borderCollapsed">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Border">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </ControlTemplate.Resources>
    <Border Name="Border">
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"
                          Margin="{TemplateBinding Padding}"></ContentPresenter>
    </Border>
    <ControlTemplate.Triggers>
        <EventTrigger RoutedEvent="Click">
            <BeginStoryboard Storyboard="{StaticResource borderCollapsed}"></BeginStoryboard>
        </EventTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

然后，令按键按钮的Template等于该ControlTemplate，就可以实现该故事板动画的复用。

<Button Template="{StaticResource buttonOpacityStyle}" Content="多多交流"/>
<Button Template="{StaticResource buttonOpacityStyle}" Content="共同进步"/>