Freigeben über


Gewusst wie: Animieren der Farbe oder der Durchlässigkeit von SolidColorBrush

In diesem Beispiel wird das Animieren von Color und Opacity für SolidColorBrush gezeigt.

Beispiel

Im folgenden Beispiel werden drei Animationen verwendet, um Color und Opacity für SolidColorBrush zu animieren.

  • Mit der ersten Animation, einer ColorAnimation, wird die Farbe des Pinsels in Gray geändert, wenn die Maus in das Rechteck eintritt.

  • Mit der nächsten Animation, einer anderen ColorAnimation, wird die Farbe des Pinsels in Orange geändert, wenn die Maus das Rechteck verlässt.

  • Mit der letzten Animation, einer DoubleAnimation, wird die Durchlässigkeit des Pinsels zu 0,0 geändert, wenn die linke Maustaste gedrückt wird.


Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Input

Namespace Microsoft.Samples.Animation
    ''' <summary>
    ''' This example shows how to animate the Opacity and Color 
    ''' properties of a SolidColorBrush.
    ''' </summary>
    Public Class SolidColorBrushExample
        Inherits Page

        Public Sub New()
            Title = "SolidColorBrush Animation Example"
            Background = Brushes.White

            ' Create a NameScope for the page so
            ' that Storyboards can be used.
            NameScope.SetNameScope(Me, New NameScope())

            ' Create a Rectangle.
            Dim aRectangle As New Rectangle()
            aRectangle.Width = 100
            aRectangle.Height = 100

            ' Create a SolidColorBrush to paint
            ' the rectangle's fill. The Opacity
            ' and Color properties of the brush
            ' will be animated.
            Dim myAnimatedBrush As New SolidColorBrush()
            myAnimatedBrush.Color = Colors.Orange
            aRectangle.Fill = myAnimatedBrush

            ' Register the brush's name with the page
            ' so that it can be targeted by storyboards.
            Me.RegisterName("MyAnimatedBrush", myAnimatedBrush)

            '
            ' Animate the brush's color to gray when
            ' the mouse enters the rectangle.
            '
            Dim mouseEnterColorAnimation As New ColorAnimation()
            mouseEnterColorAnimation.To = Colors.Gray
            mouseEnterColorAnimation.Duration = TimeSpan.FromSeconds(1)
            Storyboard.SetTargetName(mouseEnterColorAnimation, "MyAnimatedBrush")
            Storyboard.SetTargetProperty(mouseEnterColorAnimation, New PropertyPath(SolidColorBrush.ColorProperty))
            Dim mouseEnterStoryboard As New Storyboard()
            mouseEnterStoryboard.Children.Add(mouseEnterColorAnimation)
            AddHandler aRectangle.MouseEnter, Sub(sender As Object, e As MouseEventArgs) mouseEnterStoryboard.Begin(Me)

            '
            ' Animate the brush's color to orange when
            ' the mouse leaves the rectangle.
            '
            Dim mouseLeaveColorAnimation As New ColorAnimation()
            mouseLeaveColorAnimation.To = Colors.Orange
            mouseLeaveColorAnimation.Duration = TimeSpan.FromSeconds(1)
            Storyboard.SetTargetName(mouseLeaveColorAnimation, "MyAnimatedBrush")
            Storyboard.SetTargetProperty(mouseLeaveColorAnimation, New PropertyPath(SolidColorBrush.ColorProperty))
            Dim mouseLeaveStoryboard As New Storyboard()
            mouseLeaveStoryboard.Children.Add(mouseLeaveColorAnimation)
            AddHandler aRectangle.MouseLeave, Sub(sender As Object, e As MouseEventArgs) mouseLeaveStoryboard.Begin(Me)

            '
            ' Animate the brush's opacity to 0 and back when
            ' the left mouse button is pressed over the rectangle.
            '
            Dim opacityAnimation As New DoubleAnimation()
            opacityAnimation.To = 0.0
            opacityAnimation.Duration = TimeSpan.FromSeconds(0.5)
            opacityAnimation.AutoReverse = True
            Storyboard.SetTargetName(opacityAnimation, "MyAnimatedBrush")
            Storyboard.SetTargetProperty(opacityAnimation, New PropertyPath(SolidColorBrush.OpacityProperty))
            Dim mouseLeftButtonDownStoryboard As New Storyboard()
            mouseLeftButtonDownStoryboard.Children.Add(opacityAnimation)
            AddHandler aRectangle.MouseLeftButtonDown, Sub(sender As Object, e As MouseButtonEventArgs) mouseLeftButtonDownStoryboard.Begin(Me)

            Dim mainPanel As New StackPanel()
            mainPanel.Margin = New Thickness(20)
            mainPanel.Children.Add(aRectangle)
            Content = mainPanel
        End Sub

    End Class
End Namespace
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Input;

namespace Microsoft.Samples.Animation
{
    /// <summary>
    /// This example shows how to animate the Opacity and Color 
    /// properties of a SolidColorBrush.
    /// </summary>
    public class SolidColorBrushExample : Page
    {

