Jak animować w stylu

W tym przykładzie pokazano, jak animować właściwości w stylu. Podczas animowania w stylu tylko element struktury, dla którego zdefiniowany jest styl, może być skierowany bezpośrednio. Aby kierować obiekt do zamarzania, musisz "kropka w dół" z właściwości stylu elementu.

W poniższym przykładzie kilka animacji jest zdefiniowanych w stylu i zastosowanych do elementu Button. Gdy użytkownik przenosi wskaźnik myszy nad przyciskiem, wielokrotnie zanika z nieprzezroczystego do częściowo przezroczystego i z powrotem. Gdy użytkownik przesuwa wskaźnik myszy z przycisku, staje się całkowicie nieprzezroczysty. Po kliknięciu przycisku jego kolor tła zmienia się z pomarańczowego na biały i z powrotem. SolidColorBrush Ponieważ nie można bezpośrednio zastosować przycisku do malowania, można uzyskać do niego dostęp przez kropkowanie w dół od właściwości przyciskuBackground.

Przykład

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

Należy pamiętać, że w przypadku animowania w stylu można kierować obiekty docelowe, które nie istnieją. Załóżmy na przykład, że styl używa elementu , SolidColorBrush aby ustawić właściwość tła przycisku, ale w pewnym momencie styl jest zastępowany, a tło przycisku jest ustawione na LinearGradientBrush. Próba animowania nie SolidColorBrush zgłosi wyjątku; animacja po prostu nie powiedzie się w trybie dyskretnym.

Aby uzyskać więcej informacji na temat składni określania wartości docelowej scenorysu, zobacz Storyboards Overview (Omówienie scenorysów). Aby uzyskać więcej informacji na temat animacji, zobacz Omówienie animacji. Aby uzyskać więcej informacji na temat stylów, zobacz Styling and Templating (Styling and Templating).