Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

How to: Animate the Color or Opacity of a SolidColorBrush

This example shows how to animate the Color and Opacity of a SolidColorBrush.

The following example uses three animations to animate the Color and Opacity of a SolidColorBrush.

  • The first animation, a ColorAnimation, changes the brush's color to Gray when the mouse enters the rectangle.

  • The next animation, another ColorAnimation, changes the brush's color to Orange when the mouse leaves the rectangle.

  • The final animation, a DoubleAnimation, changes the brush's opacity to 0.0 when the left mouse button is pressed.


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
<!-- SolidColorBrushExample.xaml
     This example shows how to animate the Opacity and Color 
     properties of a SolidColorBrush.-->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://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>

For a more complete sample, which shows how to animate different types of brushes, see the Brushes Sample. For more information about animation, see the Animation Overview.

For consistency with other animation examples, the code versions of this example use a Storyboard object to apply their animations. However, when applying a single animation in code, it's simpler to use the BeginAnimation method instead of using a Storyboard. For an example, see How to: Animate a Property Without Using a Storyboard.

Show:
© 2014 Microsoft