Практическое руководство. Указание режима FillBehavior для временной шкалы, достигшей конца периода активности

  • Статья

В этом примере показано, как указать FillBehavior неактивное Timeline анимированное свойство.

Пример

Свойство FillBehavior определяет Timeline , что происходит со значением анимированного свойства, когда оно не анимируется, то есть, когда Timeline он неактивен, но его родитель Timeline находится внутри его активного или удерживаемого периода. Например, анимированное свойство остается в конце после завершения анимации или отменить изменения обратно к значению, которое было до начала анимации?

В следующем примере используется анимация DoubleAnimationWidth двух прямоугольников. Каждый прямоугольник использует другой Timeline объект.

Имеет Timeline значение Stop, которое приводит к тому, что ширина прямоугольника отменить изменения обратно к неинимированному значению, когда Timeline заканчивается.FillBehavior Timeline Другой имеет значение FillBehaviorHoldEnd, которое приводит к тому, что ширина остается в конечном значении, когда заканчиваетсяTimeline.

<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>

Полный пример см. в разделе Коллекция примеров анимации.

См. также