Nasıl yapılır: Bir Öğenin veya Fırçanın Opaklığına Animasyon Ekleme

Bir çerçeve öğesinin görünümde belirmesini ve kaybolmasını sağlamak için, Opacity özelliğine animasyon ekleyebilir veya onu boyamak için kullanılan Brush (veya fırçaların) Opacity özelliğine animasyon uygulayabilirsiniz. Öğenin opaklığının animasyonu, öğenin ve alt öğelerinin görünümde belirmesini ve kaybolmasını sağlar, ancak öğeyi boyamak için kullanılan fırçanın animasyonu, öğenin hangi bölümünün solacağı konusunda daha seçici olmanıza olanak tanır. Örneğin, düğmenin arka planını boyamak için kullanılan fırçanın opaklığına animasyon uygulayabilirsiniz. Bu, düğmenin arka planının görünür hale gelip kaybolmasına neden olurken, metin tamamen opak olarak kalır.

Not

Bir Brush üzerindeki Opacity animasyonu, bir öğenin Opacity özelliğini animasyonla değiştirmeye göre performans avantajları sağlar.

Aşağıdaki örnekte, iki düğme animasyonludur; bu sayede görünür hale gelir ve görünmez olurlar. İlk Button opaklığı, 1.0'den 0.0'ye beş saniye boyunca bir Duration ile animasyon edilir. İkinci düğme de animasyonludur, ancak düğmenin Background bölümünü boyamak için kullanılan SolidColorBrush'ın saydamlığı, tüm düğmenin opaklığı yerine animasyonludur. Örnek çalıştırıldığında, ilk düğme tamamen görünür hale gelir ve kaybolur, ikinci düğmenin ise yalnızca arka planı bu şekilde görünür hale gelip kaybolur. Metni ve kenarlığı tamamen opak kalır.

Örnek

<!-- OpacityAnimationExample.xaml
     This example shows how to animate the opacity of objects, 
     making them fade in and out of view. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Opacity Animation Example" Background="White">
  <StackPanel Margin="20">

    <!-- Clicking this button animates its opacity. -->
    <Button Name="opacityAnimatedButton">
      A Button
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="opacityAnimatedButton"
                Storyboard.TargetProperty="(Button.Opacity)" 
                From="1" To="0" Duration="0:0:5" AutoReverse="True"  /> 
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

    <!-- Clicking this button animates the opacity of the brush
         used to paint its background. -->
    <Button>
      A Button
      <Button.Background>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" />
      </Button.Background>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="MyAnimatedBrush"
                Storyboard.TargetProperty="(Brush.Opacity)" 
                From="1" To="0" Duration="0:0:5" AutoReverse="True"  />  
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>         
    </Button>
  </StackPanel>
</Page>

Bu örnekte kod atlanmıştır. Tam örnek, bir LinearGradientBrushiçindeki bir Color'ın opaklığını animasyonla nasıl değiştirebileceğinizi de gösterir. Tam örnek için bkz. Bir Ögenin Opaklığını Animasyonla Değiştirme Örneği.