[WP8] Theme function implementation

Topic functions are one of the most common features in mobile development. The most common features are switching between the daytime and night modes. The following describes how to use themes on WP, the differences between different themes are nothing more than two types (color and image). On WP, we usually use resources to set colors. The system provides two types of background (white/black) and theme colors, when users set different backgrounds and theme colors for the system, the app will also display different effects based on different theme colors, so we use changing the color or background of the brush to control the display of the topic.

1. Modify the color painter

Modify the original paint brush (phoneaccentbrush, phoneforegroundbrush, phonebackgroundbrush, and so on)

Http://msdn.microsoft.com/zh-cn/library/ff769552 here is the system's default paint brush

For example, change the theme color to red.

// Change the subject color to red (since the color of the solidcolorbrush is a dependency attribute, this modification can notify all the brushes bound to the paint brush) (solidcolorbrush) application. current. resources ["phoneaccentbrush"]). color = colors. red; // Note: resourcedictionary does not provide implementation for setter. Therefore, if you cannot modify resources in the following way, a notimplementedexception exception is thrown. // application. current. resources ["phoneaccentbrush"] = new solidcolorbrush (colors. red );

2. Modify (ADD) image painter

For example, add an image painter resource.

// Construct the 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") {// if you have already defined mainbackgroundimagebrush, set its imagesource // we recommend that you set it in the app. CS or its resource reference file defines mainbackgroundimagebrush, so that you can see smart prompts at the place of reference to reduce spelling errors (imagebrush) application. current. resources ["mainbackgroundimagebrush"]). imagesource = bitmapimage;} else {// if this resource is not available, add it. (Note: You must set it before loading the page. Otherwise, the resource cannot be bound, which is generally placed in the app. XAML. CS constructor) 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"/> <! -- If it is not a system image brush, define it here and get smart awareness from the reference --> <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>

 

 

After reading the method of modifying the resource painter, we encapsulate themanager to manage the topic.

I was planning to use an XML file to save the theme color and Image Information (qq seems to be saved in XML), but XML is not intelligently aware of the color and image path, therefore, it is not intuitive to define the paint brush color, and it is easy to write errors in plain text XML. Therefore, the following uses XAML to define resource files, system topic resources on WP are also defined using the XAML file. VS has good support for the XAML file. The following defines two topic files (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"> <! -- Background color --> <color x: Key = "phonebackgroundbrush"> White </color> <! -- Foreground color --> <color x: Key = "phoneforegroundbrush"> # ff000000 </color> <! -- Title Color --> <color x: Key = "phonesubtlebrush"> # dd000000 </color> <! -- Main background image --> <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"> <! -- Background color --> <color x: Key = "phonebackgroundbrush"> black </color> <! -- Foreground color --> <color x: Key = "phoneforegroundbrush"> # ffdddddd </color> <! -- Title Color --> <color x: Key = "phonesubtlebrush"> # dddddddd </color> <! -- Main background image --> <bitmapimage X: Key = "mainbackgroundbrush" urisource = "/assets/themeresources/night/black.jpg"/> </resourcedictionary>

 

Next, we load the themanager topic resources.

/// <Summary> /// topic manager /// </Summary> public class thememanager {/// <summary> /// load the topic resources /// </Summary> /// <Param name = "path"> example: /assets/themeresources/dayresource. XAML </param> Public static void load (string path) {var resourcedictionary = new resourcedictionary (); // read resources from the Assembly (URI format:/solution here; component/resource file path) application. loadcomponent (resourcedictionary, new uri (string. format ("/themedemo; component {0}", PATH), urikind. relative); // apply the style (only color and 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 });}}}}}

 

The toolkit has been defined. We use it in the app. XAML. the CS constructor loads the default topic. When we need to modify the topic, we can directly switch the topic by calling the load method of themanager.

Below is (qq's background image)

If you need to add other topics, you can directly write resource. XAML and upload the topic path when you need to apply it.

 

Attached Demo:

Http://files.cnblogs.com/bomo/ThemeDemo.zip