Home / Community & Support / Knowledge Base / RadControls for WinForms / Themes and Styling / Changing the style of RadControl UI elements at runtime

Changing the style of RadControl UI elements at runtime

Article Info

Rating: 5

 

Article information

Article relates to

RadControls for WinForms

Created by

Mike, Telerik

Last modified

February 2, 2007

Last modified by

Mike, Telerik


HOW-TO
Change the style of UI elements at runtime

SOLUTION
The Telerik Presentation Framework (TPF) supports changing or "overwriting" the style of any RadControl UI element not only using "themes" but also at runtime. Attached is a sample application that demonstrates the basics of the stylesheet API, that is also used internally by RadControl to populate the Style of the controls, depending on the theme selected (RadControl.ThemeName).

The application demonstrates two approaches for RadControls styling through code:
  • first approach - Selectors. As demonstrated, the actual task to change an element property is not very hard to achieve. Here is a sample code for changing ribbon's back color:
     
    private void Form1_Load(object sender, EventArgs e)    
    {    
        //change ribbon back fill - no need to change style    
        FillPrimitive ribbonBackFill = (FillPrimitive)new ClassSelector("TabBaseFill").GetSelectedElements(this.RadRibbonBar1.RibbonBarElement)[0];    
        ribbonBackFill.BackColor3 = Color.FromArgb(200, 168, 255);    
            ...    
    }    
      

     Here the ClassSelectror object if responsible for traversing the UI tree and finding the corresponding element(s) within. The class names (RadElement.Class property) of different elements in the UI hierarchy can be browsed, using the RadControlspy tool.
     
  • second approach - Creating a StyleSheet programmatically. The difficulty in this case comes from the "dynamic" style behavior - the ribbon chunks' fill colors are animated when the IsMouseOver property changes:
     

     
    Note that this approach does not use event handlers nor event-related code. Rather, it creates an object, adds it in the collections, and sets several properties.
    The benefits of using the style API come from code modularization and the possibility to reuse it. For example, the StyleSheet can be used in several places, with no need to wire up control- or element-specific events and API.

For more information on themes and styles please refer to the product documentation.
 

Comments

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.