We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to provide Animation transition effects for CardView Item navigation?

Platform: WinForms |
Control: CardLayout |
Published Date: January 24, 2017 |
Last Revised Date: May 22, 2019

CardLayout is Layout container type of control that helps to arrange controls in stack order and one control will be visible at the time. It is possible to perform different animation effects like Roll, Slide, Center and Blend, when updating the visibility of child Card Items by using Native Animation Class and Functions.

The following Code sample demonstrates the same.

 

C#

// Animation Effects
        public enum Effect 
        { 
            // Roll Animation
            Roll,
            // Slide Animation
            Slide,
            // Center Animation
            Center,
            // Blend Animation
            Blend 
        }
 
        /// <summary>
        /// Function helps to animate the control
        /// </summary>
        /// <param name="ctl"> Control to be animated</param>
        /// <param name="effect">Animation Effects</param>
        /// <param name="msec">Animation Duration</param>
        /// <param name="angle">Angle of Animation</param>
        public static void Animate(Control ctl, Effect effect, int msec, int angle)
        {
            // Variable of Animation Effect
            int flags = effmap[(int)effect];
            // To rotate the control, when it is visible
            if (ctl.Visible) 
            {
                flags |= 0x10000; angle += 180; 
            }
            else
            {
                if (ctl.TopLevelControl == ctl) 
                    flags |= 0x20000;
                else if (effect == Effect.Blend) 
                    throw new ArgumentException();
            }
            // Rotation Angle
            flags |= dirmap[(angle % 360) / 45];
            // To Animate the control, when its visibility is updated
            bool ok = AnimateWindow(ctl.Handle, msec, flags);
            if (!ok) throw new Exception("Animation failed");
            ctl.Visible = !ctl.Visible;
        }
        // Direction
        private static int[] dirmap = { 1, 5, 4, 6, 2, 10, 8, 9 };
        // Effect
        private static int[] effmap = { 0, 0x40000, 0x10, 0x80000 };
        [DllImport("user32.dll")]
        // Native Function to animate the Window    
        private static extern bool AnimateWindow(IntPtr handle, int msec, int flags);
    }
private void ComboBox1_SelectionChangeCommitted(object sender, System.EventArgs e)
        {
            // To hide the Container control
            Util.Animate(this.panel1, Util.Effect.Slide, 250, 0);
 
            if (this.comboBox1.SelectedIndex == 0)
            {
                this.cardLayout1.SelectedCard = "TreeNavigator";
            }
            else if (this.comboBox1.SelectedIndex == 1)
            {
                this.cardLayout1.SelectedCard = "TreeView";
            }
            else if (this.comboBox1.SelectedIndex == 2)
            {
                this.cardLayout1.SelectedCard = "HubTile";
            }
            // To display the Container control with Slide effect
            Util.Animate(this.panel1, Util.Effect.Slide, 250, 180);
        }
 

 

VB

' Animation Effects
Public Enum Effect
' Roll Animation
Roll
' Slide Animation
Slide
' Center Animation
Center
' Blend Animation
Blend
End Enum
 
''' <summary>
''' Function helps to animate the control
''' </summary>
''' <param name="ctl"> Control to be animated</param>
''' <param name="effect">Animation Effects</param>
''' <param name="msec">Animation Duration</param>
''' <param name="angle">Angle of Animation</param>
Public Shared Sub Animate(ByVal ctl As Control, ByVal effect As Effect, ByVal msec As Integer, ByVal angle As Integer)
' Variable of Animation Effect
Dim flags As Integer = effmap(CInt(effect))
' To rotate the control, when it is visible
If ctl.Visible Then
 flags = flags Or &H10000
 angle += 180
 Else
 If ctl.TopLevelControl Is ctl Then
  flags = flags Or &H20000
 ElseIf effect = Effect.Blend Then
  Throw New ArgumentException()
 End If
End If
' Rotation Angle
flags = flags Or dirmap((angle Mod 360) \ 45)
' To Animate the control, when its visibility is updated
Dim ok As Boolean = AnimateWindow(ctl.Handle, msec, flags)
If Not ok Then
 Throw New Exception("Animation failed")
End If
       ctl.Visible = Not ctl.Visible
End Sub
' Direction
Private Shared dirmap() As Integer = { 1, 5, 4, 6, 2, 10, 8, 9 }
' Effect
Private Shared effmap() As Integer = { 0, &H40000, &H10, &H80000 }
 
<DllImport("user32.dll")>
Private Shared Function AnimateWindow(ByVal handle As IntPtr, ByVal msec As Integer, ByVal flags As Integer) As Boolean
  End Function
  ' Native Function to animate the Window    
 }
Private Sub ComboBox1_SelectionChangeCommitted(ByVal sender As Object, ByVal e As System.EventArgs)
' To hide the Container control
Util.Animate(Me.panel1, Util.Effect.Slide, 250, 0)
 
If Me.comboBox1.SelectedIndex = 0 Then
 Me.cardLayout1.SelectedCard = "TreeNavigator"
ElseIf Me.comboBox1.SelectedIndex = 1 Then
 Me.cardLayout1.SelectedCard = "TreeView"
ElseIf Me.comboBox1.SelectedIndex = 2 Then
 Me.cardLayout1.SelectedCard = "HubTile"
End If
' To display the Container control with Slide effect
Util.Animate(Me.panel1, Util.Effect.Slide, 250, 180)
End Sub
 
 

 

Screenshot

 

TreeNavigator is displayed as child control

Figure 1: TreeNavigator is displayed as child control

 

Choosing TreeView control to be displayed with animation effect

Figure 2: Choosing the TreeView control to be displayed with animation effect

 

TreeView control displayed with animation effects

Figure 3: TreeView control is displayed with animation effects

 

Sample Links

C#: CardLayout

VB: CardLayout

2X faster development

The ultimate WinForms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon