Telerik UI for Silverlight自定义主题(themes)的使用_app

概述Telerik UI for Silverlight http://www.telerik.com/help/silverlight/styling-apperance-custom-styles-themes-runtime.html Telerik UI for Silverlight自定义主题的使用，Radcontrols silverlight quickstat的自定义主题(themes

Telerik UI for Silverlight

http://www.telerik.com/help/silverlight/styling-apperance-custom-styles-themes-runtime.html

Telerik UI for Silverlight自定义主题的使用，Radcontrols silverlight quickstat的自定义主题(themes)的使用

Telerik UI for Silverlight

Switching Custom Styles with themes at Runtime

Setting a theme using Implicit Styles,you have the option to change the theme of the controls at runtime without recreating the UI.

Generally the resources in a merged dictionary occupy a location in the resource lockup scope that is just after the scope of the main resource dictionary they are merged into. What you may do is to isolate your custom styles in a separate resource dictionary and add it as the last one each time you change the theme.

As an example,you can follow the steps bellow:

1. Create a new application and add the required assemblIEs from the BinarIEs.NoXaml folder located in the Telerik UI installation folder. You should also include the theme assemblIEs:

Telerik.windows.Controls.dll

Telerik.windows.Controls.input.dll

Telerik.windows.themes.Office_Black.dll

Telerik.windows.themes.Office_Blue.dll

2. Add the needed resource dictionarIEs for the default theme in App.xaml:

copyXAML

<ResourceDictionary>    <ResourceDictionary.MergedDictionarIEs>     <ResourceDictionary Source="/Telerik.windows.themes.Office_Black;component/themes/System.windows.xaml"/>     <ResourceDictionary Source="/Telerik.windows.themes.Office_Black;component/themes/Telerik.windows.Controls.xaml"/>      <ResourceDictionary Source="/Telerik.windows.themes.Office_Black;component/themes/Telerik.windows.Controls.input.xaml"/>                ......</ResourceDictionary.MergedDictionarIEs></ResourceDictionary>

Note
Initially we merge the ResourceDictionarIEs for the "Office_Black" theme.

3. Add few controls of your choice to the layout root of your application. And also two buttons which we will use to switch between two of the themes.

copyXAML

<GrID x:name="LayoutRoot" Background="White">        <GrID.RowDeFinitions>            <RowDeFinition Height="*"/>            <RowDeFinition Height="auto"/>        </GrID.RowDeFinitions>            <telerik:Radbutton Content="button" VerticalAlignment="Center" WIDth="100"/>        <StackPanel GrID.Row="1" OrIEntation="Horizontal">            <button x:name="Office_Black" margin="5" Content="Office_Black" Click="Office_Black_Click"/>            <button x:name="Office_Blue" margin="5" Content="Office_Blue" Click="Office_Blue_Click"/>    </StackPanel></GrID>

4. Now we need to add our custom styles in a separate resource dictionary with name CustomStyles.xaml,contained in themes folder of your project with name CustomStyles_SL (CustomStyles_WPF). This custom ResourceDictionary will have the following content:

copyXAML

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    <Style targettype="telerik:Radbutton" BasedOn="{StaticResource RadbuttonStyle}">        <Setter Property="Background" Value="Red"/>    </Style></ResourceDictionary>

5. In our example we will use the simplest way to change the theme at runtime – using the Click event of each of these buttons. Upon click,we will clear merged dictionarIEs from the application resources and merge new resource dictionarIEs from the theme assemblIEs with our custom styles contained in Custom Styles.xaml:

copyC#

private voID Office_Black_Click(object sender,RoutedEventArgs e){    Application.Current.Resources.MergedDictionarIEs.Clear();    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary()    {        Source = new Uri("/Telerik.windows.themes.Office_Black;component/themes/System.windows.xaml",UriKind.relativeOrabsolute)    });    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary()    {        Source = new Uri("/Telerik.windows.themes.Office_Black;component/themes/Telerik.windows.Controls.xaml",UriKind.relativeOrabsolute)    });    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary()    {        Source = new Uri("/Telerik.windows.themes.Office_Black;component/themes/Telerik.windows.Controls.input.xaml",UriKind.relativeOrabsolute)    });    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary()    {        Source = new Uri("/CustomStyles;component/themes/CustomStyles.xaml",UriKind.relativeOrabsolute)    });}private voID Office_Blue_Click(object sender,RoutedEventArgs e){    Application.Current.Resources.MergedDictionarIEs.Clear();    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary()    {        Source = new Uri("/Telerik.windows.themes.Office_Blue;component/themes/System.windows.xaml",UriKind.relativeOrabsolute)    });    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary()    {        Source = new Uri("/Telerik.windows.themes.Office_Blue;component/themes/Telerik.windows.Controls.xaml",UriKind.relativeOrabsolute)    });    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary()    {        Source = new Uri("/Telerik.windows.themes.Office_Blue;component/themes/Telerik.windows.Controls.input.xaml",UriKind.relativeOrabsolute)    });}

The result based on the above code will the one illustrated on the image below:

Telerik UI for Silverlight

Switching themes at Runtime

