Home / Community & Support / Knowledge Base / RadControls for WinForms / Button, DropDownButton, SplitButton, RadioButton, / Creating a button with an animated border

Creating a button with an animated border

Article Info

Rating: 3

 

Article information

Article relates to

RadControls for WinForms

Created by

Angel Kanchev, Telerik

Last modified

Feb 04, 2009

Last modified by

Nikolay Diyanov, Telerik

HOW-TO
Create a button with an animated border

 
SOLUTION
The Telerik Presentation Framework is powerful enough to offer animations and customized visual experiences. The aim of the current article is to show you how you can use colors to animate the border of a button:
  1. Add a RadButton to the form and open "Edit UI Elements" from the Glyph menu.
  2. In the opened "Element hierarchy editor" select BorderPrimitive and edit the 4 colors: ForeColor, ForeColor2, ForeColor3 and ForeColor4 as shown:
     

     
  3. Paste these lines of code in FormLoad (the handler for Load event of the form) - they will animate the border with the selected colors:

    BorderPrimitive border = (BorderPrimitive)this.radButton1.ButtonElement.BorderElement;  
    border.Width = 5;  
    border.GradientStyle = GradientStyles.Linear;  
    AnimatedPropertySetting animatedAngle = new AnimatedPropertySetting(  
        BorderPrimitive.GradientAngleProperty,  
        0f, // start value  
        360f, // end value  
        60, // number of animation frames  
        40 // time in ms between 2 frames  
        );  
    animatedAngle.AnimatorStyle = AnimatorStyles.AnimateAlways;  
    animatedAngle.AnimationFinished += delegate(object s, EventArgs e1)  
    {  
        animatedAngle.ApplyValue(border);  
    };  
    animatedAngle.ApplyEasingType = RadEasingType.Linear;  
    animatedAngle.UnapplyEasingType = RadEasingType.Linear;  
    animatedAngle.ApplyValue(border); 

 
The result is border which rotates its colors non-stop.



If we make some slight modifications to the above code snippet, you will be able to use it for different RadButton instances. In addition, you will not need to edit every button by the Edit UI Element editor. Please refer to the code snippet below:

public partial class Form1 : Form  
{  
    public Form1()  
    {  
        InitializeComponent();  
    }  
 
    private void Form1_Load(object sender, EventArgs e)  
    {  
        ApplyStyleToButton(this.radButton1);  
        ApplyStyleToButton(this.radButton2);  
    }  
 
    private void ApplyStyleToButton(RadButton button)  
    {  
        ((BorderPrimitive)button.ButtonElement.Children[2]).ForeColor = Color.FromArgb(255, 255, 0);  
        ((BorderPrimitive)button.ButtonElement.Children[2]).ForeColor2 = Color.FromArgb(255, 0, 0);  
        ((BorderPrimitive)button.ButtonElement.Children[2]).ForeColor3 = Color.FromArgb(0, 0, 255);  
        ((BorderPrimitive)button.ButtonElement.Children[2]).ForeColor4 = Color.FromArgb(0, 255, 0);  
 
        BorderPrimitive border = (BorderPrimitive)button.ButtonElement.BorderElement;  
        border.Width = 5;  
        border.GradientStyle = GradientStyles.Linear;  
        AnimatedPropertySetting animatedAngle = new AnimatedPropertySetting(  
            BorderPrimitive.GradientAngleProperty,  
            0f, // start value     
            360f, // end value     
            60, // number of animation frames     
            40 // time in ms between 2 frames     
            );  
        animatedAngle.AnimatorStyle = AnimatorStyles.AnimateAlways;  
        animatedAngle.AnimationFinished += delegate(object s, AnimationStatusEventArgs e1)  
        {  
            animatedAngle.ApplyValue(border);  
        };  
        animatedAngle.ApplyEasingType = RadEasingType.Linear;  
        animatedAngle.UnapplyEasingType = RadEasingType.Linear;  
        animatedAngle.ApplyValue(border);  
    }  
} 

As you can see, we call the ApplyStyleToButton method twice passing different RadButton instances. The animation settings will be applied to both of them.

Regarding VB.NET, please refer to the snippet below:

Public Class Form1  
    Dim buttonsAnimations As Dictionary(Of Object, AnimatedPropertySetting)  
 
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load  
        buttonsAnimations = New Dictionary(Of Object, AnimatedPropertySetting)  
 
        ApplyStyleToButton(Me.RadButton1)  
        ApplyStyleToButton(Me.RadButton2)  
    End Sub 
 
    Private Sub ApplyStyleToButton(ByVal button As RadButton)  
        CType(button.ButtonElement.Children(2), BorderPrimitive).ForeColor = Color.FromArgb(255, 255, 0)  
        CType(button.ButtonElement.Children(2), BorderPrimitive).ForeColor2 = Color.FromArgb(255, 0, 0)  
        CType(button.ButtonElement.Children(2), BorderPrimitive).ForeColor3 = Color.FromArgb(0, 0, 255)  
        CType(button.ButtonElement.Children(2), BorderPrimitive).ForeColor4 = Color.FromArgb(0, 255, 0)  
 
        Dim border As BorderPrimitive = CType(button.ButtonElement.BorderElement, BorderPrimitive)  
        border.Width = 5  
        border.GradientStyle = GradientStyles.Linear  
        Dim animatedAngle As Telerik.WinControls.AnimatedPropertySetting = _  
            New Telerik.WinControls.AnimatedPropertySetting( _  
            BorderPrimitive.GradientAngleProperty, _  
            0.0F, _  
            360.0F, _  
            60, _  
            40 _  
            )  
        animatedAngle.AnimatorStyle = AnimatorStyles.AnimateAlways  
        buttonsAnimations.Add(button, animatedAngle)  
        AddHandler animatedAngle.AnimationFinished, AddressOf RadButton_AnimationFinished  
        animatedAngle.ApplyEasingType = RadEasingType.Linear  
        animatedAngle.UnapplyEasingType = RadEasingType.Linear  
        animatedAngle.ApplyValue(border)  
    End Sub 
 
    Sub RadButton_AnimationFinished(ByVal sender As Object, ByVal e As AnimationStatusEventArgs)  
        buttonsAnimations(e.Element.ElementTree.Control).ApplyValue(CType(e.Element.ElementTree.Control, RadButton).ButtonElement.BorderElement)  
    End Sub 
End Class 

Comments

  • Daniel Gonzalez , Jul 5, 2007

    where i can find AnimatedPropertySetting ??

  • Daniel Gonzalez , Jul 5, 2007

    stack overflow Exception on: animatedAngle.AnimationFinished += delegate(object s, EventArgs e1) { animatedAngle.ApplyValue(border); };

  • Telerik Admin , Jul 11, 2007

    Thank you, Daniel, for the feedback. The thirst step has been updated to provide more clarity on how to set handler.

  • Ivan , Dec 30, 2008

    Thank you! very useful!

  • viper87 , Jan 1, 2009

    Hi, Is it possible to apply this effect to one button only and use it as a model for all other button on Visual Basic 2008? I mean without having to customize every button you add? Thank you! :)

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.