Articles in this section
Category / Section

How to provide Animation transition effects for CardView Item navigation?

3 mins read

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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied