Silverlight主题应用小结转载

摘要：本文总结了通过Silverlight ToolKit和ResourceDictionary使用Silverlight主题的方式。

注：本文使用的IDE是vs.net 2010 Ultimate SP1；Silverlight版本为4；Silverlight Toolkit使用的是

Silverlight_4_Toolkit_April_2010.msi安装包。

从http://silverlight.codeplex.com/可以获得Silverlight Toolkit的安装文件。

通过下面的链接能够访问Toolkit的演示页面：http://silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html

Silverlight在当初发布时就已酷炫的用户界面吸引了很多人的关注，很多人也因此开始加入了Silverlight开发的团队中。但是对于大部分开发人员来说想要做出一些比较好看的界面是比较困难的。不过幸好有一些现成的主题供我们使用，美化我们的界面。

一、使用Silverlight ToolKit应用主题

我们可以访问Silverlight Toolkit的演示页面选择Theme Browser查看我们想要的主题样式。例如我们想使用TwilightBlue主题。

新建一个Silverlight Application项目，选择Silverlight的版本为4，使用asp.net承载。右键Silverlight程序中的References选择添加引用。

打开添加引用对话框，找到我们想要使用主题的引用：System.Windows.Controls.Theming.TwilightBlut。这里注意还要引用System.Windows.Controls.Theming.Toolket，否则使用主题时会报错。

在我们想要使用主题的页面中（例如MainPage.xaml）引用刚才添加的两个主题，语句如下：

`1`	`xmlns:twilightblue="clrnamespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.TwilightBle"`

然后我们就能在xaml文件中写出下面这一对标签：

`1`	`<twilightblue:TwilightBlueTheme></twilightblue:TwilightBlueTheme>`

注意：这个标签中只能包含一个子元素，所以我们需要将要应用主题的元素放在一个布局元素内（例如StackPanel），再将这个布局元素放入上述标签内，这样就能应用主题效果了，运行效果如下图：

 代码如下：

View Code  1 <twilightblue:TwilightBlueTheme>
 2             <StackPanel Width="500" HorizontalAlignment="Left">
 3                 <TextBlock FontWeight="Bold" FontSize="20" Foreground="White">Silverlight Toolkit Theme</TextBlock>
 4                 <TextBlock>© April 2010 TwilightBlueTheme</TextBlock>
 5                 <TextBlock>Installed Chapters:</TextBlock>
 6                 <ListBox>
 7                     <ListBoxItem>Chapter 1</ListBoxItem>
 8                     <ListBoxItem>Chapter 2</ListBoxItem>
 9                 </ListBox>
10                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
11                     <Button MinWidth="10" Margin="10" Width="100">Help</Button>
12                     <Button MinWidth="10" Margin="10" Width="100">OK</Button>
13                 </StackPanel>
14                 <TextBlock>You have successfully registered this product.</TextBlock>
15             </StackPanel>
16 </twilightblue:TwilightBlueTheme>

这样我们就可以选择我们喜欢的主题来美化我们的Silverlight程序了。

二、使用ResourceDictionary导入主题

通过ResourceDictionary我们可以导入已经用xaml文件写好的主题。首先从下面的这个链接下载现有主题文件：http://www.microsoft.com/downloads/en/details.aspx?FamilyID=e9da0eb8-f31b-4490-85b8-92c2f807df9e&displaylang=en
SL4Themes-RawAssets.zip压缩包中包含了4个主题（AccentColor,Cosmopolitan, JetPack, Windows7）文件。下面是四个主题使用效果的链接：
Windows 7: http://www.silverlight.net/content/samples/sl4/themes/windows7.html
Cosmopolitan: http://www.silverlight.net/content/samples/sl4/themes/cosmopolitan.html
Accent Color: http://www.silverlight.net/content/samples/sl4/themes/accent.html
JetPack : http://www.silverlight.net/content/samples/sl4/themes/jetpack.html
这四个主题能应用于普通控件，SDK控件和Toolkit控件。
SL4Themes-templates.zip压缩包中包含了应用四个主题的Silverlight Navigation程序。
下面来看一下如何使用这些主题。
在Silverlight程序中建立一个文件夹叫“Assets”,在这个文件夹内包含我们使用的主题文件，如下图所示：
在App.xaml文件中引入我们的主题文件，代码如下：
View Code  1 <Application.Resources>
 2         <ResourceDictionary>
 3             <ResourceDictionary.MergedDictionaries>
 4                 <ResourceDictionary Source="Assets/Styles.xaml"/>
 5                 <ResourceDictionary Source="Assets/CoreStyles.xaml"/>
 6                 <ResourceDictionary Source="Assets/SDKStyles.xaml"/>
 7         <ResourceDictionary Source="Assets/ToolkitStyles.xaml"/>
 8             </ResourceDictionary.MergedDictionaries>
 9         </ResourceDictionary>
10  </Application.Resources>



