Stilde animasyon ekleme

Bu örnekte, bir stil içindeki özelliklere animasyon ekleme gösterilmektedir. Bir stil içinde animasyon oluştururken, yalnızca stilin tanımlandığı çerçeve öğesi doğrudan hedeflenebilir. Dondurulabilir bir nesneyi hedeflemek için, stilli öğenin özelliğinden "nokta aşağı" getirmeniz gerekir.

Aşağıdaki örnekte, bir stil içinde çeşitli animasyonlar tanımlanır ve öğesine Buttonuygulanır. Kullanıcı fareyi düğmenin üzerine getirdiğinde, opaktan kısmen yarı saydama ve tekrar tekrar art arda kaybolur. Kullanıcı fareyi düğmenin dışına çıkardığında tamamen opak hale gelir. Düğmeye tıklandığında arka plan rengi turuncudan beyaza ve geri döner. Düğmeyi SolidColorBrush boyamak için kullanılan doğrudan hedeflenemediğinden, düğmenin özelliğinden aşağı doğru indirilerek bu düğmeye Background erişilir.

Örnek

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

Bir stil içinde animasyon oluştururken var olmayan nesneleri hedeflemenin mümkün olduğunu unutmayın. Örneğin, stilinizin bir Düğmenin arka plan özelliğini ayarlamak için bir SolidColorBrush kullandığını, ancak bir noktada stilin geçersiz kılınıp düğmenin arka planının ile LinearGradientBrushayarlandığını varsayalım. öğesine animasyon SolidColorBrush eklemeye çalışmak özel durum oluşturmaz; animasyon sessizce başarısız olur.

Görsel taslak hedefleme söz dizimi hakkında daha fazla bilgi için bkz . Görsel Taslaklara Genel Bakış. Animasyon hakkında daha fazla bilgi için bkz. Animasyona Genel Bakış. Stiller hakkında daha fazla bilgi için bkz . Stil oluşturma ve Şablon Oluşturma.