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

WinForms Team Blog
05 April 2019

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.

Zoom Transition in Action

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.

10 comment(s)
Gabriel Araujo 1
Gabriel Araujo 1

Awesome!

5 April, 2019
Shaun Luper
Shaun Luper

Automatic Please..!

5 April, 2019
Geert Depickere
Geert Depickere

One source of inspiration for other applications could be the Material Design page on motion:

material.io/.../understanding-motion.html

An animation in a UI only has added value when it helps the user to understand what is happening. The zoom effect is a very good example of this.

6 April, 2019
Appy Developers
Appy Developers

very nice going forward with all WinForms controls, to use DirectX.

8 April, 2019
Wasif Toor
Wasif Toor

I've been looking for smoother transitions in-between Views lately. Looking forward to this update now. Way to go!

9 April, 2019
Stephen J White
Stephen J White

This is really cool. I'm always thankful you guys continue to make Winforms exciting. :D

It'd be cool if you could implement this in your WPF components someday. But I know you have a lot on your plate. Anyways, looking forward to version 19! :)

9 April, 2019
SaiKan
SaiKan

I don't like the jumping all over the screen. This tend to affect focus. A sliding action would've been better IMO. Follow the same principle as mobile, so one can comfortably hop between environments. Consistency.

"Success isn't always about greatness. It's about consistency. Consistent hard work leads to success. Greatness will come - DJ"

9 April, 2019
Zaheer Muhammad
Zaheer Muhammad

Awesome!

10 April, 2019
Karim Kouni
Karim Kouni

Anything for VCL Product Line

10 April, 2019
Guy DETIENNE
Guy DETIENNE

Really great !

Winforms developpements need more animations like this one to be attractive.  

A great thing would be to implement a special picture control with many effects still using DirectX (like blurring or other cool stuffs).  

Some codes exist on the net but only for GDI+ (too slow).

Vive DevExpress !

18 April, 2019

Please login or register to post comments.