方法 : アクティブな期間の末尾に到達したタイムラインの FillBehavior を指定する

[アーティクル]
08/09/2011

この例では、アニメーション化されたプロパティのアクティブでない Timeline に対して FillBehavior を指定する方法を示します。

使用例

Timeline の FillBehavior プロパティは、アニメーション化されたプロパティがアニメーション化されていない場合、つまり Timeline はアクティブではないが、その親 Timeline はアクティブ期間または保留期間内にある場合に、そのプロパティの値の処理方法を決定します。たとえば、アニメーション化されたプロパティが、アニメーションの終了後に、終了値の状態を維持するのか、アニメーションが開始される前の値に戻るのかを決定します。

DoubleAnimation を使用して、2 つの四角形の Width をアニメーション化する例を次に示します。各四角形には、それぞれ別の Timeline オブジェクトを使用します。

一方の Timeline では、FillBehavior が Stop に設定されているため、Timeline が終了すると、四角形の幅はアニメーション化される前の値に戻ります。もう一方の Timeline では、FillBehavior が HoldEnd に設定されているため、Timeline が終了すると、幅は終了値の状態を維持します。

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <StackPanel Margin="20">
    <Border Background="#99FFFFFF">
      <TextBlock Margin="20">
              This example shows how the FillBehavior property determines how an animation behaves
              after it reaches the end of its duration.
      </TextBlock>
    </Border>

    <TextBlock>FillBehavior="Deactivate"</TextBlock>
    <Rectangle Name="deactiveAnimationRectangle" Width="20" Height="20" Fill="#AA3333FF" HorizontalAlignment="Left" >
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- The animated rectangle's width reverts back to its non-animated value
                   after the animation ends. -->
              <DoubleAnimation 
                Storyboard.TargetName="deactiveAnimationRectangle" 
                Storyboard.TargetProperty="Width" 
                From="100" To="400" Duration="0:0:2" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>

    <TextBlock Margin="0,20,0,0">FillBehavior="HoldEnd" </TextBlock>
    <Rectangle Name="holdEndAnimationRectangle" Width="20" Height="20" Fill="#AA3333FF" HorizontalAlignment="Left" >
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- The animated rectangle's width remains at its end value after the 
                   animation ends. -->
              <DoubleAnimation Storyboard.TargetName="holdEndAnimationRectangle" 
                Storyboard.TargetProperty="Width"  
                From="100" To="400" Duration="0:0:2" FillBehavior="HoldEnd" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

サンプル全体については、アニメーションサンプルギャラリーを参照してください。