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

Aktualisiert: November 2007

Um ein Frameworkelement ein- und auszublenden, können Sie seine Opacity-Eigenschaft animieren. Oder Sie animieren die Opacity-Eigenschaft des zum Zeichnen des Elements verwendeten Brush (oder der Pinsel). Indem Sie die Durchlässigkeit des Elements animieren, blenden Sie das Element und die zugehörigen untergeordneten Elemente ein und aus. Wenn Sie jedoch den zum Zeichnen des Elements verwendeten Pinsel animieren, haben Sie die Möglichkeit, detailliert festzulegen, welche Teile des Elements ein- und ausgeblendet werden sollen. Sie können z. B. die Durchlässigkeit des Pinsels animieren, der zum Zeichnen des Hintergrunds einer Schaltfläche verwendet wird. Dadurch wird der Hintergrund der Schaltfläche ein- und ausgeblendet, während die Deckkraft des Text voll erhalten bleibt.

Im folgenden Beispiel werden zwei Schaltflächen animiert, um sie ein- und auszublenden. Die Durchlässigkeit der ersten Button wird über eine Duration von fünf Sekunden von 1.0 auf 0.0 geändert. Die zweite Schaltfläche wird ebenfalls animiert, in diesem Fall wird jedoch die Durchlässigkeit des Pinsels geändert, mit dem der Background gezeichnet wird. Bei Ausführung des Beispiels sehen Sie, dass die erste Schaltfläche vollständig ein- und ausgeblendet wird, während bei der zweiten Schaltfläche nur der Hintergrund ein- und ausgeblendet wird. Text und Rahmen bleiben vollständig sichtbar.

Beispiel

<!-- OpacityAnimationExample.xaml
     This example shows how to animate the opacity of objects, 
     making them fade in and out of view. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

Der Code wurde in diesem Beispiel weggelassen. Das vollständige Beispiel zeigt außerdem, wie die Durchlässigkeit einer Color in einem LinearGradientBrush animiert wird. Das vollständige Beispiel finden Sie unter Beispiel für das Animieren von Opacity eines Elements.