全面解析Silverlight Toolkit 主题控件的用法

大家都知道Toolkit有一系列的Theme主题控件，Toolkit的示例中也介绍了它的一些用法，但是那个示例的用法太繁琐，而且不是很实用，特别是在绑定的时候；下面我将介绍主题控件的更实用的用法，它可以使我们更方便的使用和更换主题。

 

一、创建示例项目

首先，在VS或者Blend中创建一个Silverlight应用程序

为了演示动态更改自定义主题的效果我们添加2个自定义的主题，在Silverlight应用程序项目中添加Themes文件夹，在此文件夹下添加资源文件Theme.xaml，内容如下：

[xhtml]  view plain copy

1. <ResourceDictionary  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
4.     
5.   <Style TargetType="Button">  
6.     <Setter Property="Background" Value="Red"/>  
7.   </Style>  
8. </ResourceDictionary>  

    

接着在Theme文件夹中添加另一个资源文件Theme1.xaml，内容如下：

 

[xhtml]  view plain copy

1. <ResourceDictionary  
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"   
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
4.   
5.   <Style TargetType="Button">  
6.     <Setter Property="Foreground" Value="Red"/>  
7.   </Style>  
8. </ResourceDictionary>  

最后为了能演示Toolkit主题的用法，我们还要添加几个Toolkit主题的引用，如下：

 

   

二、使用固定主题控件

固定主题也就是Toolkit示例中的用法，但是Toolkit示例中是通过动态创建固定主题来达到换肤的效果，这里我们不使用这种方法，而只是演示固定主题的用法：

首先打开MainPage.xaml，添加一个StackPanel容器，在工具箱中，找到BureauBlackTheme，添加BureauBlackTheme控件到StackPanel容器，在BureauBlackTheme中添加一个button，这样我们就可以看到button的样式已经更改了，为了区分，我们在StackPanel添加一个Button控件显示全局样式，代码如下：

 

[xhtml]  view plain copy

1. <StackPanel>  
2.      <Button Content="全局样式"  Margin="20,10,20,0"/>  
3.      <toolkit:BureauBlackTheme Margin="20"  Name="bureauBlackTheme1" >  
4.        <Button Content="固定局部主题"/>  
5.      </toolkit:BureauBlackTheme>  
6. lt;/StackPanel>  

运行截图如下：

 

 

三、动态更改全局主题

我们可以通过两种方法设置全局主题：

• 第一种方法是不使用具体的主题控件来更改主题，而是使用他们的基类Theme类，通过以下方法更改主题：

public static void SetApplicationThemeUri(Application app, Uri themeUri);

• 第二种方法是使用Toolkit主题来设置全局主题，比如，我们设置ShinyRedTheme为全局主题，可以调用以下方法：

public static bool GetIsApplicationTheme(Application app); //判断当前主题是否是全局主题
public static void SetIsApplicationTheme(Application app, bool value);  // 设置当前主题为全局主题

 

下面我们来看看如何使用：

在StackPanel容器中添加两个按钮，通过点击它们来更改全局样式，xaml代码如下：

[xhtml]  view plain copy

1. <StackPanel Margin="20">  
2.   <Button Content="动态全局主题1" Click="Button_Click" />  
3.   <Button Content="动态全局主题2" Click="Button_Click_1" />  
4. </StackPanel>  

事件处理方法如下：

   

[c-sharp]  view plain copy

1. private void Button_Click(object sender, RoutedEventArgs e)  
2. {  
3.     Theme.SetApplicationThemeUri(Application.Current, new Uri("/SilverlightApplication2;component/Themes/Theme.xaml", UriKind.Relative));  
4. }  
5.   
6. private void Button_Click_1(object sender, RoutedEventArgs e)  
7. {  
8.     if (!ShinyRedTheme.GetIsApplicationTheme(Application.Current))  
9.         ShinyRedTheme.SetIsApplicationTheme(Application.Current, true);  
10. }  

点击按钮1，运行结果如下：

 

点击按钮2，运行结果如下：

 

 

可以看出来，固定主题依然没有改变

 

四、动态更改局部主题

这里我们依然通过两种方式更改局部主题，但是注意这里我们不是使用Theme类，而是使用Theme主题控件，通过设置ThemeUri类设置局部主题，在工具箱中找到Theme控件，添加到StacakPanel控件中，在主题控件中添加2个按钮，通过点击他们更改局部主题，xmal代码如下：

[xhtml]  view plain copy

1. <toolkit:Theme  Name="theme1">  
2.    <StackPanel Margin="20">  
3.      <Button Content="动态局部主题1" Click="Button_Click_2" />  
4.      <Button Content="动态局部主题2" Click="Button_Click_3" />  
5.    </StackPanel>  
6.  </toolkit:Theme>  

事件处理代码如下：

[c-sharp]  view plain copy

1. private void Button_Click_2(object sender, RoutedEventArgs e)  
2. {  
3.     theme1.ThemeUri = new Uri("/SilverlightApplication2;component/Themes/Theme1.xaml", UriKind.Relative);  
4. }  
5.   
6. private void Button_Click_3(object sender, RoutedEventArgs e)  
7. {  
8.     theme1.ThemeUri = new ShinyBlueTheme().ThemeUri;  
9. }  

 

点击按钮1，运行效果如下：

 

点击按钮2，运行结果如下：

 

以上几种方法，除了固定主题，其他两种方法，都可以在mvvm等数据绑定的框架中使用而达到动态换肤的目的。

 

本文示例下载地址：点击下载

 

在线演示地址：在线演示