"Win10 UAP Development Series" topic mode switch, win10uap

"Win10 UAP Development Series" topic mode switch, win10uap

Microsoft was really quick. I wanted to write the WP8.1RT series, and the result was Win10 UAP as soon as it was sorted out. However, the difference between RT and Win10 is not big. I participated in Win10 development geek show two days ago. Although I did not win the prize, I upgraded WP8.1 to Win10UAP with the help of Wayne, using some new features, I recently tried to summarize some things.

Today, let's talk about how to switch the topic mode in Win10 UAP.

Switching the daytime and nighttime theme modes is implemented by WP8 and encapsulated into a library for all my WP8 apps. In WP8.1, because the system theme style was changed, it was rewritten again. Before we can sort out and write a blog, we have changed the Win10 style ...... You can't talk about it. However, the idea is the same. Let's take the Win10 version as an example to summarize it.

The UAP style is basically the same as the previous version. It is something similar to css. We can implement our own theme style by overwriting the system style. First, find the location of the UAP style:

C: \ Program Files (x86) \ Windows Kits \ 10 \ Include \ 10.0.10069.0 \ winrt \ xaml \ design \ themeresources. xaml

Open this file and you can see that the default theme style is stored in it.

By the way, the default theme styles of WP8 and WP8.1 can also be found, with different positions.

1. Create a UAP Project

Create a UAP project. Because I am used to using MVVM-Sidekick, I will do it based on this framework in the future. By the way, I will give @ Wayne a mean advertisement ^_^.

This example is called ThemeDemo. OK.

Wait until the Framework Program is created.

It can be seen that there is only one project for Win10 UAP, and the method for creating projects for PCs and mobile phones is different from that in the WP8.1 era. This makes it easier.

2. Add a default topic

Use VS2015RC to open the system default Style File just found,

In this case, the code is collapsed:

This makes it clear that there are three theme styles, Default, Light, and high contrast, and various styles, fonts, font sizes, various colors and brushes, and control styles, now we need to extract and modify it.

Add a folder named CustomTheme to the project.

Generally, you only need to process Dark and Light separately. For example, I think the background color of Dark is not pure black, and the background color of Light is not pure white.

Create two new xaml files named ThemeResourcesDark. xaml and ThemeResourcesLight. xaml. The root node is written as follows:

Then, copy the Color and Brush parts in the system style file. Default corresponds to Dark, Light corresponds to Light.

The style File CustomStyleResources. xaml of the control is created to copy the style of the Control. Because the control only has different background colors under different themes, the attributes of margin and padding are consistent.

I also added a set of FlatUI Color resources, FlatUIColorsResources. xaml, which stores various Flat-style colors and brushes for ease of use.

3. Introduce custom style Resources

Open App. xaml and add the following code:

The style of the control and the style of the topic are introduced. By the way, do not apply the control template or other things to the App. in xaml, the heap is too messy and should all be put in the resource file for management.

4. modify a custom Style

Running the program now looks like the default one, or it's black or white. Because RequestedTheme = "Light ".

Now let's modify the background color. Open MainPage. xaml and you can see the following code:

That is to say, the background color name of the root Grid is ApplicationPageBackgroundThemeBrush.

Then go to the ThemeResourcesLight. xaml file to find the resource and change the color:

It is best to add a comment to the modified color.

Run the following command:

The background color has changed. It is no longer pure white. Then you can change the foreground color, the background color of the Dark subject, and the foreground color .......

5. Switch the topic in the program

The UAP topic is set through RequestedTheme. You can bind an attribute to the page to implement switching.

Open MainPage_Model.cs and add an attribute. Enter the code snippet propvm and press Tab.

/// <Summary> /// Current topic /// </Summary> Public ElementTheme CurrentTheme { Get {return _ CurrentThemeLocator (this). Value ;} Set { _ CurrentThemeLocator (this). SetValueAndTryNotify (value ); } } # Region Property ElementTheme CurrentTheme Setup Protected Property <ElementTheme> _ CurrentTheme = new Property <ElementTheme> {LocatorFunc = _ CurrentThemeLocator }; Static Func <BindableBase, ValueContainer <ElementTheme> _ CurrentThemeLocator = RegisterContainerLocator <ElementTheme> ("CurrentTheme", model => model. initialize ("CurrentTheme", ref model. _ CurrentTheme, ref _ CurrentThemeLocator, _ currentthemedefavaluvaluefactory )); Static Func <ElementTheme> _ currentthemedefavaluvaluefactory = () =>{ return ElementTheme. Default ;}; # Endregion

Assign a value to the VM during initialization:

Add a Command, enter propcmd, and press Tab

/// <Summary> /// Switch the daytime and nighttime Modes /// </Summary> Public CommandModel <ReactiveCommand, String> CommandSetCustomTheme { Get {return _ CommandSetCustomThemeLocator (this). Value ;} Set {_ CommandSetCustomThemeLocator (this). SetValueAndTryNotify (value );} } # Region Property CommandModel <ReactiveCommand, String> CommandSetCustomTheme Setup Protected Property <CommandModel <ReactiveCommand, String> _ CommandSetCustomTheme = new Property <CommandModel <ReactiveCommand, String >>{ LocatorFunc = _ CommandSetCustomThemeLocator }; Static Func <BindableBase, ValueContainer <CommandModel <ReactiveCommand, String> _ CommandSetCustomThemeLocator = RegisterContainerLocator <CommandModel <ReactiveCommand, String> ("CommandSetCustomTheme", model => model. initialize ("CommandSetCustomTheme", ref model. _ CommandSetCustomTheme, ref _ CommandSetCustomThemeLocator, _ commandsetcustomthemedefavaluvaluefactory )); Static Func <BindableBase, CommandModel <ReactiveCommand, String> _ commandsetcustomthemedefavaluvaluefactory = Model => { Var resource = "SetCustomTheme"; // Command resource Var commandId = "SetCustomTheme "; Var vm = CastToCurrentType (model ); Var cmd = new ReactiveCommand (canExecute: true) {ViewModel = model}; // New Command Core Cmd . DoExecuteUIBusyTask ( Vm, Async e => { // Todo: Add SetCustomTheme logic here, or Await MVVMSidekick. Utilities. TaskExHelper. Yield (); If (vm. CurrentTheme = ElementTheme. Dark | vm. CurrentTheme = ElementTheme. Default) { Vm. CurrentTheme = ElementTheme. Light; } Else { Vm. CurrentTheme = ElementTheme. Dark; } } ) . DoNotifyDefaultEventRouter (vm, commandId) . Subscribe () . DisposeWith (vm );   Var cmdmdl = cmd. CreateCommandModel (resource ); Using MDL. ListenToIsUIBusy (model: vm, canExecuteWhenBusy: false ); Return writable MDL; }; # Endregion

 

ElementTheme is different from ApplicationTheme. The latter is the property of the App. The former can be applied to UIElement. Therefore, you can bind this attribute to the root Grid.

Add a Button on the page, set Content to "Switch topic", and then bind the Command to CommandSetCustomTheme.

Take a look:

It can be switched smoothly, and the background color and foreground color become our settings, not pure black and pure white.

In fact, TextBlock and Button do not set the background color and foreground color. They all inherit from the system, so no special settings are required. The same applies to other controls. You can add a style if you need special processing.

6. Set the style of the control

By the way, we recommend that you write the style of the control here to overwrite the default one. For example, you can change the background color of all the grids here, or change the global shard header margin.

 

I forgot to add the source code:

Link: http://pan.baidu.com/s/1mgFvXos password: wnck