How to edit RadControl's ControlTemplate in Expression Blend

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.

 1: xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

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.

 1: <Grid x:Name="LayoutRoot" Background="White">

 2:  

 3: <telerik:RadSlider />

 4:  

 5: </Grid>

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.

 1: xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"

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

9.2 Declaratively

 1: <Grid x:Name="LayoutRoot" Background="White">

 2:  

 3: <telerik:RadSlider Style="{StaticResource SliderStyle}" />

 4:  

 5: </Grid>

10. With all the steps completed so far, you can easily edit the template of the slider.

Source code for this tutorial: StylingSlider

Additional Resources:

Articles on Visual State Manager

Using ControlTemplates

Any comments and suggestions would be greatly appreciated.