Jak animovat ve stylu

Tento příklad ukazuje, jak animovat vlastnosti v rámci stylu. Při animaci v rámci stylu lze přímo cílit pouze na prvek rozhraní, pro který je styl definován. Chcete-li cílit na zmrazený objekt, musíte přejít od vlastnosti stylizovaného prvku.

V následujícím příkladu je ve stylu definováno několik animací, které jsou aplikovány na Button. Když uživatel přesune myš nad tlačítko, zmizí z neprůsvitné na částečně průsvitné a zpět, a to opakovaně. Když uživatel přesune myš mimo tlačítko, stane se zcela neprůhláhlý. Po kliknutí na tlačítko se barva pozadí změní z oranžové na bílou a zpět. Vzhledem k tomu, že SolidColorBrush použité pro nabarvení tlačítka nelze cílit přímo, je k němu přistupováno prostřednictvím vlastnosti Background tlačítka.

Příklad

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

Všimněte si, že při animaci ve stylu je možné cílit na objekty, které neexistují. Předpokládejme například, že váš styl používá SolidColorBrush k nastavení vlastnosti pozadí tlačítka, ale v určitém okamžiku se styl přepíše a pozadí tlačítka se nastaví pomocí LinearGradientBrush. Pokus o animaci SolidColorBrush nevyvolá výjimku; animace jednoduše selže tiše.

Další informace o syntaxi určení scénářů najdete v části Přehled scénářů. Další informace o animaci najdete v přehledu animací. Další informace o stylech naleznete v styly a šablonování.