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:
<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>
|
|
|---|
| 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.
<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:
<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:
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:
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)}); }
- figures 1-3 show the result:
figure 1: Click the Office Black button to show a black and grey theme.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。