Adding Collapse and Expand Animation Effects
C1Menu contains 27 animation and thirty-one transition effects that allow you to customize interaction with the control. In this topic, you will set the CollapseAnimation, ExpandAnimation, CollapseEasing, ExpandEasing, CollapseDuration, and ExpandDuration properties to create an animation effect while expanding or collapsing menu items.
Setting Animation Effects Using the Designer
Complete the following steps to set animation effects:
1. Click C1Menu's smart tag to open the C1MenuTasks menu and select Edit Menu. The C1Menu Designer Form appears.
2. Use the Add Child Item () button to add two link items to your C1Menu.
3. In treeview, select LinkItem01 and click on the Add Child Item button to add two link items to LinkItem01.
4. In treeview, select LinkItem01 and navigate to the ExpandAnimation property and set it to "Unfold".
5. Set the ExpandEasing property to "EaseOutBounce". This property determines the animation transition effect while the menu items are expanding.
6. Locate the ExpandDuration property and enter "1500" into its textbox. This will lengthen the duration of the animation effect, guaranteeing that you will notice the effect when you build the project.
7. Set the CollapseAnimation property and set it to "Fold".
8. Set the CollapseEasing property to "EaseInBounce". This property determines the animation transition effect while the menu items are collapsing.
9. Locate the CollapseDuration property and enter "1500" into its textbox.
10. Click OK to save and close the C1Menu Designer Form.
11. Build the project and observe that the expanding child link items unfold and bounce in before settling into its natural state and the collapsing child link items fold and then bounce in before settling into its natural state.
Setting Animation Effects in Source View
In Source view add ExpandAnimation="Unfold", ExpandDuration="1500", ExpandEasing="EaseOutBounce", CollapseAnimation="Fold", CollapseDuration="1500", and CollapseEasing="EaseInBounce" into the <cc1:C1MenuItem> tag so that it appears similar to the following:
<cc1:C1MenuItem runat="server" CollapseAnimation="Fold" CollapseDuration="1500" CollapseEasing="EaseInBounce"
ExpandAnimation="UnFold" ExpandDuration="1500" ExpandEasing="EaseOutBounce" Text="LinkItem01">
<Items>
<cc1:C1MenuItem runat="server" Text="LinkItem01">
</cc1:C1MenuItem>
<cc1:C1MenuItem runat="server" Text="LinkItem02">
</cc1:C1MenuItem>
</Items>
</cc1:C1MenuItem>
Setting Animation Effects Programmatically
Complete the following steps to set animation effects programmatically:
1. Import the following namespace into your project:
Imports C1.Web.UI.Controls.C1Menu
• C#
using C1.Web.UI.Controls.C1Menu;
2. Add the following code to the Page_Load event to set the animation effects for the expanding and collapsing menu items:
If Not Page.IsPostBack Then
'create menu item
Dim item1 As New C1MenuItem()
item1.Text = "LinkItem01"
'add item 1 to the main menu bar
C1Menu1.Items.Add(item1)
'Set the expand animation effect
item1.ExpandAnimation = C1.Web.UI.AnimationEffect.UnFold
'Set the transition for the expand animation effect
item1.ExpandEasing = C1.Web.UI.Easing.EaseOutBounce
'Set the duration for the expand animation effect
item1.ExpandDuration = 2500
'Set the collapse animation effect
item1.CollapseAnimation = C1.Web.UI.AnimationEffect.Fold
'Set the transition for the collapse animation
item1.CollapseEasing = C1.Web.UI.Easing.EaseInBounce
'Set the duration for the collapse animation effect
item1.CollapseDuration = 2500
'set item 1 submenu width
item1.NestedGroupWidth = 120
'create submenu item
Dim item1child1 As New C1MenuItem()
item1child1.Text = "LinkItem01"
Dim item1child2 As New C1MenuItem()
item1child2.Text = "LinkItem02"
'add submenu item to menu Item 1
item1.Items.Add(item1child1)
item1.Items.Add(item1child2)
End If
• C#
if (!Page.IsPostBack)
{
//create menu item
C1MenuItem item1 = new C1MenuItem();
item1.Text = "LinkItem01";
//add item 1 to the main menu bar
C1Menu1.Items.Add(item1);
//Set the expand animation effect
item1.ExpandAnimation = C1.Web.UI.AnimationEffect.UnFold;
//Set the transition for the expand animation effect
item1.ExpandEasing = C1.Web.UI.Easing.EaseOutBounce;
//Set the duration for the expand animation effect
item1.ExpandDuration = 2500;
//Set the collapse animation effect
item1.CollapseAnimation = C1.Web.UI.AnimationEffect.Fold;
//Set the transition for the collapse animation
item1.CollapseEasing = C1.Web.UI.Easing.EaseInBounce;
//Set the duration for the collapse animation effect
item1.CollapseDuration = 2500;
//set item 1 submenu width
item1.NestedGroupWidth = 120;
//create submenu item
C1MenuItem item1child1 = new C1MenuItem();
item1child1.Text = "LinkItem01";
C1MenuItem item1child2 = new C1MenuItem();
item1child2.Text = "LinkItem02";
//add submenu item to menu Item 1
item1.Items.Add(item1child1);
item1.Items.Add(item1child2);
}
3. Run the program and observe that the expanding child link items unfold and bounce in before settling into its natural state and the collapsing child link items fold and then bounce in before settling into its natural state.
|