Styling Telerik Controls

I thought it might be interesting to do a quick rundown of the Visual Style Builder.  This tool comes with your Telerik WinForms control suite and provides a quick and easy way to change the look of a control.  The Visual Style Builder is located under the Telerik directory in your Start menu.

It allows you to modify a variety of settings for a given control to build your own themes.  For example, if you select the RadButton control under the File | LoadControl menu, you will see it displayed center screen.  As you move your mouse cursor over the control you will see specific properties identified in a tooltip. 

Click on the control when the Fill property is displayed and you will see a tool window along the bottom of the window. 

If you select the tab that says "IsMouseOver and !IsPressed".  You will see that the current color is an orange gradient.  We are going to make it glow red instead of orange when we move the mouse over the button. 

Click on the color control and the Gradient Editor will be displayed.  The boxes on the bottom of the color scale show the colors used in the gradient for the button.  If you double click on a box the color picker is displayed and you can change the color to red.  Note: There are two boxes in the middle very close together so make sure you change both of them.

When you are done, select ok and you are back on the main screen.  Notice there are two tabs a "Design View" and a "Preview".  Click on the "Preview" tab and move your mouse over the button to see your change in action.

Wonderful, but we want to use the theme in our application.

• On the top right of the screen you will see a Theme Name box, change that value to "redButton" so we can find it later.
• Select the "Save Theme As" option under the File menu.  This will create an XML file which you will use within your project, so remember where you save it. 
• Open Visual Studio and add a RadButton and a RadThemeManager to a windows form.
• In the properties window for the RadThemeManager select the LoadedThemes property.
  • In the LoadedThemes windows select the add button 
    • Set the ThemeLocation property to the path of the XML file generated by the Visual Style Builder.
  • Click Ok
• Now you just need to select the theme for the button.  In the properties window for the RadButton select the ThemeName property and set it to "redButton".
• Run the project and you should now see your button shine red when you move the cursor over it.

This is a very simple example, but it should get you started on working with the Visual Style Builder to work on your own themes.