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

  • [アーティクル]

この例では、スタイル内でプロパティをアニメーション化する方法を示します。 スタイル内でアニメーション化する場合、スタイルが定義されているフレームワーク要素のみを直接ターゲットにできます。 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 を使用してボタンの背景プロパティを設定していたが、ある時点でそのスタイルがオーバーライドされて、LinearGradientBrush を使用してボタンの背景が設定されたとします。 SolidColorBrush をアニメーション化しても例外はスローされません。アニメーションは、単に警告なしで失敗します。

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