如何在C#/ XAML Windows应用商店(Metro UI)应用中混合Light和Dark主题?

时间:2013-02-22 19:02:27

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

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

这对于简单的应用程序非常有用,但很多时候我发现自己想要更改单个页面的主题甚至单个控件(例如,以同一应用程序中的以光为主题的文本编辑页面与黑暗主题的图像查看器)

XAML控件具有10或100个视觉状态和颜色定义,并且手动设置每个控件都很繁琐且难以100%正确使用!

是否有一种简单的方法可以在单个控件上设置暗色或浅色主题?

4 个答案:

答案 0 :(得分:5)

令人惊讶的是,似乎没有提到的解决方案只是使用 RequestedTheme =" Dark" RequestedTheme =" Light" 对个别控制元素。

我为应用程序执行此操作,我需要将一些appbarbuttons设置为暗设置(白色前景) - 因为Foreground属性未将圆圈和字形本身都设置为白色:

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

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

答案 1 :(得分:4)

对于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附加到样式名称和主题画笔定义中!您可以通过查找和替换"ThemeBrush}" =&gt;来执行此操作。 CustomStyles.xaml文件中的"ThemeBrushDark}"

现在你可以像这样创建一个黑暗主题的文本块:

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

当然,您也可以将此技术用于任何其他类型的控件。有点乏味,但结果是正确的,并不像手动定义每种颜色那么糟糕!

这里没有任何魔力。我们只是定义一些颜色并覆盖默认样式,我们将其复制粘贴并修改为使用我们的颜色。

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

我在设计我的应用程序“联系簿”时也遇到了同样的问题,因为我也希望在Dark和amp;之间进行更改。光主题。对于你的问题:“如何在C#/ XAML Windows应用商店(Metro UI)应用中混合使用Light和Dark主题?”,我有一个极好的解决方案。

  • 我制作了两个相同代码的页面。相同的内容。我将这两个页面添加到另一个上面,然后我在这两种主题之间做了一个动态的变化Light&amp;暗。我给了用户一个选项,他们是想要Dark布局还是Light布局&amp;根据用户的选择,我已经应用了主题。我在这种情况下取​​得了成功。

第二个解决方案:

  • 如果您想要应用程序的动态外观,那么您就拥有了 制作自己的静态布局类型然后你可以绑定你的 静态资源到您要应用那种类型的页面 风格。
如果你在这里找不到你的答案,请原谅,但我认为这可能会帮助你在“黑暗”和“黑暗”之间动态变化。在您的win 8 metro app中设置“Light”主题