使用Silverlight Toolkit 应用以及动态切换主题

最新推荐文章于 2024-09-24 22:46:30 发布

cshui918

最新推荐文章于 2024-09-24 22:46:30 发布

阅读量2.9k

点赞数

分类专栏： Silverlight 文章标签： silverlight header command 工具 themes microsoft

Silverlight 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本教程将向您介绍如何让Silverlight应用程序应用主题，并允许用户动态切换。
（原文：http://weblogs.asp.net/lduveau/archive/2010/05/31/dynamically-apply-and-change-theme-with-the-silverlight-toolkit.aspx）

简介

从Silverlight支持主题开始就能实现，但2010年4月以后的版本和Silverlight 4中的新特性，使得应用这些主题更加容易。

您需要知道：

ImplicitStyleManager从工具箱中被删除了，这是因为现在在Silverlight 4已经支持隐式样式。
该工具包包含一个主题控件，可以应用页面的主题控制。
另外ContextMenuService 和ContextMenu 控件可以允许用户在应用程序运行时进行主题切换。

截至2010年4月从工具包中可用的主题：

You could easily create your own, the XAML files used by those themes can be found on your local folder after installing the toolkit, for the April 2010 version the path is:这些主题所使用的XAML文件，您可以轻松地创建的，安装工具包后在您的本地文件夹可以找到，2010年4月版本的路径是：

C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Themes\Xaml

入门

如果没有它，安装最新版本的Silverlight工具包：
http://silverlight.codeplex.com/http://silverlight.codeplex.com/

然后打开Visual Studio 2010，创建新的Silverlight导航应用程序（或Silverlight商业应用程序）。

添加Toolkit主题DLL

右键单击Silverlight项目，选择“添加引用...”，然后选择NET选项卡中所有System.Windows.Controls.Toolkit .*的DLL。

主题控件

安装该工具包后，VS工具箱中会有一个主题控件，在MainPage.xaml页面Frame外面添加一个主题控件，在这里，只想将主题应用到页面的内容部分。然后设置ThemeUri属性为其中引用的样式：

<toolkit:Theme x:Name="ThemeContainer" ThemeUri="/System.Windows.Controls.Theming.BubbleCreme;component/Theme.xaml">
<toolkit:ContextMenuService.ContextMenu>
    <toolkit:ContextMenu>
        <toolkit:MenuItem Header="Theme" IsEnabled="False"/>
        <toolkit:Separator />            
        <toolkit:MenuItem Header="Default" />
            
        <toolkit:MenuItem Header="Bubble Creme"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="BubbleCreme"/>

        <toolkit:MenuItem Header="Bureau Black"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="BureauBlack"/>

        <toolkit:MenuItem Header="Bureau Blue"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="BureauBlue"/>

        <toolkit:MenuItem Header="Expression Dark"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ExpressionDark"/>

        <toolkit:MenuItem Header="Expression Light"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ExpressionLight"/>

        <toolkit:MenuItem Header="Rainier Orange"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="RainierOrange"/>

        <toolkit:MenuItem Header="Rainier Purple"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="RainierPurple"/>

        <toolkit:MenuItem Header="Shiny Blue"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ShinyBlue"/>

        <toolkit:MenuItem Header="Shiny Red"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ShinyRed"/>

        <toolkit:MenuItem Header="Whistler Blue"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="WhistlerBlue"/>
    </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>



如果你从工具箱拖放主题控件，Visual Studio会自动添加“工具包”的命名空间前缀，如果没有，需要在页面标题中手动添加：xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
在Home Page（/Views/Home.xaml）添加几个控件（TextBox, Button, Calendar, …），并在浏览器中测试您的应用程序，您应该看到在内容部分应用的主题：

这就是，很容易。
现在让我们为用户添加从列表中选择一个主题的功能。

添加一个上下文菜单列出可用的主题
在主题控件内的ContextMenuService添加一个ContextMenu控件（在运行时右键会出现）：

<toolkit:ContextMenuService.ContextMenu>
    <toolkit:ContextMenu>
        <toolkit:MenuItem Header="Theme" IsEnabled="False"/>
        <toolkit:Separator />            
        <toolkit:MenuItem Header="Default" />
            
        <toolkit:MenuItem Header="Bubble Creme"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="BubbleCreme"/>

        <toolkit:MenuItem Header="Bureau Black"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="BureauBlack"/>

        <toolkit:MenuItem Header="Bureau Blue"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="BureauBlue"/>

        <toolkit:MenuItem Header="Expression Dark"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ExpressionDark"/>

        <toolkit:MenuItem Header="Expression Light"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ExpressionLight"/>

        <toolkit:MenuItem Header="Rainier Orange"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="RainierOrange"/>

        <toolkit:MenuItem Header="Rainier Purple"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="RainierPurple"/>

        <toolkit:MenuItem Header="Shiny Blue"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ShinyBlue"/>

        <toolkit:MenuItem Header="Shiny Red"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="ShinyRed"/>

        <toolkit:MenuItem Header="Whistler Blue"
                            Command="{StaticResource themeCommand}"
                            CommandParameter="WhistlerBlue"/>
    </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>


您需要添加一个引用这个DLL：
System.Windows.Input.ToolkitSystem.Windows.Input.Toolkit 

所以，现在你的页面的结构应该是：

请注意，每个MenuItem被映射到一个命令，并且主题名称作为参数传递。
你必须创建一个新类，并实现ICommand接口。这里的目标是获得一个主题控件的引用（按名称，但您可能会找到更好的办法做到这一点），并设置其ThemeUri属性。
 
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Markup;
using System.IO;
using System.Windows.Controls.Theming;

namespace FunWithThemes
{

    public class ThemeChangeCommand : ICommand
    {
        #region ICommand Members

        public bool CanExecute(object parameter)
        {
            return true;
        }

        public event EventHandler CanExecuteChanged;

        public void Execute(object parameter)
        {
            Theme themeContainer = (Theme)((FrameworkElement)Application.Current.RootVisual).FindName("ThemeContainer");

            string themeName = parameter as string;


            if (themeName == null)
            {
                themeContainer.ThemeUri = null;
            }
            else 
            {
                themeContainer.ThemeUri = new Uri("/System.Windows.Controls.Theming." + themeName + ";component/Theme.xaml", UriKind.RelativeOrAbsolute);
            }

            if (CanExecuteChanged != null)
                CanExecuteChanged(this, new EventArgs());
        }

        #endregion
    }
}




 
如果使用“Silverlight的商业应用程序”模板，你应该改变类似 ： 
 Theme themeContainer = (Theme)((FrameworkElement)((ContentControl)Application.Current.RootVisual).Content).FindName( "ThemeContainer" ); 
在MainPage.xaml中（或在应用程序资源）的资源中添加命令：
 < Grid.Resources > 
     < local:ThemeChangeCommand x:Key ="themeCommand" />
 </ Grid.Resources > 
"local"是应用程序的命名空间前缀 。 

测试！
现在，当您运行测试页，你可以用鼠标右键单击并选择一个主题：

选择主题“Shiny Red”：

或 “Bureau Blue”：

您有多种存储策略（独立存储，服务器配置文件，甚至Cookies，... ...）