Editing Slider's ControlTemplate in Expression Blend

Posted by: the telerik blogs, on 22 Aug 2008 | View original | Bookmarked: 0 time(s)

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.

Telerik Controls for Silverlight

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:

Visual Studio 2008

Silverlight 2 Beta 2

Blend 2.5 June 2008 Preview

 

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.

   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.

Category: Silverlight | Other Posts: View all posts by this blogger | Report as irrelevant | View bloggers stats | Views: 2900 | Hits: 10

Similar Posts

  • The State of the ViKi more
  • Framework Design Guidelines: Avoiding custom delegates more
  • Mapping with Expressions more
  • Editing Telerik's Silverlight Controls in Expression Blend more
  • IntelliSense for Expression Blend more
  • Strong-typed reflection with LINQ more
  • VB expression trees - string comparisons more
  • Lambda Expressions and Expression Trees more
  • Expression Trees in C# 3.0 more
  • Express Yourself With Custom Expression Builders more

News Categories

.NET | Agile | Ajax | Architecture | ASP.NET | BizTalk | C# | Certification | Data | DataGrid | DataSet | Debugger | DotNetNuke | Events | GridView | IIS | Indigo | JavaScript | Mobile | Mono | Patterns and Practices | Performance | Podcast | Refactor | Regex | Security | Sharepoint | Silverlight | Smart Client Applications | Software | SQL | VB.NET | Visual Studio | W3 | WCF | WinFx | WPF | WSE | XAML | XLinq | XML | XSD