Export (0) Print
Expand All

ColorAnimation.From Property

Gets or sets the animation's starting value.

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

public Nullable<Color> From { get; set; }
<object>  <object.From>    <Color />  </object.From></object>
<object From="Color"/>- or -<object From="{x:Null Markup Extension}"/>

Property Value

Type: System.Nullable<Color>
The starting value of the animation. The default value is null.

Identifier field

FromProperty

Metadata properties set to true

None

The following table summarizes how the From, To, and By properties may be used together or separately to determine an animation's target values.

Properties Specified

Resulting Behavior

From

The animation progresses from the value specified by the From property to the base value of the property being animated or to a previous animation's output value, depending on how the previous animation is configured.

From and To

The animation progresses from the value specified by the From property to the value specified by the To property.

From and By

The animation progresses from the value specified by the From property to the value specified by the sum of the From and By properties.

To

The animation progresses from the animated property's base value or a previous animation's output value to the value specified by the To property.

By

The animation progresses from the base value of the property being animated or a previous animation's output value to the sum of that value and the value specified by the By property.

Note   If you set both the To and By properties, the To property takes precedence and the By property is ignored.

To use other interpolation methods or animate between more than two target values, use a ColorAnimationUsingKeyFrames object.

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.

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="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.

More Code

How to: Control an Animation using From, To, and ByA "From/To/By" or "basic animation" creates a transition between two target values (see Animation Overview for an introduction to different types of animations). To set the target values of a basic animation, use its From, To, and By properties. The following table summarizes how the From, To, and By properties may be used together or separately to determine an animation's target values.

.NET Framework

Supported in: 4.5.2, 4.5.1, 4.5, 4, 3.5, 3.0

.NET Framework Client Profile

Supported in: 4, 3.5 SP1

Windows 8.1, Windows Server 2012 R2, Windows 8, Windows Server 2012, Windows 7, Windows Vista SP2, Windows Server 2008 (Server Core Role not supported), Windows Server 2008 R2 (Server Core Role supported with SP1 or later; Itanium not supported)

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

Show:
© 2014 Microsoft