TransitionManager Class

Allows you to implement animated transitions between control states.

Namespace: DevExpress.Utils.Animation

Assembly: DevExpress.Utils.v19.1.dll

Declaration

C#

[ToolboxBitmap(typeof(ToolboxIconsRootNS), "TransitionManager")]
public class TransitionManager :
    Component

VB.NET

<ToolboxBitmap(GetType(ToolboxIconsRootNS), "TransitionManager")>
Public Class TransitionManager
    Inherits Component

Remarks

If a control has multiple states, you can use the TransitionManager component to animate the transition between the start and end control states. The TransitionManager can maintain state transitions for multiple controls, thus it is typically needed to use one TransitionManager component per form. The following features are supported:

• Multiple transition types (Fade, Dissolve, Push, Shape, Clock, etc.)
• Easing functions.
• A wait/load indicator.

To get started, place the TransitionManager component onto the form. Add a transition (a DevExpress.Utils.Animation.Transition object) to the TransitionManager.Transitions collection, and customize its properties. The main transition properties are listed below:

• Control - Specifies the control whose state transition needs to be animated.
• TransitionType - Allows you to specify the animation mode and parameters.
• EasingMode - Allows you to specify an easing function.
• ShowWaitingIndicator - Allows you to display a wait/load indicator during the state transition. The use of a wait indicator makes sense when the state transition time is long enough to show the indicator.
• WaitingIndicatorProperties - Specifies wait indicator customization settings.

Right before a control’s state transition starts, call the TransitionManager.StartTransition method. This method has the control parameter, which should refer to the control whose state is about to be changed. The TransitionManager.Transitions collection must contain a DevExpress.Utils.Animation.Transition object whose Transition.Control property matches the control parameter of the TransitionManager.StartTransition method. This DevExpress.Utils.Animation.Transition object determines the state transition that will be applied. The StartTransition method shows a wait indicator if it is enabled. After the control’s state has been changed, call the TransitionManager.EndTransition method. The EndTransition method hides the wait indicator and performs an animated transition between the initial and final control states.

Regarding the underlying operations of the TransitionManager, the StartTransition and EndTransition methods do not affect the control itself. Instead, they operate on screenshots of the control. The TransitionManager.StartTransition method creates a screenshot of the control using the Control.DrawToBitmap method and displays it above the control. As a result, the control is hidden, so all subsequent changes to the control’s state are not visible to end-users. The TransitionManager.EndTransition method, when called, makes a new screenshot of the control and then performs an animated transition between the first and second control image. For limitations of the Control.DrawToBitmap method, see the corresponding topic in MSDN.

The TransitionManager.CustomTransition event allows you to dynamically customize the parameters of the animated state transition. For instance, this event can be handled to specify easing function and clip regions where the animation will take place.

To perform custom actions before a transition starts, handle the TransitionManager.BeforeTransitionStarts event. For instance, you can handle it to prevent the animated transition in certain cases. The TransitionManager.AfterTransitionEnds event will notify you that an animated transition is completed.

Demo: Transition Manager module in the ApplicationUI MainDemo

Example

This example contains an XtraTabControl with two tabs. The TransitionManager component is used to animate switching between these tabs, using a certain animation effect (specified by the Transition Type combobox). Animated tab switching is initiated in the XtraTabControl.SelectedPageChanging event handler and is finished in the XtraTabControl.SelectedPageChanged event handler.Before the transition starts, it is created in the SelectedIndexChanged event of the combobox control. By default, the entire area occupied by the control is animated by the TransitionManager. In the example, the CustomTransition event is handled to exclude the tab region from animation.

The following image shows the state transition in progress:

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-use-transitionmanager-to-animate-tab-switching-in-xtratabcontrol-t114295

Form1.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using DevExpress.Utils.Animation;
using DevExpress.XtraEditors;
using DevExpress.XtraEditors.Controls;

namespace TransitionManagerSample {
    public partial class Form1 : Form {
        public Form1() {
            InitializeComponent();
        }

        Control animatedControl;

        private void xtraTabControl1_SelectedPageChanging(object sender, DevExpress.XtraTab.TabPageChangingEventArgs e) {
            // Start the state transition when a page is about to be switched.
            if (animatedControl == null) return;
            transitionManager1.StartTransition(animatedControl);
        }

        private void xtraTabControl1_SelectedPageChanged(object sender, DevExpress.XtraTab.TabPageChangedEventArgs e) {
            // Finish the transition after a page has been selected.
            transitionManager1.EndTransition();
        }

        private void Form1_Load(object sender, EventArgs e) {
            animatedControl = xtraTabControl1;

            // Populate the ImageComboBox with available transition types.
            imageComboBoxEdit1.Properties.Items.AddEnum(typeof(DevExpress.Utils.Animation.Transitions));
            imageComboBoxEdit1.SelectedIndexChanged += imageComboBoxEdit1_SelectedIndexChanged;
            imageComboBoxEdit1.SelectedIndex = 0;
        }