如果程序中没有使用SDK控件或Toolkit控件，SDKStyles.xaml和ToolkitStyles.xaml就不用引入了。
注意：引入文件后在编译程序时会报，找不到控件的错误，这是由于我们的程序没有添加对这些命名空间的引用，我们添加引用后，就能编译通过了。或者把报错的文件从项目中移除。
这样，我们的程序中的所有控件就会变成对应主题的样式。这种主题的使用方式不像Toolkit那样，必须包含在对应的标签内才能生效。但Toolkit可以在同一个程序中使用多种主题。
以上就是对Silverlight主题使用的一个小小的总结，希望能提供一些帮助。
==============================
Silverlight为我们提供了功能非常强大的样式，却没有提供快速应用样式的方法，例如，我们不能像在WPF中那样根据资源中的样式的TargetType将样式自动应用到所有目标类型的元素上（好消息是，在Silverlight 4中已经可以这么做了）。Silverlight ToolKit（本文示例代码引用的ToolKit版本：Microsoft Silverlight 3 Toolkit November 2009）中提供的默认样式管理器（ImplicitStyleManager）稍微弥补了这一缺憾，通过默认样式管理器，我们可以相对方便的在应用程序中使用主题。本文介绍了在Silverlight中如何使用主题。
前提条件：
在Silverlight 3中使用主题，首先需要在项目中添加对Silverlight ToolKit中的System.Windows.Controls.Theming.Toolkit程序集的引用。如果使用ToolKit中提供的主题（如TwilightBlue主题等），则需要添加相应主题程序集的引用或使用相应主题的样式文件。
使用主题的几种方式：
一、使用主题控件
“主题控件”这种叫法有些别扭，但如果观察一下主题的类继承层次，会发现所有主题均从纯虚类
System.Windows.Controls.Theming.Theme（简称Theme）中继承，而Theme类则直接继承自ContentControl，因此主题确实是一个控件。
使用步骤：
1、添加对相应主题程序集的引用，例如，使用TwilightBlue主题需要添加对System.Windows.Controls.Theming.TwilightBlue程序集的引用。
2、将需要应用主题的元素放到主题控件的内容中。
示例代码：
<UserControl 
    x:Class="ThemeSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:TwilightBlueTheme="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.TwilightBlue" >
    <TwilightBlueTheme:TwilightBlueTheme >
        <StackPanel x:Name="LayoutRoot" Width="160" Margin="100" >
            <Button Content="Button" Margin="10" ></Button>
            <TextBox Text="TextBox" Margin="10"></TextBox>
        </StackPanel>
    </TwilightBlueTheme:TwilightBlueTheme>
</UserControl>

效果预览：
 
二、使用ImplicitStyleManager类提供的附加属性
使用该方式时无需添加对相应主题程序集的引用，但是需要使用相应主题提供的样式文件，例如使用TwilightBlue主题时需要System.Windows.Controls.Theming.TwilightBlue.xaml文件，如果已经正确安装了ToolKit，应该能在C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Nov09\Themes\Xaml文件夹找到。
使用步骤：
1、将样式文件添加到项目中，并将生成操作设置为“内容”。
2、对需要应用主题的元素设置附件属性。
示例代码：
<UserControl 
    x:Class="ThemeSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Theming="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.Toolkit" >
        <StackPanel x:Name="LayoutRoot" Width="160" Margin="100"  
                    Theming:ImplicitStyleManager.ApplyMode="Auto" 
                    Theming:ImplicitStyleManager.ResourceDictionaryUri= "Themes/TwilightBlue.xaml">
            <Button Content="Button" Margin="10" ></Button>
            <TextBox Text="TextBox" Margin="10"></TextBox>
        </StackPanel>
</UserControl>

 
ApplyMode属性有三个可选值: None， OneTime和Auto。 
None: 不使用样式 
OneTime: 在页面加载后接受一次指定的样式 
Auto: 在运行时动态添加的控件也将会使用指定样式
效果预览：
 
三、使用CSharp代码动态改变主题
该方式是第二种方式的CSharp实现，同样不需要相应主题的程序集而只需相应主题的样式文件。为方便演示，示例用户控件中添加了一个ComboBox用来动态改变主题。
示例代码（XAML）：
<UserControl 
    x:Class="ThemeSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib" >
        <StackPanel x:Name="LayoutRoot" Width="160" Margin="100">
            <Button Content="Button" Margin="10" ></Button>
            <TextBox Text="TextBox" Margin="10"></TextBox>
            <ComboBox SelectionChanged="ComboBox_SelectionChanged" Margin="10">
                <sys:String>ShinyRed</sys:String>
                <sys:String>TwilightBlue</sys:String>
            </ComboBox>
        </StackPanel>
</UserControl>

 
示例代码（cs）：
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Theming;

namespace ThemeSample
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string themeName = (sender as ComboBox).SelectedItem as string;
            if (string.IsNullOrEmpty(themeName)) return;

            Uri uri = new Uri(string.Format("Themes/{0}.xaml", themeName), UriKind.Relative);

            ImplicitStyleManager.SetResourceDictionaryUri(LayoutRoot, uri);
            ImplicitStyleManager.SetApplyMode(LayoutRoot, ImplicitStylesApplyMode.Auto);
        }
    }
}

效果预览：
 
Silverlight主题存在的缺陷：
ToolKit中提供的主题已经能基本满足一般项目中使用主题的要求，但也存在以下缺陷：
1、通过将主题应用到容器控件上或将容器控件放在主题控件的内容中的方式，可以将主题自动应用到控件的所有子元素，但无法将主题直接应用到所有页面或用户控件中（当然可以将页面或用户控件作为子元素出现）。
2、更要命的是：ChildWindow咋办？
在页面或用户控件中应用的主题不能自动应用到打开的子窗口中，虽然我们可以对子容口应用主题，但应用主题后的子窗口还是会留下丑陋的边框，如下图：
 
同样存在的好消息是，Silverlight 4中，主题已经可以应用到ChildWindow了，下图是一个Window 7风格的ChildWindow：

转载可能造成图片无法显示：
请查看原地址：
http://www.th7.cn/Article/bc/SilverLight/201006/383839.html

posted @ 2011-10-17 10:53 蓝叶菱阅读(224) 评论(0) 收藏举报

刷新页面返回顶部

Silverlight主题应用小结 转载

公告

Silverlight主题应用小结转载