Gewusst wie: Animieren der Durchlässigkeit eines Elements oder eines Pinsels

Damit ein Framework-Element ein- und ausgeblendet wird, können Sie seine Opacity-Eigenschaft animieren oder die Opacity-Eigenschaft des Brush animieren, der zum Zeichnen verwendet wird. Wenn Sie die Deckkraft des Elements animieren, werden das Element und die untergeordneten Elemente ein- und ausgeblendet. Durch das Animieren des Pinsels, der zum Zeichnen des Elements verwendet wird, können Sie allerdings besser auswählen, welcher Teil des Elements eingeblendet 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 in der Ansicht ein- und ausgeblendet wird, während der Text vollständig undurchsichtig bleibt.

Hinweis

Das Animieren der Opacity eines Brush bietet Leistungsvorteile im Vergleich zum Animieren der Opacity-Eigenschaft eines Elements.

Im folgenden Beispiel werden zwei Schaltflächen animiert, sodass sie in der Ansicht ein- und ausgeblendet werden. Die Deckkraft des ersten Button wird von 1.0 bis 0.0 über eine Duration von fünf Sekunden animiert. Die zweite Schaltfläche ist auch animiert, aber die Deckkraft des SolidColorBrush, der zum Zeichnen von 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 in der Ansicht 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. Im vollständigen Beispiel wird auch gezeigt, wie die Deckkraft einer Color innerhalb eines LinearGradientBrush animiert wird. Das vollständige Beispiel finden Sie unter Animieren der Deckkraft eines Elementbeispiels.