その４８：ControlStoryboardActionでMouseEnterをTriggerにしたときにアニメーションが完結する前に再度走らなくする方法

１つのStoryboardを重複させるのは無理だけど、こんなオーダーを見かけたのでやってみた。

@okazuki MouseEnterをトリガーにストーリーボード開始させるやるかただと連続で発生したときに前のアニメーションリセットされちゃうので、連続して発生したときにはアニメーションが重複してくれるとうれしいんですが、XAMLだけだと無理ですかね…？

— cafemoca (@yuri_v3v) 2016, 2月 24

MouseEnterでRectangleが大きくなるStoryboard1
これをMouseEnterのたびじゃなくて、終了まできちんと待つようにする方法

XAMLの構成はこんなかんじ。

次にControlStoryboardAction
普通にMouseEnterで再生するのに加えて、条件式を設定する。
上のValueにはBinding式を設定<-ここがぽいんと

{Binding Tag, ElementName=rectangle}

下には文字列でTrueと記述（まぁ実際はなんでもいいんやけど。

次にChangePropertyActionに移って、TriggerをCompletedStoryboardActionに設定。
Triggerの変更はTriggerTypeの右のNewを押せばOK
Storyboard1が終わったら、rectangleのTagをTrueにするように設定。

で、rectangleのTagの初期値はTrueにしておく。

最後にStoryboardの中でrectangleのTagをFalseにしておけば完成。

これで、Storyboardが再生中はTagがFalseに。再生完了時と初期値はTrueになるXAMLができて、ControlStoryboardActionはTagがTrueの時しか再生しようとしないので、Storyboardの途中で再度再生しようとすることがなくなる仕組みですね。

一応XAML全文がこちら

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="WpfApplication1.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="Storyboard1">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="2.828">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="2.828">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="81.936">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="61.665">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Tag)" Storyboard.TargetName="rectangle">
                <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="True"/>
            </ObjectAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Grid>
        <Rectangle x:Name="rectangle" Fill="#FFF4F4F5" Height="67.463" Margin="196.289,88.785,231.071,0" Stroke="Black" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Tag="True">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseEnter">
                    <i:Interaction.Behaviors>
                        <ei:ConditionBehavior>
                            <ei:ConditionalExpression>
                                <ei:ComparisonCondition LeftOperand="{Binding Tag, ElementName=rectangle}" RightOperand="True"/>
                            </ei:ConditionalExpression>
                        </ei:ConditionBehavior>
                    </i:Interaction.Behaviors>
                    <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
                </i:EventTrigger>
                <ei:StoryboardCompletedTrigger Storyboard="{StaticResource Storyboard1}">
                    <ei:ChangePropertyAction TargetName="rectangle" PropertyName="Tag" Value="True"/>
                </ei:StoryboardCompletedTrigger>
            </i:Interaction.Triggers>
        </Rectangle>

    </Grid>
</Window>