VisualTransition.GeneratedEasingFunction Property


The .NET API Reference documentation has a new home. Visit the .NET API Browser on to see the new experience.

Gets or sets a custom mathematical formula that is used to transition between states.

Namespace:   System.Windows
Assembly:  PresentationFramework (in PresentationFramework.dll)

public IEasingFunction GeneratedEasingFunction { get; set; }

Property Value

Type: System.Windows.Media.Animation.IEasingFunction

A custom mathematical formula that is used to transition between states.

You can set the GeneratedEasingFunction property to specify the way a transition occurs. For example, you can specify an easing function to accelerate or decelerate the transition. For more information, see Easing Functions.

The following example creates a VisualTransition that causes a Rectangle to move vertically when the user presses the mouse button over the Canvas. The example sets the GeneratedEasingFunction property to a BounceEase object to cause the Rectangle to appear to bounce when it reaches its destination. The VisualTransition that is used when the user releases the button has another BounceEase object to cause the Rectangle to bounce before it returns to its original position.

<Canvas Name="canvasRoot" Background="Tan" Width="100" Height="250"
        MouseDown="Canvas_MouseEvent" MouseUp="Canvas_MouseEvent">

    <VisualStateGroup Name="CanvasStates">
      <VisualState Name="CanvasButtonUp" />
      <VisualState Name="CanvasButtonDown">
          <!--The VisualTransition is responsible for animating the
              Rectangle falling. This DoubleAnitmation specifies where
              the Rectangle is when the animation completes.-->
          <DoubleAnimation To="200" 
        <VisualTransition To="CanvasButtonUp" GeneratedDuration="00:00:01">
            <BounceEase Bounces="4" EasingMode="EaseIn" Bounciness="2"/>
        <VisualTransition To="CanvasButtonDown" GeneratedDuration="00:00:01">
            <BounceEase Bounces="3" EasingMode="EaseOut" Bounciness="2"/>


  <Rectangle Name="myRectangle"  
             Canvas.Top="30" Canvas.Left="30"
             Fill="Blue" Width="30" Height="30"/>

The following example shows the event handler for the MouseDown and MouseUp events. The example calls the GoToElementState method to change the VisualState of the canvas.

bool isMouseDown;

private void Canvas_MouseEvent(object sender, MouseEventArgs e)
    isMouseDown = !isMouseDown;

    if (isMouseDown)
        VisualStateManager.GoToElementState(canvasRoot, "CanvasButtonDown", true);
        VisualStateManager.GoToElementState(canvasRoot, "CanvasButtonUp", true);


.NET Framework
Available since 4.0
Available since 3.0
Windows Phone Silverlight
Available since 7.0
Return to top