In this tutorial I will show you how to edit the ControlTemplate of one of our controls – the slider. Before you begin you need to cover the prerequisites bellow. You have to download the Telerik Controls for Silverlight as well as the project that contains all the controls and their ControlTemplates.
Project with all the ControlTemplates – this project is created in such way that allows you easily to edit the control templates. This means that all the control templates are copied in the resources of each Silverlight page.
If you are missing any of the components bellow, please install them:
The first few steps from this tutorial can be done directly in Expression Blend, but for ease I will use Visual Studio and take advantage of its Intellisense.
1. Create a new Silverlight project in Visual Studio and call it StylingSlider.
Note: In this particular project the test page is generated dynamically, but you are free to attach a website.
2. Once the project is loaded, add a reference to the Telerik.Windows.Controls.dll
3. Open Page.xaml and add an xmlns referencing the previously added dll.
Build the project and you are ready to open Page.xaml in Expression Blend.
4. When Blend loads, click the “Asset Library” button, choose the “Custom Controls” tab and then select RadSlider from the list.
5. Add RadSlider to the page (can be done in two ways):
5.1 Double-click the icon to insert RadSlider
5.2 Switch to XAML view and add RadSlider declaratively.
Currently Blend is not able to find the ControlTemplate of the control, so if you decide to right click and select “Edit Control Parts (Template)” > “Edit a Copy”, you will get a ControlTemplate with nothing inside.
Therefore you need to manually insert the theme in the resources of the page.
6. From the zip archive, open Slider.xaml, copy everything that is inside the UserControl.Resources and paste it in the Resources of your UserControl.
7. RadSlider’s ControlTemplate uses the Visual State Manager, therefore you need to add a reference to the System.Windows.dll in order to use it.
We are approaching the finish line. Now you need to apply the style that you added in the resources to the slider.
8. Expand the style that targets RadSlider and add a key to it as shown in the screen shot bellow.
9. Apply the style to the slider, again can be done in two ways.
9.1 Apply the style using Blend
10. With all the steps completed so far, you can easily edit the template of the slider.
Source code for this tutorial: StylingSlider
Any comments and suggestions would be greatly appreciated.
Valentin Stoychev (@ValioStoychev) for long has been part of Telerik and worked on almost every UI suite that came out of Telerik. Valio now works as a Product Manager and strives to make every customer a successful customer.
Subscribe to be the first to get our expert-written articles and tutorials for developers!