Silverlight 3 系列——关于换肤（Themes）

Silverlight 3.0的发布已经有一段时间了，最近工作之余开始研究。

本人呢，主要做的是ASP.NET方向的，主要的工作内容也是和系统架构有关。

个人认为，因此，在研究SL3的过程中，自然就比较着重的研究了一下关于企业级运用的有关问题。

在接下来的文章里，我将就换肤、OOB模式、版本升级等方面的学习成果进行一下记录。

这篇文章主要针对的是关于换肤。

---

关于换肤呢，在ASP.NET 2.0中已经有了成熟的解决方案：主题（Themes），可以在项目中通过改变Page的Theme属性来制定网站使用的主题。

 

那么，在Silverlight中，能否有这样的运用呢。

在SL2的时候，本人也对这方面进行了一定的研究。网上比较对的资料，都是针对于Toolkit中的ImpactStyleManager的介绍。

我也对Toolkit的这个模块进行了一定的学习。首先，这一块的代码比较晦涩（可能本人水平不高，看不明白吧）；其次，其针对的都是其Toolkit中自带的控件的样式，局限性很大；最后，是这个主题的文件的体积也忒大了一点，都是800K到1M不等，这样发布时对应的xap的文件体积也太大了。

所以，个人认为Toolkit的换肤，并不能算是企业级项目的成熟解决方案。

那么，在SL3中，换肤问题得到了解决么？

通过研究SL3中的导航应用程序，我们惊喜的发现，在App.xaml中，出现了如下的代码段：

1<Application.Resources>
2  <ResourceDictionary>
3    <ResourceDictionary.MergedDictionaries>
4      <ResourceDictionary Source="Assets/Styles.xaml"/>
5    </ResourceDictionary.MergedDictionaries>
6  </ResourceDictionary>
7</Application.Resources>

也就是说，在SL3中，样式文件可以通过MergedDictionaries来进行管理，而所有和项目相关的样式，都写在Styles.xaml文件中。

那么，只要能动态的加载MergedDictionaries，就可以实现换肤的功能。

动手试一试吧，在网上找一个导航应用程序的样式模板包，Copy一个出来，命名为Pinky.xaml，放在Assets文件夹下。

在页面上增加一个按钮，点击事件代码如下：

App.Current.Resources.MergedDictionaries.Clear();
ResourceDictionary newStyle = new ResourceDictionary();
newStyle.Source = new Uri("/Tour;component/Assets/Pinky.xaml", UriKind.RelativeOrAbsolute);
App.Current.Resources.MergedDictionaries.Add(newStyle);

 

如此，就改变了当前应用程序加载的样式文件。

到这个地方，可以说换肤就完成了，但是SL应用程序和Web网站可不一样，换肤完成了以后，Web网站可以通过刷新当前页让页面上所有控件重新应用新的样式，但SL应用程序可不行。

那么怎么办呢？解决方案其实很简单。

在项目下增加一个叫Container.xaml（你想起别的名字也无所谓）的UserControl，然后在App.xaml.cs中，修改Application_Startup方法代码如下：

this.RootVisual = new Container();

 

也就是说，让应用程序首先加载的是这个空白的Container.xaml页，然后让这个空白页去加载真正含有内容的MainPage.xaml页，如下：

namespace Tour
{
    public partial class Container : UserControl
    {
        public Container()
        {
            InitializeComponent();
            LoadPage();
        }

        private void LoadPage()
        {
            this.LayoutRoot.Children.Clear();
            MainPage p = new MainPage();
            p.ThemeChanged += new RoutedEventHandler(p_ThemeChanged);
            this.LayoutRoot.Children.Add(p);
        }

        void p_ThemeChanged(object sender, RoutedEventArgs e)
        {
            LoadPage();
        }
    }
}

至此，页面换肤的功能就完成了。

示例的源码下载：

https://files.cnblogs.com/JeanWang/SL3-Themes.rar

今天就暂时写到这里吧。