UWP Learning record 3-styles for design and UI

UWPLearning Record3-Design andUIthe style1, Color

In the system's "settings">"Personalization">"COLOR" provides a choice of theme colors. When a theme color is selected, it is based on the color brightnessHSBvalue creates a light and dark theme color. Apps can use shadow variables to create visual hierarchies and provide interactive instructions. In theXAML, the main theme color is displayed asSystemaccentcolortheme Resources. These tones can be used asSYSTEMACCENTCOLORLIGHT3,SystemAccentColorLight2,SystemAccentColorLight1,SystemAccentColorDark1,SYSTEMACCENTCOLORDARK2and theSystemAccentColorDark3. You can also passUisettings.getcolorvalueand theUicolortypeenumeration, which is obtained programmatically.

Users can also select a light or dark theme for the system.

Apps that use light themes apply to scenarios that involve productive applications. Microsoft Office The application suite provided is an example. Light themes Support easy reading of lengthy tasks during extended task times.

Darker themes are more able to see the content contrast of media-centric apps or offer a comparison of scenarios for user-rich video or images. In these scenarios, although the experience of watching a movie may be the primary task, reading is not necessarily the case, and it is displayed in darker ambient conditions.

If your app does not fully conform to any of these descriptions, consider following the system theme and letting the user decide which theme is right for them. You can control the theme of your app through application.requestedtheme or frameworkelement.requestedtheme .

2, Layout

The default font used is the Segoe UI. For text styles, the recommended styles are as follows:

In addition, for Chinese, the recommended font is the Arial and Microsoft yahei UI. The font recommended in traditional Chinese is the Microsoft jhenghei UI.

3, Control Styles

You can use the XAML Framework to customize the appearance of your app in a number of ways. Styles allow you to set control properties and reuse these settings to keep multiple controls in a consistent appearance.

This piece is the same as WPF . As with the style and color, you can select the body, which is available in three options: Light, dark, and high contrast.

4, icons, actions, sounds

Do it further in the future.

UWP Learning record 3-styles for design and UI