方法 : スタイル内でアニメーション化を行う

更新 : 2007 年 11 月

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

次の例では、複数のアニメーションをスタイル内で定義し、Button に適用します。ユーザーがマウスをボタン上に移動すると、そのボタンは、不透明から部分的に透明へフェードし、また元に戻るという動作を繰り返します。ユーザーがマウスをボタンから離すと、すべて不透明になります。ボタンをクリックすると、その背景色がオレンジから白に変わり、また元に戻ります。ボタンの描画に使用する SolidColorBrush は直接ターゲットにできないため、ボタンの Background プロパティからのドット ダウンによってアクセスします。

使用例

<!-- StyleStoryboardsExample.xaml
     This example shows how to create storyboards in a style. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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 を使用してボタンの Background プロパティを設定すると、ある時点で、そのスタイルはオーバーライドされ、ボタンの背景は LinearGradientBrush で設定されます。SolidColorBrush をアニメーション化しようとしても例外をスローすることはなく、アニメーション化は、単に通知なしに失敗します。

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