wpf storyboardについて

Question

点滅するボタンを作っています。色は、グラデーションで、マウスオーバー時と通常時では、色が異なります。
今のままだと、0からマウスオーバーのアニメーションが開始してしまうため、点滅がずれてしまいます。5時間調べたのですが、もうお手上げです。
ノーマルのアニメーションの終了位置から開始して、点滅のずれをなくす方法はないでしょうか。
以下、現在のコードです。

<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="False">
<Trigger.EnterActions>
<BeginStoryboard Name="AAA">
<Storyboard RepeatBehavior="Forever" AutoReverse="True" >
<ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To="#CCCCCC" Duration="0:0:0.5" />
<ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="#F0F0F0" Duration="0:0:0.5" />
<ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="#232323" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="AAA" />
</Trigger.ExitActions>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" TargetName="border" Value="{StaticResource Sample}" />
<Trigger.EnterActions>
<BeginStoryboard Name="BBB">
<Storyboard RepeatBehavior="Forever" AutoReverse="True">
<ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)" To="#CCCCCC" Duration="0:0:0.5" />
<ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FAFAFA" Duration="0:0:0.5" />
<ColorAnimation Storyboard.TargetProperty="Foreground.Color" To="#232323" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<StopStoryboard BeginStoryboardName="BBB" />
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Answer 1

色々試してみたけど簡単に実装するのは難しそうですね。

グレーの濃度変えるだけの処理みたいですし、Borderの上に透明のレイヤーを重ねてマウスオーバーでそのレイヤーに着色して濃くするとかで簡易対策しては？

ただ、色を途中で変化させるとそれだけで視覚的には「がくっ」と変化したように見えて違和感が残ります。

以下はアップされたソースコードそのままではないですが、マウスオーバーで点滅がほんの少しだけ暗くなるボタンのテンプレートです。

<ControlTemplate TargetType="Button">
    <Border Name="HoverButtonBorder" BorderThickness="2" BorderBrush="Blue" Background="#CCCCCC">
        <Grid>
            <Border Name="HoverOverlay" BorderThickness="0" Background="Gray" Opacity="0"/>
            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <EventTrigger RoutedEvent="Button.Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever" AutoReverse="True" >
                    <ColorAnimation Storyboard.TargetName="HoverButtonBorder" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#F0F0F0" Duration="0:0:0.5" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <Trigger Property="IsMouseOver" Value="false">
            <Trigger.Setters>
                <Setter TargetName="HoverOverlay" Property="Opacity" Value="0" />
            </Trigger.Setters>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="true">
            <Trigger.Setters>
                <Setter TargetName="HoverOverlay" Property="Opacity" Value="0.2" />
            </Trigger.Setters>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

見たら感じられると思いますが、色が変わる瞬間に違和感があると思います。
待機中も常に点滅していて、更にその点滅色を変えるのはデザイン上どうなのかなと思います。
やるにしてもアニメーションが一旦Completeした後にStoryboardを切り替えるとかやりたい気がしますね。

Answer 2

XAML だけで実現するのは難しいと思います。
まずは上記の XAML コードをコードビハインド上で組んでみてください。
その後、
ノーマルのアニメーションの終了位置での状態を次の開始点とするように、
挑戦してみてください。