Bir stille animasyon ekleme

Bu örnek, bir stil içindeki özelliklerin nasıl hareketlendirileceğini gösterir. Bir stil içinde animasyon eklerken, yalnızca stilin tanımlandığı Framework öğesi doğrudan hedeflenebilir. Freezable nesnesini hedeflemek için, stilli bir öğenin özelliğinden "nokta aşağı" yazmanız gerekir.

Aşağıdaki örnekte, bir stil içinde birkaç animasyon tanımlanmıştır ve öğesine uygulanır Button . Kullanıcı fareyi düğmenin üzerine taşıdığında, opak ve kısmen yarı saydam, tekrar tekrar tekrar tekrar olur. Kullanıcı fareyi düğme dışına taşıdıkça tamamen opak hale gelir. Düğmeye tıklandığında, arka plan rengi turuncu 'dan beyaza ve yeniden geri değişir. SolidColorBrushDüğmeyi boyamak için kullanılan, doğrudan hedeflenmediği için düğmenin özelliğinden aşağı doğru biçimlendirme tarafından erişilir Background .

Ö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 uyguladığınızda, mevcut olmayan nesneleri hedeflemek mümkün olduğunu unutmayın. Örneğin, bir SolidColorBrush düğmenin arkaplan özelliğini ayarlamak için stilinizin bir kullandığını varsayalım, ancak bir noktada stil geçersiz kılınır ve düğmenin arka planı bir ile ayarlanır LinearGradientBrush . Animasyon kaldırılmaya çalışılması SolidColorBrush bir özel durum oluşturmaz; animasyon sessizce başarısız olur.

Görsel taslak hedefleme sözdizimi 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 ve şablonoluşturma.