        public SolidColorBrushExample()
        {
            Title = "SolidColorBrush Animation Example";
            Background = Brushes.White;

            // Create a NameScope for the page so
            // that Storyboards can be used.
            NameScope.SetNameScope(this, new NameScope());

            // Create a Rectangle.
            Rectangle aRectangle = new Rectangle();
            aRectangle.Width = 100;
            aRectangle.Height = 100;

            // Create a SolidColorBrush to paint
            // the rectangle's fill. The Opacity
            // and Color properties of the brush
            // will be animated.
            SolidColorBrush myAnimatedBrush = new SolidColorBrush();
            myAnimatedBrush.Color = Colors.Orange;
            aRectangle.Fill = myAnimatedBrush;

            // Register the brush's name with the page
            // so that it can be targeted by storyboards.
            this.RegisterName("MyAnimatedBrush", myAnimatedBrush);

            //
            // Animate the brush's color to gray when
            // the mouse enters the rectangle.
            //
            ColorAnimation mouseEnterColorAnimation = new ColorAnimation();
            mouseEnterColorAnimation.To = Colors.Gray;
            mouseEnterColorAnimation.Duration = TimeSpan.FromSeconds(1);
            Storyboard.SetTargetName(mouseEnterColorAnimation, "MyAnimatedBrush");
            Storyboard.SetTargetProperty(
                mouseEnterColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
            Storyboard mouseEnterStoryboard = new Storyboard();
            mouseEnterStoryboard.Children.Add(mouseEnterColorAnimation);
            aRectangle.MouseEnter += delegate(object sender, MouseEventArgs e)
            {
                mouseEnterStoryboard.Begin(this);
            };

            //
            // Animate the brush's color to orange when
            // the mouse leaves the rectangle.
            //
            ColorAnimation mouseLeaveColorAnimation = new ColorAnimation();
            mouseLeaveColorAnimation.To = Colors.Orange;
            mouseLeaveColorAnimation.Duration = TimeSpan.FromSeconds(1);
            Storyboard.SetTargetName(mouseLeaveColorAnimation, "MyAnimatedBrush");
            Storyboard.SetTargetProperty(
                mouseLeaveColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
            Storyboard mouseLeaveStoryboard = new Storyboard();
            mouseLeaveStoryboard.Children.Add(mouseLeaveColorAnimation);
            aRectangle.MouseLeave += delegate(object sender, MouseEventArgs e)
            {
                mouseLeaveStoryboard.Begin(this);
            };

            //
            // Animate the brush's opacity to 0 and back when
            // the left mouse button is pressed over the rectangle.
            //
            DoubleAnimation opacityAnimation = new DoubleAnimation();
            opacityAnimation.To = 0.0;
            opacityAnimation.Duration = TimeSpan.FromSeconds(0.5);
            opacityAnimation.AutoReverse = true;
            Storyboard.SetTargetName(opacityAnimation, "MyAnimatedBrush");
            Storyboard.SetTargetProperty(
                opacityAnimation, new PropertyPath(SolidColorBrush.OpacityProperty));
            Storyboard mouseLeftButtonDownStoryboard = new Storyboard();
            mouseLeftButtonDownStoryboard.Children.Add(opacityAnimation);
            aRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
            {
                mouseLeftButtonDownStoryboard.Begin(this);
            };

            StackPanel mainPanel = new StackPanel();
            mainPanel.Margin = new Thickness(20);
            mainPanel.Children.Add(aRectangle);
            Content = mainPanel;
        }

    }
}
<!-- SolidColorBrushExample.xaml
     This example shows how to animate the Opacity and Color 
     properties of a SolidColorBrush.-->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="SolidColorBrush Animation Example"
  Background="White">
  <StackPanel Margin="20">

    <!-- The Opacity and Color of the SolidColorBrush 
         used to fill this rectangle is animated. -->
    <Rectangle Width="100" Height="100">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" />
      </Rectangle.Fill>
      <Rectangle.Triggers>

        <!-- Animates the brush's color to gray
             When the mouse enters the rectangle. -->
        <EventTrigger RoutedEvent="Rectangle.MouseEnter">
          <BeginStoryboard>
            <Storyboard>
              <ColorAnimation
                Storyboard.TargetName="MyAnimatedBrush"
                Storyboard.TargetProperty="Color"
                To="Gray" Duration="0:0:1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>

        <!-- Animates the brush's color to orange
             when the mouse leaves the rectangle. -->
        <EventTrigger RoutedEvent="Rectangle.MouseLeave">
          <BeginStoryboard>
            <Storyboard>
              <ColorAnimation
                Storyboard.TargetName="MyAnimatedBrush"
                Storyboard.TargetProperty="Color"
                To="Orange" Duration="0:0:1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>    

        <!-- Animates the brush's opacity when the
             left mouse button is pressed over the rectangle. -->
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedBrush"
                Storyboard.TargetProperty="Opacity"
                To="0.0" Duration="0:0:0.5" AutoReverse="True" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>        
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

Ein ausführlicheres Beispiel, mit dem gezeigt wird, wie unterschiedliche Pinseltypen animiert werden, finden Sie unter Beispiel für Pinsel. Weitere Informationen zur Animation finden Sie unter Übersicht über Animationen.

Aus Gründen der Konsistenz mit anderen Animationsbeispielen wird in den Codeversionen dieses Beispiels ein Storyboard-Objekt zum Anwenden der Animationen verwendet. Beim Anwenden einer Animation im Code ist es jedoch einfacher, die BeginAnimation-Methode anstelle von Storyboard zu verwenden. Ein Beispiel finden Sie unter Gewusst wie: Animieren einer Eigenschaft ohne Storyboard.

Siehe auch

Konzepte

Übersicht über Animationen

Übersicht über Storyboards

Weitere Ressourcen

Beispiel für Pinsel