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
Figure 1: TreeNavigator is displayed as child control
Figure 2: Choosing the TreeView control to be displayed with animation effect
Figure 3: TreeView control is displayed with animation effects
Sample Links
C#: CardLayout
VB: CardLayout