Send Feedback

By utilizing the theming mechanism with implicit styles,you can change the theme of Telerik Silverlight controls at runtime without recreating the UI. All you need to do is remove the current merged dictionarIEs and then add the merged dictionarIEs of another theme to your application resources in code-behind:

copyC#

Application.Current.Resources.MergedDictionarIEs.Clear();Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary() { Source = ......});

This will apply different implicit styles to your control at runtime.

In this help article we'll go through a quick example to demonstrate the approach.

Add the required assemblIEs from the BinarIEs.NoXaml folder located in the Telerik UI installation folder. You must also include the theme assemblIEs:

Add the needed resource dictionarIEs for the default theme in App.xaml:

copyXAML

<Application.Resources>    <ResourceDictionary>        <ResourceDictionary.MergedDictionarIEs>            <ResourceDictionary Source="/Telerik.windows.themes.Office_Black;component/themes/System.windows.xaml"/>            <ResourceDictionary Source="/Telerik.windows.themes.Office_Black;component/themes/Telerik.windows.Controls.xaml"/>            <ResourceDictionary Source="/Telerik.windows.themes.Office_Black;component/themes/Telerik.windows.Controls.input.xaml"/>            ...        </ResourceDictionary.MergedDictionarIEs>    </ResourceDictionary></Application.Resources>

Add a few controls of your choice to the page. In this example,we will add a grID,a stackpanel,a RadComboBox,a RadDateTimePicker and three buttons Radbuttons to switch between three of the themes.

copyXAML

<GrID x:name="LayoutRoot" Background="White">    <GrID.RowDeFinitions>        <RowDeFinition Height="auto" />        <RowDeFinition Height="*" />    </GrID.RowDeFinitions>    <StackPanel OrIEntation="Horizontal" Background="#FFE5E5E5" HorizontalAlignment="Stretch">        <telerik:Radbutton Content="Office Black" VerticalAlignment="Center" WIDth="110"  margin="10" Click="OfficeBlack_Click" />        <telerik:Radbutton Content="windows8" VerticalAlignment="Center" WIDth="110" margin="10" Click="windows8_Click" />        <telerik:Radbutton Content="windows 7" VerticalAlignment="Center" WIDth="110"  margin="10" Click="windows7_Click" />    </StackPanel>    <StackPanel OrIEntation="Vertical" GrID.Row="1" margin="20" HorizontalAlignment="left">        <telerik:RadComboBox WIDth="230" margin="10">            <telerik:RadComboBoxItem Content="Item 1" />            <telerik:RadComboBoxItem Content="Item 2" />            <telerik:RadComboBoxItem Content="Item 3" />            <telerik:RadComboBoxItem Content="Item 4" />            <telerik:RadComboBoxItem Content="Item 5" />        </telerik:RadComboBox>        <telerik:RadDateTimePicker WIDth="230" margin="10" IsDropDownopen="True" />    </StackPanel></GrID>

The example will use the simplest way to change the theme at runtime – it will use the Click event of each of the three Radbuttons. Upon click,we will clear merged dictionarIEs from the application resources and merge new resource dictionarIEs from the theme assemblIEs:

copyC#

private voID OfficeBlack_Click(object sender,RoutedEventArgs e){    Application.Current.Resources.MergedDictionarIEs.Clear();    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary() {         Source = new Uri("/Telerik.windows.themes.Office_Black;component/themes/System.windows.xaml",UriKind.relativeOrabsolute)});    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary() {         Source = new Uri("/Telerik.windows.themes.Office_Black;component/themes/Telerik.windows.Controls.xaml",UriKind.relativeOrabsolute)});    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary() {        Source = new Uri("/Telerik.windows.themes.Office_Black;component/themes/Telerik.windows.Controls.input.xaml",UriKind.relativeOrabsolute)});}private voID windows8_Click(object sender,RoutedEventArgs e){    Application.Current.Resources.MergedDictionarIEs.Clear();    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary() {         Source = new Uri("/Telerik.windows.themes.windows8;component/themes/System.windows.xaml",UriKind.relativeOrabsolute)});    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary() {         Source = new Uri("/Telerik.windows.themes.windows8;component/themes/Telerik.windows.Controls.xaml",UriKind.relativeOrabsolute)});    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary() {         Source = new Uri("/Telerik.windows.themes.windows8;component/themes/Telerik.windows.Controls.input.xaml",UriKind.relativeOrabsolute)});}private voID windows7_Click(object sender,RoutedEventArgs e){    Application.Current.Resources.MergedDictionarIEs.Clear();    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary() {         Source = new Uri("/Telerik.windows.themes.windows7;component/themes/System.windows.xaml",UriKind.relativeOrabsolute)});    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary() {         Source = new Uri("/Telerik.windows.themes.windows7;component/themes/Telerik.windows.Controls.xaml",UriKind.relativeOrabsolute)});    Application.Current.Resources.MergedDictionarIEs.Add(new ResourceDictionary() {         Source = new Uri("/Telerik.windows.themes.windows7;component/themes/Telerik.windows.Controls.input.xaml",UriKind.relativeOrabsolute)});}