Animated effects enrich the UI with smooth objects movement, resize, docking and undocking.
Telerik RadDock allows users to turn on and off the effects and also to tune the their duration and update rate.
Consider the following example:
The update rate indicates the frequence of object state update (i.e position when moving, width/height when resizing, etc.). Setting the greater value allow more smooth movement but increase the CPU load and the smaller values make the move more discrete but lowers the load. Values in range 1-100 only have sensible effect.
The duration specifies the time to complete the animated action (move, resize, etc.).
<form runat="server" method="post" ID="Form1"> <rad:RadDockingManager id="RadDockingManager1" runat="server"></rad:RadDockingManager> <Telerik:Header XhtmlCompliant="False" runat="server" ID="Header1" NavigationLanguage="CS"></Telerik:Header> <table class="LayoutTable" cellSpacing="1" cellPadding="1" border="0"> <tr> <tr height="8"> <td colspan=3> <rad:RadDockingZone id="RadDockingZone3" runat="server" Width="100%" Height="100%" Type="Top"> </rad:RadDockingZone> </td> </tr> <td width="8"> <rad:RadDockingZone id=RadDockingZone1 runat="server" Width="100%" Height="100%">
<rad:RadDockableObject id=RadDockableObject1 runat="server" Text="Object 1" Height="125px" Behavior="Resizable" BorderWidth="3px"> <ContentTemplate> <strong>Object 1.</strong> </ContentTemplate> </rad:RadDockableObject>
<rad:RadDockableObject id=RadDockableObject2 runat="server" Text="Object 2" Height="125px" Behavior="Resizable" BorderWidth="3px"> <ContentTemplate> <strong>Object 2.</strong> </ContentTemplate> </rad:RadDockableObject> </rad:RadDockingZone> </td> <td> </td> <td width="8"> <rad:RadDockingZone id=RadDockingZone2 runat="server" Width="100%" Height="100%"> <rad:RadDockableObject id="RadDockableObject3" runat="server" Text="Object 3" Height="125px" Behavior="Resizable" BorderWidth="3px"> <ContentTemplate> <strong>Object 3.</strong> </ContentTemplate> </rad:RadDockableObject> <rad:RadDockableObject id="RadDockableObject4" runat="server" Text="Object 4" Height="125px" Behavior="Resizable" BorderWidth="3px"> <ContentTemplate> <strong>Object 4.</strong> </ContentTemplate> </rad:RadDockableObject> </rad:RadDockingZone> </td> </tr> <tr height="8"> <td colspan=3> <rad:RadDockingZone id="Raddockingzone4" runat="server" Width="100%" Height="100%" Type="Top"> </rad:RadDockingZone> </td> </tr> </table>
<table class="panel"> <tr> <td><asp:CheckBox ID="chkEffects" Runat="server" AutoPostBack=True Text="Use Effects"></asp:CheckBox></td> <td>Update rate:</td> <td><asp:TextBox ID="txtUpdateRate" Runat="server"></asp:TextBox> [updates/sec] (values: 1-100)</td> </tr> <tr> <td> </td> <td>Duration:</td> <td><asp:TextBox ID="txtDuration" Runat="server"></asp:TextBox> [sec]</td> </tr> <tr> <td> </td> <td> </td> <td><asp:Button ID="btnApply" Runat=server Text="Apply"></asp:Button> <asp:Button ID="btnReset" Runat=server Text="Reset"></asp:Button></td> </tr> </table>
<Telerik:Footer runat="server" ID="Footer1"></Telerik:Footer> |
[C# code]
using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace Telerik.DockExamplesCSharp.Dock.Examples.Effects
{
/// <summary>
/// Summary description for DefaultCS.
/// </summary>
public class DefaultCS : System.Web.UI.Page
{
protected Telerik.WebControls.RadDockingManager RadDockingManager1;
protected Telerik.WebControls.RadDockingZone RadDockingZone3;
protected Telerik.WebControls.RadDockableObject RadDockableObject1;
protected Telerik.WebControls.RadDockableObject RadDockableObject2;
protected Telerik.WebControls.RadDockableObject RadDockableObject3;
protected Telerik.WebControls.RadDockableObject RadDockableObject4;
protected Telerik.WebControls.RadDockingZone RadDockingZone1;
protected Telerik.WebControls.RadDockingZone RadDockingZone2;
protected Telerik.WebControls.RadDockingZone Raddockingzone4;
protected System.Web.UI.WebControls.CheckBox chkEffects;
protected System.Web.UI.WebControls.TextBox txtUpdateRate;
protected System.Web.UI.WebControls.TextBox txtDuration;
protected System.Web.UI.WebControls.Button btnApply;
protected System.Web.UI.WebControls.Button btnReset;
private void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
chkEffects.Checked = RadDockingManager1.EffectsEnabled;
txtUpdateRate.Text = RadDockingManager1.EffectsUpdateRate.ToString();
txtDuration.Text = RadDockingManager1.EffectsDuration.ToString();
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
chkEffects.CheckedChanged += new EventHandler(chkEffects_CheckedChanged);
btnApply.Click += new EventHandler(btnApply_Click);
btnReset.Click += new EventHandler(btnReset_Click);
}
#endregion
private void chkEffects_CheckedChanged(object sender, EventArgs e)
{
RadDockingManager1.EffectsEnabled = chkEffects.Checked;
ApplyEffectsSettings();
}
private void btnApply_Click(object sender, EventArgs e)
{
ApplyEffectsSettings();
}
private void btnReset_Click(object sender, EventArgs e)
{
RadDockingManager1.EffectsUpdateRate = 50;
RadDockingManager1.EffectsDuration = 0.3f;
txtUpdateRate.Text = RadDockingManager1.EffectsUpdateRate.ToString();
txtDuration.Text = RadDockingManager1.EffectsDuration.ToString();
}
void ApplyEffectsSettings()
{
RadDockingManager1.EffectsUpdateRate = int.Parse(txtUpdateRate.Text);
RadDockingManager1.EffectsDuration = float.Parse(txtDuration.Text);
}
}
}
[VB code]
Public Class DefaultVB11
Inherits System.Web.UI.Page
Protected RadDockingManager1 As Telerik.WebControls.RadDockingManager
Protected WithEvents chkEffects As System.Web.UI.WebControls.CheckBox
Protected WithEvents txtUpdateRate As System.Web.UI.WebControls.TextBox
Protected WithEvents txtDuration As System.Web.UI.WebControls.TextBox
Protected WithEvents btnApply As System.Web.UI.WebControls.Button
Protected WithEvents btnReset As System.Web.UI.WebControls.Button
#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
'NOTE: The following placeholder declaration is required by the Web Form Designer.
'Do not delete or move it.
Private designerPlaceholderDeclaration As System.Object
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
If Not IsPostBack Then
chkEffects.Checked = RadDockingManager1.EffectsEnabled
txtUpdateRate.Text = RadDockingManager1.EffectsUpdateRate.ToString()
txtDuration.Text = RadDockingManager1.EffectsDuration.ToString()
End If
End Sub
Private Sub chkEffects_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles chkEffects.CheckedChanged
RadDockingManager1.EffectsEnabled = chkEffects.Checked
ApplyEffectsSettings()
End Sub
Private Sub btnApply_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnApply.Click
ApplyEffectsSettings()
End Sub
Private Sub btnReset_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnReset.Click
RadDockingManager1.EffectsUpdateRate = 50
RadDockingManager1.EffectsDuration = 0.3F
txtUpdateRate.Text = RadDockingManager1.EffectsUpdateRate.ToString()
txtDuration.Text = RadDockingManager1.EffectsDuration.ToString()
End Sub
Sub ApplyEffectsSettings()
RadDockingManager1.EffectsUpdateRate = Integer.Parse(txtUpdateRate.Text)
RadDockingManager1.EffectsDuration = Single.Parse(txtDuration.Text)
End Sub
End Class