In order to change the theme of a single control in XAML you have to declare a resource of type Theme and set an appropriate key. To complete this procedure follow the instructions below.

• Open the user control that hosts your control.
• Declare one of the RadControls for Silverlight and set the attached property StyleManager.Theme value to Vista.
• After executing all steps your code should be similar to this:

CopyXAML

<UserControl x:Class="Test.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls">
    <Grid x:Name="LayoutRoot">

        <telerik:RadSlider telerik:StyleManager.Theme="Vista"/>

    </Grid>
</UserControl>

You can also choose to change the theme for the RadControls in code-behind. To achieve this follow the brief steps described below.

• Open your user control.
• Make sure you have explicitly named the target control in XAML.
• In the constructor of your user control place the following code:

CopyC#

StyleManager.SetTheme( radSlider, new VistaTheme() );

CopyVB.NET

StyleManager.SetTheme(radSlider, New VistaTheme())

The result of both approaches will be similar and can be seen on the next figure.

 

Changing the application theme is much similar to changing the theme of single controls in Silverlight. However, changing the application theme is in much bigger scale as it affects all controls in the scope of your application. You should use the constructor of your application to set the desired theme. Here is a quick glimpse at how to change the application theme:

To change the application theme in code-behind you should follow the instructions below:

• Open your existing application or create a new one.
• Open MainPage.xaml.cs

Note

In this case MainPage.xaml.cs is your entry point for the application. If you wonder which is your startup page, open the App.xaml.cs file and see the Application_Startup event handler: CopyC# private void Application_Startup( object sender, StartupEventArgs e ) { this.RootVisual = new MainPage(); } CopyVB.NET Private Sub Application_Startup(ByVal sender As Object, ByVal e As StartupEventArgs) Me.RootVisual = New MainPage() End Sub

• Declare the following code before the InitializeComponent() call, depending on the name of your theme as follows:

CopyC#

StyleManager.ApplicationTheme = new VistaTheme();

CopyVB.NET

StyleManager.ApplicationTheme = New VistaTheme()

• After properly executing the following steps your MainPage class should be similar to this:

CopyC#

public partial class MainPage : UserControl
{
    public MainPage()
    {
        StyleManager.ApplicationTheme = new VistaTheme();

        InitializeComponent();
    }
}

CopyVB.NET

Public Partial Class MainPage
    Inherits UserControl
    Public Sub New()
        StyleManager.ApplicationTheme = New VistaTheme()

        InitializeComponent()
    End Sub
End Class

Tip

With the same success setting an application-wide built-in theme can be done in the constructor of your Application class (App.xaml.cs): CopyC# public partial class App : Application { public App() { this.Startup += this.Application_Startup; this.Exit += this.Application_Exit; this.UnhandledException += this.Application_UnhandledException; StyleManager.ApplicationTheme = new VistaTheme(); InitializeComponent(); } } CopyVB.NET Public Partial Class App Inherits Application Public Sub New() AddHandler Startup, AddressOf Me.Application_Startup AddHandler [Exit], AddressOf Me.Application_Exit AddHandler UnhandledException, AddressOf Me.Application_UnhandledException StyleManager.ApplicationTheme = New VistaTheme() InitializeComponent() End Sub End Class

Caution
Note that setting an application-wide built-in theme will not affect the non RadControls. You have to set their theme explicitly.

This section contains the following subsections:

• Create a new theme project and add styles (XAML) for the controls you want to style.
• Using the Theme class. This approach is used for the creation of the built-in themes for RadControls.

• Create a new Silverlight Class Library project.
• Add a new Silverlight Resource Dictionary. Here you should define the styles for the controls you want to style.
• At the end you should have a single file that merges all your XAML files (if you have separate XAML files) using the ResourceDictionary.MergedDictionaries construction.

For example, if you merge your styles in Generic.xaml file, then you can set the theme pointing to this file:

CopyC#

Telerik.Windows.Controls.StyleManager.ApplicationTheme = new Theme( Uri( "/Telerik.Windows.Themes.CustomTheme;component/Themes/Generic.xaml", UriKind.Relative ) );

CopyVB.NET

Telerik.Windows.Controls.StyleManager.ApplicationTheme = New Theme(Uri("/Telerik.Windows.Themes.CustomTheme;component/Themes/Generic.xaml", UriKind.Relative))

In the above code snippet it is assumed that:

• The theme project name is Telerik.Windows.Themes.CustomTheme.
• The Generic.xaml file is located in the Themes folder.

Caution
The tricky part here is that you should have references to all assemblies that you are styling. This means that if you have a style for a RadMenu in your theme project then you should have a reference to Telerik.Windows.Controls.Navigation.dll assembly in your application or you will get an error.

• Create a new Silverlight Class Library project.
• Add a new Silverlight Resource Dictionary. Here you should define the styles for the controls you want to style.
• At the end you should have a single file that merges all your XAML files (if you have separate XAML files) using the ResourceDictionary.MergedDictionaries construction.
• Create a new class which derives from Theme.

CopyC#

public class CustomTheme : Telerik.Windows.Controls.Theme
{
}

CopyVB.NET

Public Class CustomTheme
    Inherits Telerik.Windows.Controls.Theme
End Class

• Set the ThemeLocationAttribute attribute to BuiltIn like this:

CopyC#

[ThemeLocation( ThemeLocation.BuiltIn )]
public class CustomTheme : Telerik.Windows.Controls.Theme
{
}

CopyVB.NET

<ThemeLocation(ThemeLocation.BuiltIn)> _
Public Class CustomTheme
    Inherits Telerik.Windows.Controls.Theme
End Class

• In the class constructor set the Source property of the Theme.

CopyC#

public CustomTheme()
{
    this.Source = new Uri( "/Telerik.Windows.Themes.CustomTheme;component/themes/Generic.xaml", UriKind.Relative );
}

CopyVB.NET

Public Sub New()
    Me.Source = New Uri("/Telerik.Windows.Themes.CustomTheme;component/Themes/Generic.xaml", UriKind.Relative)
End Sub

In the above code snippet it is assumed that:

• The theme project name is Telerik.Windows.Themes.CustomTheme.
• The Generic.xaml file is located in the Themes folder.

Other Resources