首页 > 代码库 > 【WP8】主题功能的实现
【WP8】主题功能的实现
主题功能在移动开发中是最常见的功能之一,用的最多的是日间模式和夜间模式的切换,下面说说如何在WP上使用主题,不同主题的差别无非就是两种(颜色和图片),在WP上我们通常使用资源来设置颜色,系统提供了两种背景(白色/黑色)和主题色,当用户为系统设置不同的背景和主题色的时候,App也会根据主题色的不同而展示不同的效果,所以我们使用改变Brush的颜色或背景来控制主题的显示
1、修改颜色画刷
在修改原有的画刷(PhoneAccentBrush,PhoneForegroundBrush,PhoneBackgroundBrush等等)
http://msdn.microsoft.com/zh-cn/library/ff769552 这里是系统默认的画刷
例如:把主题色改为红色
//把主题色改为红色(由于SolidColorBrush的Color是依赖属性,所以该修改可以通知到所有绑定该画刷的Brush) ((SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"]).Color = Colors.Red; //注意:ResourceDictionary没有为setter提供实现,所以不能通过下面方式对Resources进行修改,会抛出NotImplementedException异常 //Application.Current.Resources["PhoneAccentBrush"] = new SolidColorBrush(Colors.Red);
2、修改(添加)图片画刷
例如:添加一个图片画刷资源
//构造图片BitmapImage var bitmapImage = new BitmapImage(); bitmapImage.SetSource(Application.GetResourceStream( new Uri("Assets/ThemeResources/Day/black.jpg", UriKind.Relative)).Stream); if (Application.Current.Resources.Contains("MainBackgroundImageBrush")) { //如果已经定义过了MainBackgroundImageBrush,则设置其ImageSource //建议在App.cs或者其资源引用文件中定义MainBackgroundImageBrush,这样在引用的地方可以看到智能提示,减少拼写错误 ((ImageBrush) Application.Current.Resources["MainBackgroundImageBrush"]).ImageSource = bitmapImage; } else { //如果没有该资源,则添加(注意:这里需要在页面加载前设置,否则绑定不到该资源,一般放在App.xaml.cs的构造函数中) Application.Current.Resources.Add("MainBackgroundImageBrush", new ImageBrush {ImageSource = bitmapImage}); }
App.xaml
<Application x:Class="ThemeDemo.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"> <!--Application Resources--> <Application.Resources> <local:LocalizedStrings xmlns:local="clr-namespace:ThemeDemo" x:Key="LocalizedStrings"/> <!--如果不是系统画刷,在这里进行定义,在引用的地方可以得到智能感知--> <ImageBrush x:Name="MainBackGroundBrush"></ImageBrush> </Application.Resources> <Application.ApplicationLifetimeObjects> <!--Required object that handles lifetime events for the application--> <shell:PhoneApplicationService Launching="Application_Launching" Closing="Application_Closing" Activated="Application_Activated" Deactivated="Application_Deactivated"/> </Application.ApplicationLifetimeObjects> </Application>
看完修改资源画刷的方法,下面我们封装一个ThemeManager对主题进行管理
本来打算使用XML文件来保存主题颜色和图片信息(QQ貌似用XML保存的),但是XML对颜色和图片路径没有智能感知,所以在定义画刷颜色的时候不够直观,在纯文本的XML中写容易出错,所以下面使用xaml来定义资源文件,WP上的系统主题资源也是使用xaml文件定义的,VS对xaml文件有很好的支持,下面定义两个主题文件(DayResource.xaml, NightResource.xml)
DayResources.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!--背景色--> <Color x:Key="PhoneBackgroundBrush">White</Color> <!--前景色--> <Color x:Key="PhoneForegroundBrush">#FF000000</Color> <!--次标题颜色--> <Color x:Key="PhoneSubtleBrush">#DD000000</Color> <!--主背景图--> <BitmapImage x:Key="MainBackGroundBrush" UriSource="/Assets/ThemeResources/Day/Blue.jpg"/></ResourceDictionary>
NightResources.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <!--背景色--> <Color x:Key="PhoneBackgroundBrush">Black</Color> <!--前景色--> <Color x:Key="PhoneForegroundBrush">#FFDDDDDD</Color> <!--次标题颜色--> <Color x:Key="PhoneSubtleBrush">#DDDDDDDD</Color> <!--主背景图--> <BitmapImage x:Key="MainBackGroundBrush" UriSource="/Assets/ThemeResources/Night/Black.jpg"/></ResourceDictionary>
接下来我们在ThemeManager加载主题资源
/// <summary>/// 主题管理器/// </summary>public class ThemeManager{ /// <summary> /// 加载主题资源 /// </summary> /// <param name="path">例如:/Assets/ThemeResources/DayResource.xaml</param> public static void Load(string path) { var resourceDictionary = new ResourceDictionary(); //从程序集读取资源(这里的Uri格式:/解决方案;component/资源文件路径) Application.LoadComponent(resourceDictionary, new Uri(string.Format("/ThemeDemo;component{0}", path), UriKind.Relative)); //应用样式(只有颜色和Color和图片BitmapImage) foreach (DictionaryEntry kv in resourceDictionary) { if (kv.Value is Color) { ((SolidColorBrush)Application.Current.Resources[kv.Key]).Color = (Color)kv.Value; } else if (kv.Value is BitmapImage) { if (Application.Current.Resources.Contains(kv.Key)) { ((ImageBrush)Application.Current.Resources[kv.Key]).ImageSource = ((BitmapImage)kv.Value); } else { Application.Current.Resources.Add(kv.Key, new ImageBrush {ImageSource = (BitmapImage) kv.Value}); } } } }}
Toolkit都定义好了,下面是使用,我们在App.xaml.cs的构造函数中加载默认主题,当我们需要修改主题的时候,直接调用ThemeManager的Load方法就可以直接切换主题了
下面是效果图(背景图拿QQ的)
如果需要添加其他主题,直接编写Resource.xaml即可,在需要应用的时候传主题路径
附上Demo:
http://files.cnblogs.com/bomo/ThemeDemo.zip