Windows apps
Collapse the table of content
Expand the table of content
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.

ColorAnimationUsingKeyFrames.KeyFrames Property

Gets or sets the collection of ColorKeyFrame objects that define the animation.

Namespace:  System.Windows.Media.Animation
Assembly:  PresentationCore (in PresentationCore.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation

'Declaration
Public Property KeyFrames As ColorKeyFrameCollection
	Get
	Set
<object>
  <ColorKeyFrameCollection .../>
</object>

Property Value

Type: System.Windows.Media.Animation.ColorKeyFrameCollection
The collection of ColorKeyFrame objects that define the animation. The default value is Empty.

This example shows how to animate the Color of a SolidColorBrush by using key frames.

The following example uses the ColorAnimationUsingKeyFrames class to animate the Color property of a SolidColorBrush. This animation uses three key frames in the following manner:

  1. During the first two seconds, uses an instance of the LinearColorKeyFrame class to gradually change the color from green to red. Linear key frames like LinearColorKeyFrame create a smooth linear transition between values.

  2. During the end of the next half second, uses an instance of the DiscreteColorKeyFrame class to quickly change the color from red to yellow. Discrete key frames like DiscreteColorKeyFrame create sudden changes between values, that is, the color change in this part of the animation occurs quickly and is not subtle.

  3. During the final two seconds, uses an instance of the SplineColorKeyFrame class to change the color again—this time from yellow back to green. Spline key frames like SplineColorKeyFrame create a variable transition between values according to the values of the KeySpline property. In this example, the change in color begins slowly and speeds up exponentially toward the end of the time segment.



Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Imports System.Windows.Media

Namespace Microsoft.Samples.KeyFrameExamples
	Public Class ColorAnimationUsingKeyFramesExample
		Inherits Page
		Public Sub New()
			Title = "BooleanAnimationUsingKeyFrames Example"
			Background = Brushes.White
			Margin = New Thickness(20)

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

			Dim myStackPanel As New StackPanel()
			myStackPanel.Orientation = Orientation.Vertical
			myStackPanel.HorizontalAlignment = HorizontalAlignment.Center

			' Create the Border that is the target of the animation.
			Dim animatedBrush As New SolidColorBrush()
			animatedBrush.Color = Color.FromArgb(255, 0, 255, 0)
			Dim myBorder As New Border()

			' Set the initial color of the border to green.
			myBorder.BorderBrush = animatedBrush
			myBorder.BorderThickness = New Thickness(28)
			myBorder.Padding = New Thickness(20)
			myStackPanel.Children.Add(myBorder)

			' Create a TextBlock to host inside the Border.
			Dim myTextBlock As New TextBlock()
			myTextBlock.Text = "This example shows how to use the ColorAnimationUsingKeyFrames" & " to create an animation on the BorderBrush property of a Border."
			myBorder.Child = myTextBlock

			' Assign the Brush a name so that
			' it can be targeted by a Storyboard.
			Me.RegisterName("AnimatedBrush", animatedBrush)

			' Create a ColorAnimationUsingKeyFrames to
			' animate the BorderBrush property of the Button.
			Dim colorAnimation As New ColorAnimationUsingKeyFrames()
			colorAnimation.Duration = TimeSpan.FromSeconds(6)

			' Create brushes to use as animation values.
			Dim redColor As New Color()
			redColor = Color.FromArgb(255, 255, 0, 0)
			Dim yellowColor As New Color()
			yellowColor = Color.FromArgb(255, 255, 255, 0)
			Dim greenColor As New Color()
			greenColor = Color.FromArgb(255, 0, 255, 0)

			' Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
			' a smooth, linear animation between values.
			colorAnimation.KeyFrames.Add(New LinearColorKeyFrame(redColor, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.0)))) ' KeyTime -  Target value (KeyValue)

			' In the next half second, go to yellow. DiscreteColorKeyFrame creates a 
			' sudden jump between values.
			colorAnimation.KeyFrames.Add(New DiscreteColorKeyFrame(yellowColor, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5)))) ' KeyTime -  Target value (KeyValue)

			' In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame 
			' creates a variable transition between values depending on the KeySpline property. In this example,
			' the animation starts off slow but toward the end of the time segment, it speeds up exponentially.
			colorAnimation.KeyFrames.Add(New SplineColorKeyFrame(greenColor, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)), New KeySpline(0.6, 0.0, 0.9, 0.0))) ' KeySpline -  KeyTime -  Target value (KeyValue)

			' Set the animation to repeat forever. 
			colorAnimation.RepeatBehavior = RepeatBehavior.Forever

			' Set the animation to target the Color property
			' of the object named "AnimatedBrush".
			Storyboard.SetTargetName(colorAnimation, "AnimatedBrush")
			Storyboard.SetTargetProperty(colorAnimation, New PropertyPath(SolidColorBrush.ColorProperty))

			' Create a storyboard to apply the animation.
			Dim myStoryboard As New Storyboard()
			myStoryboard.Children.Add(colorAnimation)

			' Start the storyboard when the Border loads.
			AddHandler myBorder.Loaded, Sub(sender As Object, e As RoutedEventArgs) myStoryboard.Begin(Me)

			Content = myStackPanel
		End Sub

	End Class
End Namespace



<Page  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="ThicknessAnimationUsingKeyFrames Example">

  <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
    <Border Background="#99FFFFFF"  BorderThickness="28"
    Margin="0,60,0,20" Padding="20" >
      <Border.BorderBrush>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Green" />
      </Border.BorderBrush>
      <Border.Triggers>
        <EventTrigger RoutedEvent="Border.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate from green to red using a linear key frame, from red to 
              yellow using a discrete key frame, and from yellow back to green with
              a spline key frame. This animation repeats forever. -->
              <ColorAnimationUsingKeyFrames
                Storyboard.TargetProperty="Color"
                Storyboard.TargetName="MyAnimatedBrush"
                Duration="0:0:6" FillBehavior="HoldEnd" RepeatBehavior="Forever">
                <ColorAnimationUsingKeyFrames.KeyFrames>

                  <!-- Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
                  a smooth, linear animation between values. -->
                  <LinearColorKeyFrame Value="Red" KeyTime="0:0:2" />

                  <!-- In the next half second, go to yellow. DiscreteColorKeyFrame creates a 
                  sudden jump between values. -->
                  <DiscreteColorKeyFrame Value="Yellow" KeyTime="0:0:2.5" />

                  <!-- In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame 
                  creates a variable transition between values depending on the KeySpline property. In this example,
                  the animation starts off slow but toward the end of the time segment, it speeds up exponentially.-->
                  <SplineColorKeyFrame Value="Green" KeyTime="0:0:4.5" KeySpline="0.6,0.0 0.9,0.00" />
                </ColorAnimationUsingKeyFrames.KeyFrames>
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Border.Triggers>

      <TextBlock>
        This example shows how to use the ColorAnimationUsingKeyFrames to create
        an animation on the BorderBrush property of a Border.
      </TextBlock>
    </Border>

  </StackPanel>
</Page>


For the complete sample, see KeyFrame Animation Sample.

.NET Framework

Supported in: 4, 3.5, 3.0

.NET Framework Client Profile

Supported in: 4, 3.5 SP1

Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

The .NET Framework does not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

Community Additions

Show:
© 2017 Microsoft