Vorgehensweise: Animieren der Deckkraft eines Elements oder Pinsels

Um ein Frameworkelement ein- und auszublenden, können Sie dessen Opacity-Eigenschaft animieren oder die Opacity-Eigenschaft der Brush (oder Bürsten) animieren, die zum Zeichnen verwendet werden. Durch das Animieren der Deckkraft des Elements werden sie und die untergeordneten Elemente eingeblendet und nicht sichtbar, aber das Animieren des Pinsels, der zum Zeichnen des Elements verwendet wird, ermöglicht es Ihnen, selektiver zu sein, welcher Teil des Elements ausgeblendet wird. Sie können beispielsweise die Deckkraft eines Pinsels animieren, der zum Zeichnen des Hintergrunds einer Schaltfläche verwendet wird. Dies würde dazu führen, dass der Hintergrund der Schaltfläche ein- und ausgeblendet wird, während der Text vollständig undurchsichtig bleibt.

Im folgenden Beispiel werden zwei Schaltflächen animiert, sodass sie ein- und ausgeblendet werden. Die Deckkraft des ersten Button wird von 1.0 zu 0.0 über einen Zeitraum von fünf Sekunden animiert. Die zweite Schaltfläche ist auch animiert, aber die Deckkraft des SolidColorBrush, der zum Zeichnen Background verwendet wird, ist animiert und nicht die Deckkraft der gesamten Schaltfläche. Wenn das Beispiel ausgeführt wird, wird die erste Schaltfläche vollständig ein- und ausgeblendet, während nur der Hintergrund der zweiten Schaltfläche ein- und ausgeblendet wird. Der Text und der Rahmen bleiben vollständig undurchsichtig.

Beispiel

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

Code wurde aus diesem Beispiel weggelassen. Das vollständige Beispiel zeigt auch, wie die Deckkraft eines Color innerhalb eines LinearGradientBrush animiert wird. Das vollständige Beispiel finden Sie im Animieren der Deckkraft eines Elementbeispiels.