Anvisningar: Animera opaciteten för ett element eller en pensel

Om du vill få ett ramverkselement att tona in och ut i vy, kan du animera dess egenskap Opacity eller animera egenskapen Opacity hos Brush (eller penslar) som används för att måla det. Att animera elementets opacitet gör att det och dess underordnade delvis framträder och försvinner ur sikte, men genom att animera penseln som används för att måla elementet kan du mer exakt välja vilken del av elementet som ska tonas bort. Du kan till exempel animera opaciteten för en pensel som används för att måla en knapps bakgrund. Detta skulle göra att knappens bakgrund tonas in och ut ur vyn, samtidigt som texten blir helt ogenomskinlig.

I följande exempel animerads två knappar så att de tonas in och ut ur vyn. Ogenomskinligheten för den första Button animerad från 1.0 till 0.0 under en Duration på fem sekunder. Den andra knappen är också animerad, men Opaciteten i SolidColorBrush som används för att måla dess Background är animerad snarare än opaciteten för hela knappen. När exemplet körs tonas den första knappen helt in och ut ur vyn, medan endast bakgrunden till den andra knappen tonas in och ut ur vyn. Texten och kantlinjen är fortfarande helt ogenomskinlig.

Exempel

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

Koden har utelämnats från det här exemplet. Det fullständiga exemplet visar också hur du animerar opaciteten för en Color inom en LinearGradientBrush. Det fullständiga exemplet finns i Animera opaciteten för ett elementexempel.