如何在 C#/XAML Windows Store (Metro UI) 应用程序中混合 Light 和 Dark 主题？答案

【问题标题】：How do I mix Light and Dark themes in a C#/XAML Windows Store (Metro UI) App?如何在 C#/XAML Windows Store (Metro UI) 应用程序中混合 Light 和 Dark 主题？
【发布时间】：2013-02-22 19:02:26
【问题描述】：

根据 MSDN，设置应用主题的标准方法是在顶层 Application 实例上设置 RequestedTheme="Dark" 或 RequestedTheme="Light"。

这对于简单的应用程序非常有用，但很多时候我发现自己想要更改单个页面甚至单个控件的主题（例如，在同一个应用程序中，浅色主题的文本编辑页面与深色主题的图像查看器） .

XAML 控件有 10 到 100 种视觉状态和颜色定义，手动设置每一个都很乏味，而且很难做到 100% 正确！

有没有一种简单的方法可以在单个控件上设置深色或浅色主题？

【问题讨论】：

标签： c# xaml windows-8 windows-runtime windows-store-apps

【解决方案1】：

对于 XAML Windows 商店应用程序，控件的默认外观在 Common/StandardStyles.xaml 中定义。如果您曾经查看过该文件，您会注意到大量引用，例如 {StaticResource ApplicationForegroundThemeBrush}。看起来很有希望……

很遗憾，这些“主题画笔”并未在您的应用中的任何地方定义，并且没有简单的方法可以为各个控件设置浅色或深色覆盖。但是，有一个答案。

幸运的是，there's an excellent blog post by Joe White 在默认主题颜色上，即I've turned into a resource dictionary that you can find here。 Dropbox 仅进行 xml 预览，因此您必须重命名文件。

不过，将这些资源复制到您的应用程序本身并无济于事。要使用它们，您需要通过手术覆盖默认控件样式才能使用它们！

一种方法是创建一个新的资源字典，例如Common/CustomStyles.xaml，并将其合并到应用程序的资源中，如下所示：

<Application
    x:Class="My.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    RequestedTheme="Light">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>

                <!-- 
                    Styles that define common aspects of the platform look and feel
                    Required by Visual Studio project and item templates
                 -->
                <ResourceDictionary Source="Common/ThemeColors.xaml"/>
                <ResourceDictionary Source="Common/StandardStyles.xaml"/>
                <ResourceDictionary Source="Common/CustomStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

请注意，我们的默认主题是Light。如果我们想制作一个Dark-主题TextBlock，让我们从StandardStyles.xaml 复制视觉样式并将其添加到我们的CustomStyles.xaml 并进行一些更改。

<Style x:Key="BasicRichTextStyleDark" TargetType="RichTextBlock">
    <Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrushDark}"/>
    <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
    <Setter Property="TextTrimming" Value="WordEllipsis"/>
    <Setter Property="TextWrapping" Value="Wrap"/>
    <Setter Property="Typography.StylisticSet20" Value="True"/>
    <Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
    <Setter Property="Typography.CaseSensitiveForms" Value="True"/>
</Style>

请注意，我们已将 Dark 附加到样式名称和主题画笔定义中！您可以通过在 CustomStyles.xaml 文件中查找并替换 "ThemeBrush}" => "ThemeBrushDark}" 来执行此操作.

现在您可以像这样创建一个深色主题的文本块：

<TextBlock Style="{StaticResource BasicRichTextStyleDark}"/>

当然，您也可以将此技术用于任何其他类型的控制。有点繁琐，但结果是正确的，而且还没有尝试手动定义每种颜色那么糟糕！

这里没有魔法。我们只是定义了一些颜色并用我们复制粘贴和修改以使用我们的颜色的一种覆盖默认样式。

【讨论】：

您的 XAML 文件非常棒。节省了很多时间，因为我正要自己开始做一个。每个人都应该有这个副本。我不认为人们完全理解主题，因为我遇到过许多应用程序在更改它们开发的主题时似乎会中断。如果您要开始更改默认控件，那么最好强制应用程序进入主题并在您反对所选主题时使用此 xaml 创建正确样式的控件。
感谢 Oli，很高兴它对其他人也有用！
XAML 文件现在是 404。您可以将其上传到更持久的存储吗？也许是一个 github 要点？谢谢！

【解决方案2】：

一个令人惊讶的似乎没有被提及的解决方案是在单个控件元素上使用 RequestedTheme="Dark" 或 RequestedTheme="Light"。

我为需要将一些 appbarbuttons 设置为深色设置（即白色前景）的应用执行此操作 - 因为 Foreground 属性没有将圆圈和字形本身都设置为白色：

<AppBarButton Label="Reload all articles" RequestedTheme="Dark" >

这样，我只是强制控件使用我决定的主题。

【讨论】：

【解决方案3】：

在 Common 文件夹中，您有一个 StandardStyles.xaml 文件。

您可以在此处找到 Metro 应用程序默认的所有标准样式。您需要取消注释您想要使用的样式并将其作为 StaticResource 添加到控件中。

【讨论】：

【解决方案4】：

我在设计我的应用程序“通讯录”时也遇到了同样的问题，因为我也想要在深色和浅色主题之间进行更改。对于您的问题：“如何在 C#/XAML Windows 应用商店（Metro UI）应用程序中混合浅色和深色主题？”，我有一个极好的解决方案。

我制作了两个具有相同代码和相同内容的页面。我将这两个页面一个接一个地添加，然后我在这两种主题 Light & Dark 之间进行了动态更改。我为用户提供了一个选项，无论他们想要深色布局还是浅色布局，并且根据用户的选择，我已经应用了主题。我成功了。

第二种解决方案：

如果您想要应用程序的动态外观，那么您可以制作你自己的静态布局类型，然后你可以绑定你的静态资源到您要在其上应用这种类型的页面风格。

如果您在此处找不到答案，请原谅，但我认为它可能会帮助您在您的 win 8 Metro 应用程序中在“深色”和“浅色”主题之间动态切换。 p>

【讨论】：