WinForms - TransitionManager - DirectX-Based Transitions (v19.1)

The TransitionManager component animates control state changes. For instance, it can fade pages of the XtraTabControl in and out when users switch between them. Some controls, like the Navigation Frame, embed a TransitionManager component so you don’t have to add it manually.

Since we introduced DirectX Hardware Acceleration, we have been able to enhance the existing TransitionManager animations. Starting with our v19.1 Early Access Preview, you can enable the UseDirectXPaint property and enjoy smoother animations. Please be aware that you can use the Project Settings page to enable DirectX for your entire project – this is the recommended way now, so you don’t have to combine various individual properties.

However, we didn’t stop there. DirectX gives us access to shaders and other powerful output functionality, so we decided to add a DirectX-only effect: Zoom Transition.

As you can see in the image, the Zoom effect navigates an imaginary Z-Axis, in this case represented by the hierarchical data. The effect is best applied in cases similar to this, where a dialog or an edit form pops up, or the user navigates from a parent to a child element and vice versa.

To use the new effect, create a zoom transition at design time and link it to the control you want to use. Then retrieve this transition at runtime, configure it with the required source and target boundary rectangles, and run it. The zoom direction specifies whether the animation zooms in or out.

// Retrieve the zoom transition that has been set up at design time for
// the control called gridControl
var zoomTransition = transitionManager.GetTransition<ZoomTransition>(gridControl);

// Configure the transition parameters
transitionManager.StartTransition(gridControl);
zoomTransition.ActiveSettings = new ZoomTransitionSettings {
  Direction = ZoomTransitionDirection.ZoomIn,

  // Bounds are Rectangles for the source and target elements
  SourceBounds = new Rectangle( ... ),
  TargetBounds = new Rectangle(Point.Empty, gridControl.Size)
};

// Play the animation
transitionManager.EndTransition();

To see a working example, please download this sample project from GitHub. Preview documentation for the Zoom Transition is available here.

Please Tell Us What You Think

For now, the Zoom Transition is a stand-alone animation effect that you need to apply manually. Would you like to see it used automatically in DirectX-enabled controls? For example, it could be applied when Edit Forms in Data Grids are shown, or when users navigate between content containers in Windows UI Views. Do you have other ideas for Zoom Transition applications? Please let us know.