首页 > 代码库 > Silverlight4中实现Theme的动态切换
Silverlight4中实现Theme的动态切换
Silverlight一般用来开发一些企业的应用系统，如果用户一直面对同一种风格的页面，时间长了难免厌烦，所以一般都会提供好几种风格及Theme供用户选中，下面就来说一下如何在不重新登录系统的情况下，实现风格的动态切换。我们写一个Demo来说明一下。
新建一个Silverlight的项目，并添加一个默认的站点，先来写一下页面吧，简单起见，只放两个控件，MainPage的代码如下：
<UserControl x:Class="SilverlightChangeTheme.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"> <Grid x:Name="LayoutRoot" Background="White"> <Button Content="ChangeTheme" Height="23" HorizontalAlignment="Left" Margin="40,66,0,0" Name="button1" VerticalAlignment="Top" Width="108" Click="button1_Click" Style="{StaticResource BtnStyle}" /> <TextBlock Height="23" HorizontalAlignment="Left" Margin="58,37,0,0" Name="textBlock1" Text="文字样式" VerticalAlignment="Top" FontSize="14" Width="101" Style="{StaticResource txtStyle}" /> </Grid></UserControl>
效果图如下：
就是一个简单的按钮和一个TextBlock,下面要实现的效果是点击按钮实现文字和按钮字体颜色改变(样式要从资源文件加载);
那么既然要实现切换风格，首先要有资源文件，我们先建两个Silverlight Resource Dictionary，红色风格和蓝色风格，命名为Blue.xaml和Red.xaml,代码如下：
Red.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style TargetType="Button" x:Key="BtnStyle"> <Setter Property="Foreground" Value="Red" /> </Style> <Style TargetType="TextBlock" x:Key="txtStyle"> <Setter Property="Foreground" Value="Red" /> </Style></ResourceDictionary>
Blue.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style TargetType="Button" x:Key="BtnStyle"> <Setter Property="Foreground" Value="Blue" /> </Style> <Style TargetType="TextBlock" x:Key="txtStyle"> <Setter Property="Foreground" Value="Blue" /> </Style></ResourceDictionary>
由于MainPage中已经绑定了资源文件中的样式，所以系统启动时就必须加载某一个样式文件，就是所谓的默认样式，所以要加一个静态类，来实现系统启动时加载默认样式和切换样式，代码如下：
ThemeHelper.cs
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;namespace SilverlightChangeTheme{ public static class ThemeHelper { /// <summary> /// 加载样式文件到Application.Current.Resources /// </summary> /// <param name="theme"></param> public static void LoadTheme(string theme) { ResourceDictionary rd = new ResourceDictionary(); if (theme.Length == 3) { Application.LoadComponent(rd, new Uri("/SilverlightChangeTheme;component/Red.xaml", UriKind.Relative)); } else { Application.LoadComponent(rd, new Uri("/SilverlightChangeTheme;component/Blue.xaml", UriKind.Relative)); } //清空Application.Current.Resources,存放新的样式 if (Application.Current.Resources.Count > 0) { Application.Current.Resources.Clear(); } Application.Current.Resources.MergedDictionaries.Add(rd); } /// <summary> /// 从Application.Current.Resources中获取指定名称的样式 /// </summary> /// <param name="name"></param> /// <returns></returns> public static object FindResource(string name) { if (App.Current.Resources.Contains(name)) { return App.Current.Resources[name]; } else { return null; //这里返回NULL，如果没有控件会变成系统默认样式。 } } }}
然后在App.xaml.cs中，在Application_Startup方法中添加如下代码：
private void Application_Startup(object sender, StartupEventArgs e) { //加载默认样式 ThemeHelper.LoadTheme("Blue"); this.RootVisual = new MainPage(); }
这样启动时就会自动加载蓝色的风格了，效果图下：
然后，给MainPage的Button添加事件，实现样式的切换，代码如下：
using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;namespace SilverlightChangeTheme{ public partial class MainPage : UserControl { bool IsRed = false; public MainPage() { InitializeComponent(); } private void button1_Click(object sender, RoutedEventArgs e) { if (IsRed) { //加载样式到Application.Current.Resources ThemeHelper.LoadTheme("Blue"); IsRed = false; } else { //加载样式到Application.Current.Resources ThemeHelper.LoadTheme("Red"); IsRed = true; } //运行时，更新样式必须重新设置每个控件的Style，然后调用this.UpdateLayout()方法更新页面。 button1.Style = ThemeHelper.FindResource("BtnStyle") as Style; textBlock1.Style = ThemeHelper.FindResource("txtStyle") as Style; this.UpdateLayout(); } }}
这样就实现了样式的切换，需要注意的是系统启动后切换样式，要在代码中重新设置每个控件的Style，然后调用this.UpdateLayout()方法更新页面。
当然，如果有多窗体的话，没有打开的话是不需要设置的，只需要设置已经显示的控件。
补充知识：
关于Uri路径的写法。
XAML文件的相对Uri访问, 如<Image Source="silverlight.png" />或是<Image Source="./silverlight.png" />,
在子文件夹里的可以用<Image Source=”./images/sl.jpg” />访问到
最保险的方式是采用特有的程序集资源URI访问,格式为
<Image Source="/{assemblyShortName};component/Foo.jpg"/>, 这种方式还可以引用到xap中的其他程序集中的图片
修改我们的两个图片的引用方式为
<Image Source="/SilverlightApplication1;component/silverlight.png"/>
<Image Source="/SilverlightApplication1;component/images/sl.jpg" Height="100"/>
点击这里下载源码
Silverlight4中实现Theme的动态切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。