Nasıl yapılır: Bir Öğe veya Fırça Opaklığına Animasyon Ekleme

Çerçeve öğesinin görünümde belirmesini ve kaybolmasını sağlamak için, özelliğine Opacity animasyon ekleyebilir veya bunu boyamak için kullanılan (veya fırçaların) özelliğine Brush animasyon Opacity 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ümünün solmasına ve metnin tamamen soluk bırakılmasına neden olur.

Dekont

öğesinin animasyonunu Opacity oluşturmak, Brush bir öğenin özelliğine animasyon eklemeye Opacity göre performans avantajları sağlar.

Aşağıdaki örnekte, iki düğme animasyonludur, böylece görünümde kaybolup kaybolurlar. İlkinin Button Opaklığı, beş saniyeden fazla animasyonludur Duration1.00.0. İkinci düğme de animasyonludur, ancak bunu boyamak Background için kullanılan SolidColorBrush'ın Opaklığı, düğmenin tamamının opaklığı yerine animasyonludur. Örnek çalıştırıldığında, ilk düğme görünümde tamamen kaybolur ve kaybolurken, yalnızca ikinci düğmenin arka planı görünürde ve dışında 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, içindeki bir ColorLinearGradientBrushöğesinin opaklığına animasyon ekleme işlemini de gösterir. Tam örnek için bkz . Öğe Örneğinin Opaklığını Animasyonlaştırma.