Dela via

Anvisningar: Ange FillBehavior för en tidslinje som har nått slutet av den aktiva perioden

Det här exemplet visar hur du anger FillBehavior för den inaktiva Timeline för en animerad egenskap.

Exempel

Egenskapen FillBehavior för en Timeline avgör vad som händer med värdet för en animerad egenskap när den inte animeras, det vill säga när Timeline är inaktiv men dess överordnade Timeline är inom dess aktiva eller hållperiod. Finns till exempel en animerad egenskap kvar vid dess slutvärde när animeringen har upphört eller återgår den till det värde den hade innan animeringen startade?

I följande exempel används en DoubleAnimation för att animera Width hos två rektanglar. Varje rektangel använder ett annat Timeline objekt.

En Timeline har en FillBehavior som är inställd på Stop, vilket gör att rektangelns bredd återställs till sitt icke-animerade värde när Timeline slutar. Den andra Timeline har en FillBehavior av HoldEnd, vilket gör att bredden förblir på sitt slutvärde när Timeline slutar.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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>

Det fullständiga exemplet finns i Exempelgalleri för animering.

Se även