如何在C#/XAML Windows Store(Metro UI)应用程序中混合浅色和深色主题?

4
根据 MSDN 的说法,设置应用程序主题的标准方法是在顶级 Application 实例上设置 RequestedTheme="Dark" 或 RequestedTheme="Light"。这对于简单的应用程序非常有效,但许多时候我发现自己想要更改单个页面甚至单个控件的主题(例如,在同一应用程序中具有浅色主题的文本编辑页面与深色主题的图像查看器)。XAML 控件有 10 秒或数百个视觉状态和颜色定义,手动设置每一个状态很费时,并且很难做到 100% 正确!有没有一种简单的方式来设置单个控件的深色或浅色主题?
4个回答

5

一种似乎没有被提到的解决方案是在单个控件元素上使用RequestedTheme="Dark"RequestedTheme="Light"

我在一个应用程序中这样做,其中我需要将一些应用栏按钮设置为暗色主题(白色前景)-因为Foreground属性不能将圆圈和图形本身都设置为白色:

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

这样,我只需强制控件使用我选择的主题。

5
对于 XAML Windows Store 应用,控件的默认外观是在 Common/StandardStyles.xaml 文件中定义的。如果您曾经看过那个文件,您会注意到大量类似 {StaticResource ApplicationForegroundThemeBrush} 的引用。看起来很有前途...
不幸的是,这些“主题刷子”在应用程序中没有定义,也没有简单的方法为单个控件设置浅色或深色覆盖。然而,有一个答案。
幸运的是,Joe White 在默认主题颜色上写了一篇绝佳的博客文章,我已将其转化为资源字典,您可以在这里找到。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
谢谢Oli,很高兴它对其他人也有用! - ambrus
1
XAML文件现在是404错误。你能把它上传到更持久的存储中吗?也许是GitHub Gist?谢谢! - Amadeusz Wieczorek

1
在Common文件夹中,您有一个StandardStyles.xaml文件。
在这里,您可以找到所有默认的Metro应用程序标准样式。 您需要取消注释您想要使用的样式,并将其作为StaticResource添加到控件中。

0
我在设计我的应用程序“联系人簿”时也遇到了同样的问题,因为我也想在深色和浅色主题之间进行更改。对于你的问题:“如何在C#/XAML Windows Store (Metro UI)应用程序中混合浅色和深色主题?”,我有一个绝妙的解决方案。

  • 我制作了两个具有相同代码和相同内容的页面。我将这两个页面叠加在一起,然后在这两种主题之间进行动态更改。我给用户提供了选择深色布局或浅色布局的选项,并根据用户的选择应用主题。我在这种情况下取得了成功。

第二个解决方案:

  • 如果您想要应用程序的动态外观和感觉,则必须制作自己的静态布局类型,然后可以将该静态资源绑定到要应用该类型样式的页面上。

如果您在这里找不到答案,请原谅,但我认为这可能会帮助您在win 8 metro应用程序中动态更改“深色”和“浅色”主题设置。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接