C1TreeView contains 27 animation and 31 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 C1TreeView’s smart tag to open the C1TreeView Tasks menu and select Edit TreeView.
The TreeViewDesignerForm appears.
2. Use the Add Child Item button to add two C1TreeViewNodes to your C1TreeView.
3. In treeview, select C1TreeViewNode01 and click on the Add Child Item button to add two child nodes to C1TreeViewNode01.
4. In treeview, select C1TreeView1 and navigate to the ExpandAnimation property in the Properties window 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 TreeViewDesignerForm.
11. Build the project and observe that the expanding nodes unfold and bounce in before settling into its natural state and the collapsing nodes fold and then bounce in before settling into their 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:C1TreeView ID="C1TreeView1" runat="server" AllowSorting="False" AutoCollapse="False"
CollapseAnimation="Fold" CollapseDuration="1500" CollapseEasing="EaseInBounce"
ExpandAnimation="UnFold" ExpandDuration="1500" ExpandEasing="EaseOutBounce" VisualStyle="ArcticFox"
VisualStylePath="~/C1WebControls/VisualStyles">
<Nodes>
<cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="C1TreeViewNode01">
<Nodes>
<cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="C1TreeViewNode01">
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="C1TreeViewNode02">
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeViewNode>
<cc1:C1TreeViewNode runat="server" Expanded="False" Selected="False" Text="C1TreeViewNode02">
</cc1:C1TreeViewNode>
</Nodes>
</cc1:C1TreeView>
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.C1TreeView
• C#
using C1.Web.UI.Controls.C1TreeView;
2. Add the following code to the Page_Load event to set the animation effects for the expanding and collapsing node items:
If Not Page.IsPostBack Then
Dim P As New C1TreeViewNode()
P.Text = "Products"
P.Value = "PS"
P.Expanded = True
'Add Animation Effects
C1TreeView1.Nodes.Add(P)
C1TreeView1.ExpandAnimation = C1.Web.UI.AnimationEffect.Unfold
C1TreeView1.ExpandEasing = C1.Web.UI.Easing.EaseOutBounce
C1TreeView1.ExpandDuration = 1500
C1TreeView1.CollapseAnimation = C1.Web.UI.AnimationEffect.Fold
C1TreeView1.CollapseEasing = C1.Web.UI.Easing.EaseInBounce
Dim Pr1 As New C1TreeViewNode()
Pr1.Text = "Product 1"
Pr1.Value = "Pr1"
Pr1.Expanded = False
P.Nodes.Add(Pr1)
Dim Oview1 As New C1TreeViewNode()
Oview1.Text = "Overview"
Oview1.Value = "Oview1"
Pr1.Nodes.Add(Oview1)
Dim Down1 As New C1TreeViewNode()
Down1.Text = "Downloads"
Down1.Value = "Down1"
Pr1.Nodes.Add(Down1)
End If
• C#
if (!Page.IsPostBack)
{
C1TreeViewNode P = new C1TreeViewNode();
P.Text = "Products";
P.Value = "PS";
P.Expanded = true;
//Add Animation Effects
C1TreeView1.Nodes.Add(P);
C1TreeView1.ExpandAnimation = C1.Web.UI.AnimationEffect.FadeOut;
C1TreeView1.ExpandEasing = C1.Web.UI.Easing.EaseOutBounce;
C1TreeView1.ExpandDuration = 1500;
C1TreeView1.CollapseAnimation = C1.Web.UI.AnimationEffect.FadeIn;
C1TreeView1.CollapseEasing = C1.Web.UI.Easing.EaseInBounce;
C1TreeViewNode Pr1 = new C1TreeViewNode();
Pr1.Text = "Product 1";
Pr1.Value = "Pr1";
Pr1.Expanded = false;
P.Nodes.Add(Pr1);
C1TreeViewNode Oview1 = new C1TreeViewNode();
Oview1.Text = "Overview";
Oview1.Value = "Oview1";
Pr1.Nodes.Add(Oview1);
C1TreeViewNode Down1 = new C1TreeViewNode();
Down1.Text = "Downloads";
Down1.Value = "Down1";
Pr1.Nodes.Add(Down1);
}
3. Run the program and observe that the expanding child link items unfold and bounce in before settling into their natural state and the collapsing child link items fold and then bounce in before settling into their natural state.
|
