[DEVEXPRESS] Hướng dẫn tạo hiệu ứng di chuyển qua lại các tab sử dụng Transition Manager

Hôm nay, mình xin hướng dẫn các bạn tạo hiệu ứng, khi di chuyển qua lại giữa các tab sử dụng Transition Manager trong bộ công cụ Devexpress.

Transition Manger cung cấp cho chúng ta rất nhiều hiệu ứng bao gồm: Fade, clock, Dissolve, Shape, SlideFade, Cover, Comb.

Giao diện chương trình: 

Video Demo :

Source code cho ứng dụng:

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

Source code sử dụng C#

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;
        }

        
    }
}

Chúc các bạn thành công. Mọi câu hỏi thắc mắc đến bài viết xin truy cập http://hoidap.laptrinhvb.net để được support.

ĐỪNG QUÊN LIKE AND SHARE NHA CÁC BẠN. 

CÁM ƠN CÁC BẠN ĐÃ THEO DÕI.

LINK DOWNLOAD