UWP 应用程序中的自定义主题 [英] Custom Themes in UWP Application

问题描述

我正在开发一个 UWP 应用程序，我想在其中从文件(包含颜色代码)动态设置主题.

I am developing a UWP Application in which I want to set the theme dynamically from a file(Containing color codes).

我创建的文件是一个 XML 文件，其节点包含映射到应用程序控件的颜色代码.

The file which I have created is an XML file whose nodes contains the color codes which are mapped to the controls of the application.

用户可以更新提供的 XML 文件中的颜色代码，这应该反映应用程序中的主题更改.

The user can update the color codes in the provided XML file, which should reflect the theme changes in the application.

我可以为此文件设置任何自定义位置以便用户可以编辑文件的内容吗?

Can I set any custom location for this file so that the user can edit the contents of the file?

这是在 UWP 应用程序中实现主题的正确方法吗.

Is this the right approach for implementing themes in a UWP Application.

另外，我对 UWP 技术还很陌生.

Also, I am quite new in the UWP technology.

提前致谢.

推荐答案

默认情况下，UWP 应用支持两个主题 - Light 和 Dark.

By default, the UWP apps support two themes - Light and Dark.

您可以在 App.xaml 中指定应用的主题，方法是将 RequestedTheme 属性设置为任一值(设置为 Lightcode> 默认情况下)或在 App 构造函数中的 App.xaml.cs 中使用 RequestedTheme = ApplicationTheme.Light; (稍后更改它会导致抛出异常).

You can specify your app's theme in the App.xaml by setting the RequestedTheme property to either one of the values (it is set to Light by default) or in App.xaml.cs in App constructor using RequestedTheme = ApplicationTheme.Light; (changing it anywhere later will cause an exception to be thrown).

如果您不设置RequestedTheme 属性，它将反映在Settings > 中设置的主题.个性化颜色 在任何运行周年更新和更新版本的 W10 移动设备或 W10 PC 上.在较旧的 Windows 10 桌面版本上，它将是 Light.

If you don't set the RequestedTheme property, it will reflect the theme set in Settings > Personalization > Colors on any W10 Mobile device or W10 PC running Anniversary update and newer version. On older Windows 10 desktop versions it'll be Light.

您还可以设置任何特定 FrameworkElement 的主题，默认设置为 ElementTheme.Default 以便它从其父项继承主题.

You can also set the theme of any specific FrameworkElement which is set to ElementTheme.Default by default so it inherits the theme from its parent.

<StackPanel RequestedTheme="Light">
   <TextBlock>Text using light theme.</TextBlock>
   <TextBlock RequestedTheme="Dark">Text using dark theme.</TextBlock>
</StackPanel>

对于颜色自定义，UWP 通常使用用户在 Settings > 中指定的 Accent 颜色.个性化颜色也是.

For color customization UWPs usually use Accent color specified by user in Settings > Personalization > Colors too.

要反映设置应用程序中为某些元素指定自定义颜色的主题和强调色，您必须使用 ThemeResource.您可以使用预定义的 XAML 主题资源，例如此边框的背景颜色将是 #FFFFFFFF 在 Light 主题和 #FF000000 在 Dark 主题.

To reflect theme and accent color set in Settings app specifying custom color for some element, you have to use ThemeResource. You can use predefined XAML theme resources, for example this Border's background color will be #FFFFFFFF in Light theme and #FF000000 in Dark theme.

<Border Background="{ThemeResource SystemControlBackgroundAltHighBrush}"/>

或者您可以使用 SystemControlBackgroundAccentBrush，它将反映在设置"应用中选择的强调色.

Or you can use SystemControlBackgroundAccentBrush which will reflect the Accent color chosen in Settings app.

您还可以编写自己的主题词典，为每个主题指定颜色.下面是一个简单的主题词典示例:

You can also write your own theme dictionary that specifies colors for each theme. Here is an example of a simple theme dictionary:

<ResourceDictionary.ThemeDictionaries>
    <ResourceDictionary x:Key="Light">
        <SolidColorBrush x:Key="MyButtonBackgroundThemeBrush" Color="White"/
        <SolidColorBrush x:Key="MyButtonForegroundThemeBrush" Color="Black"/>
    </ResourceDictionary>
    <ResourceDictionary x:Key="Dark">
        <SolidColorBrush x:Key="MyButtonBackgroundThemeBrush" Color="Black"/>
        <SolidColorBrush x:Key="MyButtonForegroundThemeBrush" Color="White"/>
    </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>

你会像这样使用它:

<Button Content="Themed button"
        Background="{ThemeResource MyButtonBackgroundThemeBrush}"
        Foreground="{ThemeResource MyButtonForegroundThemeBrush}"/
        />

在Light 主题中，按钮的背景将为White，前景将为Black，而Black 和<Dark 主题中的 code>White.

The button's background will be White and foreground will be Black in the Light theme while Black and White in the Dark theme.

您可以阅读有关 ThemeResource、主题、HighContrast 主题和默认主题资源的更多信息 这里.

You can read more about the ThemeResource, themes, HighContrast theme and default theme resources here.

另外我建议您观看 this 频道 9 上的视频，即使使用 HighContrast 主题也解释了 XAML 主题.

Also I recommend you to watch this video on Channel 9 where are the XAML themes explained even with the HighContrast theme.

这篇关于UWP 应用程序中的自定义主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！