        BaseTransition CreateTransitionInstance(Transitions transitionType) {
            switch (transitionType) {
                case Transitions.Dissolve: return new DissolveTransition();
                case Transitions.Fade: return new FadeTransition();
                case Transitions.Shape: return new ShapeTransition();
                case Transitions.Clock: return new ClockTransition();
                case Transitions.SlideFade: return new SlideFadeTransition();
                case Transitions.Cover: return new CoverTransition();
                case Transitions.Comb: return new CombTransition();
                default: return new PushTransition();
            }
        }

        void imageComboBoxEdit1_SelectedIndexChanged(object sender, EventArgs e) {
            ImageComboBoxEdit imComboBox = sender as ImageComboBoxEdit;

            if (transitionManager1.Transitions[animatedControl] == null) {
                // Add a transition, associated with the xtraTabControl1, to the TransitionManager.
                Transition transition1 = new Transition();
                transition1.Control = animatedControl;
                transitionManager1.Transitions.Add(transition1);
            }
            // Specify the transition type.
            DevExpress.Utils.Animation.Transitions trType = (DevExpress.Utils.Animation.Transitions)imComboBox.EditValue;
            transitionManager1.Transitions[animatedControl].TransitionType = CreateTransitionInstance(trType);
        }

        // A custom easing function.
        DevExpress.Data.Utils.IEasingFunction myEasingFunc = new DevExpress.Data.Utils.BackEase();

        private void transitionManager1_CustomTransition(DevExpress.Utils.Animation.ITransition transition, DevExpress.Utils.Animation.CustomTransitionEventArgs e) {
            // Set a clip region for the state transition.
            e.Regions = new Rectangle[] { xtraTabPage1.Bounds };
            // Specify a custom easing function.
            e.EasingFunction = myEasingFunc;
        }


    }
}

Form1.vb

Imports DevExpress.Utils.Animation
Imports DevExpress.XtraEditors

Public Class Form1

    Dim animatedControl As Control

    Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        animatedControl = XtraTabControl1

        ' Populate the ImageComboBox with available transition types.
        ImageComboBoxEdit1.Properties.Items.AddEnum(GetType(DevExpress.Utils.Animation.Transitions))
        AddHandler ImageComboBoxEdit1.SelectedIndexChanged, AddressOf ImageComboBoxEdit1_SelectedIndexChanged
        ImageComboBoxEdit1.SelectedIndex = 0
    End Sub

    Private Sub ImageComboBoxEdit1_SelectedIndexChanged(sender As Object, e As EventArgs)
        Dim imComboBox As ImageComboBoxEdit = TryCast(sender, ImageComboBoxEdit)

        If TransitionManager1.Transitions(animatedControl) Is Nothing Then
            ' Add a transition, associated with the xtraTabControl1, to the TransitionManager.
            Dim transition1 As New Transition()
            transition1.Control = animatedControl
            TransitionManager1.Transitions.Add(transition1)
        End If
        ' Specify the transition type.
        Dim trType As DevExpress.Utils.Animation.Transitions = DirectCast(imComboBox.EditValue, DevExpress.Utils.Animation.Transitions)
        TransitionManager1.Transitions(animatedControl).TransitionType = CreateTransitionInstance(trType)
    End Sub

    Private Function CreateTransitionInstance(transitionType As Transitions) As BaseTransition
        Select Case transitionType
            Case Transitions.Dissolve
                Return New DissolveTransition()
            Case Transitions.Fade
                Return New FadeTransition()
            Case Transitions.Shape
                Return New ShapeTransition()
            Case Transitions.Clock
                Return New ClockTransition()
            Case Transitions.SlideFade
                Return New SlideFadeTransition()
            Case Transitions.Cover
                Return New CoverTransition()
            Case Transitions.Comb
                Return New CombTransition()
            Case Else
                Return New PushTransition()
        End Select
    End Function

    Private Sub XtraTabControl1_SelectedPageChanging(sender As Object, e As DevExpress.XtraTab.TabPageChangingEventArgs) Handles XtraTabControl1.SelectedPageChanging
        ' Start the state transition when a page is about to be switched.
        If animatedControl Is Nothing Then
            Return
        End If
        TransitionManager1.StartTransition(animatedControl)
    End Sub

    Private Sub XtraTabControl1_SelectedPageChanged(sender As Object, e As DevExpress.XtraTab.TabPageChangedEventArgs) Handles XtraTabControl1.SelectedPageChanged
        ' Finish the transition after a page has been selected.
        TransitionManager1.EndTransition()
    End Sub

    ' A custom easing function.
    Dim myEasingFunc As DevExpress.Data.Utils.IEasingFunction = New DevExpress.Data.Utils.BackEase()

    Private Sub TransitionManager1_CustomTransition(transition As DevExpress.Utils.Animation.ITransition, e As DevExpress.Utils.Animation.CustomTransitionEventArgs) Handles TransitionManager1.CustomTransition
        ' Set a clip region for the state transition.
        e.Regions = New Rectangle() {XtraTabPage1.Bounds}
        ' Specify a custom easing function.
        e.EasingFunction = myEasingFunc
    End Sub


End Class

Inheritance

Object

MarshalByRefObject

Component

TransitionManager