Cara membuat animasi dengan gaya

Contoh ini menunjukkan cara menganimasi properti di dalam sebuah gaya. Saat menganimasikan dalam gaya (style), hanya elemen framework di mana gaya (style) ditentukan yang dapat ditargetkan secara langsung. Untuk menargetkan objek yang dapat dibekukan, Anda harus menelusuri properti pada elemen bergaya.

Dalam contoh berikut, beberapa animasi ditentukan dalam sebuah gaya dan diterapkan ke Button. Ketika pengguna menggerakkan mouse di atas tombol, tombol memudar dari buram menjadi sebagian tembus dan kembali lagi, berulang kali. Ketika pengguna memindahkan mouse dari tombol , itu menjadi benar-benar buram. Ketika tombol diklik, warna latar belakangnya berubah dari oranye menjadi putih dan kembali lagi. Karena SolidColorBrush yang digunakan untuk melukis tombol tidak dapat ditargetkan secara langsung, tombol tersebut diakses dengan menelusuri dari properti Background tombol.

Contoh

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

Perhatikan bahwa saat membuat animasi dalam sebuah gaya, dimungkinkan untuk menargetkan objek yang tidak ada. Misalnya, gaya Anda menggunakan SolidColorBrush untuk mengatur properti latar belakang tombol, tetapi pada titik tertentu gaya tersebut ditimpa dan latar belakang tombol diatur dengan LinearGradientBrush. Mencoba menganimasikan SolidColorBrush tidak akan melemparkan pengecualian; animasi hanya akan gagal tanpa pemberitahuan.

Untuk informasi selengkapnya tentang sintaks penargetan storyboard, lihat ikhtisar Storyboards. Untuk informasi selengkapnya tentang animasi, lihat gambaran umum animasi . Untuk informasi selengkapnya tentang gaya, lihat Gaya dan Templat.