Cara menganimasikan dalam gaya

Contoh ini menunjukkan cara menganimasikan properti dalam gaya. Saat menganimasikan dalam gaya, hanya elemen kerangka kerja yang gayanya ditentukan yang dapat ditargetkan secara langsung. Untuk menargetkan objek yang dapat di-freezable, Anda harus "turun titik" dari properti elemen bergaya.

Dalam contoh berikut, beberapa animasi didefinisikan dalam gaya dan diterapkan ke Button. Ketika pengguna menggerakkan mouse di atas tombol, mouse memudar dari buram ke 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 digunakan SolidColorBrush untuk melukis tombol tidak dapat ditargetkan secara langsung, tombol diakses dengan titik-titik dari properti tombol Background .

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 menganimasikan dalam gaya, dimungkinkan untuk menargetkan objek yang tidak ada. Misalnya, gaya Anda menggunakan SolidColorBrush untuk mengatur properti latar belakang Tombol, tetapi pada titik tertentu gaya ditimpa dan latar belakang tombol diatur dengan LinearGradientBrush. Mencoba untuk menganimasikan SolidColorBrush tidak akan melemparkan pengecualian; animasi hanya akan gagal diam-diam.

Untuk informasi selengkapnya tentang sintaks penargetan papan cerita, lihat Ringkasan Papan Cerita. Untuk informasi selengkapnya tentang animasi, lihat Gambaran Umum Animasi. Untuk informasi selengkapnya tentang gaya, lihat Gaya dan Templat.