スタイルでアニメーション化する方法

この例では、スタイル内のプロパティをアニメーション化する方法を示します。 スタイル内でアニメーション化する場合、スタイルが定義されているフレームワーク要素のみを直接対象にすることができます。 Freezable オブジェクトをターゲットにするには、スタイルが設定されている要素のプロパティから "ドット ダウン" する必要があります。

次の例では、いくつかのアニメーションがスタイル内で定義され、Buttonに適用されます。 ユーザーがボタンの上にマウスを移動すると、不透明から部分的に半透明に変化し、繰り返し変化します。 ユーザーがマウスをボタンから離すと、完全に不透明になります。 ボタンをクリックすると、背景色がオレンジ色から白に変わり、もう一度戻ります。 ボタンの描画に使用される SolidColorBrush を直接ターゲットにすることはできないため、ボタンの Background プロパティからドット ダウンしてアクセスします。

例

<!-- StyleStoryboardsExample.xaml
     This example shows how to create storyboards in a style. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Storyboards in Styles Example" Background="White">
  <Page.Resources>
  
    <!-- Defines a Button style. -->
    <Style TargetType="{x:Type Button}" x:Key="MyButtonStyle">
      <Setter Property="Button.Background">
        <Setter.Value>
          <SolidColorBrush Color="Orange" />
        </Setter.Value>
      </Setter>
      <Style.Triggers>
      
        <!-- Animates the button's opacity on mouse over. -->
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Opacity)"
                  From="1.0" To="0.5" Duration="0:0:0.5" AutoReverse="True"
                  RepeatBehavior="Forever" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>  
        
        <!-- Returns the button's opacity to 1 when the mouse leaves. -->
        <EventTrigger RoutedEvent="Button.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation
                  Storyboard.TargetProperty="(Button.Opacity)"
                  To="1" Duration="0:0:0.1" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>   
        
        <!-- Changes the button's color when clicked. 
             Notice that the animation can't target the
             SolidColorBrush used to paint the button's background
             directly. The brush must be accessed through the button's
             Background property. -->
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                  From="Orange" To="White" Duration="0:0:0.1" AutoReverse="True" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>  
      </Style.Triggers>
    </Style>
  </Page.Resources>
  
  <StackPanel Margin="20">
    <Button Style="{StaticResource MyButtonStyle}">Click Me</Button>
  </StackPanel>
</Page>

スタイル内でアニメーション化する場合は、存在しないオブジェクトをターゲットにできます。 たとえば、スタイルで SolidColorBrush を使用して Button の背景プロパティを設定したが、ある時点でスタイルがオーバーライドされ、ボタンの背景が LinearGradientBrushで設定されるとします。 SolidColorBrush をアニメーション化しても例外はスローされません。アニメーションは、単に警告なしで失敗します。

ストーリーボードのターゲット構文の詳細については、「ストーリーボードの概要」を参照してください。 アニメーションの詳細については、「アニメーションの概要」を参照してください。 スタイルについての詳細は、「スタイルとテンプレート」を参照してください。