Windows Phone 8 中的自动暗/亮图标支持答案

【问题标题】：Automatic Dark/Light Icon Support in Windows Phone 8Windows Phone 8 中的自动暗/亮图标支持
【发布时间】：2012-12-08 00:21:15
【问题描述】：

我认为这是一个非常普遍的问题，但我找不到适合我的解决方案。众所周知，WP 支持深色和浅色主题。用户可以更改主题，并且有一些方法可以覆盖他的决定并以您选择的颜色主题显示所有内容。但是，我只是想对这两种主题类型做出反应，我想以正确的颜色显示图标。

如果您使用应用程序栏，您可以从许多内置图标中进行选择，这些图标会自动从浅色变为深色，反之亦然。

为什么不支持普通图片？例如：我想显示一个电话图标。我从内置图标中选择了一个，并将其从 Microsoft SDK 文件夹复制到我项目的 Image 文件夹中。如果用户使用深色主题，一切都会好起来的，因为白色电话图标将在黑色背景上可见。但如果他切换到浅色主题，图标将不可见，因为它是白底白字。

我完全了解文本框或背景颜色的样式资源，它们使用手机的强调色或主题色。但为什么不支持我作为图像添加到 XAML 页面的简单图标？

当然，如果用户处于深色或浅色模式，我可以在页面的构造函数中检测到。然后我会加载黑色或白色版本的电话图标。但是每次我访问该页面时都会进行此检查并减慢一切。每次添加主题感知图像时，手动添加主题检查也很烦人。

是否有任何解决方案仅适用于 XAML？或者至少易于维护？为什么我不能从一开始就使用 SDK 中的内置图像？它们已经提供深色和浅色版本，并且已经在应用栏中使用。

【问题讨论】：

How do I use the icons provided with the WP7 sdk properly? 的可能重复项
是的，我也看到过这个问题，但我想避免使用 opacityMask 的解决方案，并且必须定义每个按钮状态（如果我将图像用作可点击）

标签： windows-phone-7 windows-phone-8 windows-phone

【解决方案1】：

如果您希望图标在操作栏中发挥作用，只需为白色（如果是深色主题）和黑色（如果是浅色主题），那么您可以将图像作为不透明蒙版添加到矩形中，如下所示：

<Rectangle Fill="{StaticResource PhoneForegroundBrush}" Width="48" Height="48" >
    <Rectangle.OpacityMask>
        <ImageBrush ImageSource="/Images/my.icon.png" />
    </Rectangle.OpacityMask>
</Rectangle>

其中 my.icon.png 是白色图像，就像您可以为操作栏选择的那样。

【讨论】：

就是这样！最小的努力和最大的结果:) 虽然我认为 OpacityMask 方式会更复杂，但它似乎只适合黑色/白色图标。这种 Rectangle 和 OpacityMask 的组合可以用于单一样式定义吗？我想为我使用的所有图标创建一个可以在整个应用程序中使用的单一样式。另一个问题：不同颜色的图像呢？然后我会选择 Erno 的解决方案，因为这仅适用于黑白图像。
太棒了，我已经用了 3 次了，每次我都必须再次谷歌搜索 :)
Windows Phone 8.1 (WinRT) 怎么样？
@JohnCroneh：是的，OpacityMask 不适用于通用应用程序，根据您的情况和图像类型，有几种不同的方法可以实现相同的结果，我不久前发现了这篇有用的博客文章：visuallylocated.com/post/2014/07/07/…，我在为我的通用应用程序解决此问题时使用。

【解决方案2】：

您可以使用矢量图形而不是位图图标，并使用可识别主题的画笔来绘制它们。

如果您希望应用响应主题切换，您需要以任何方式响应它。

我在 Views 的基类中添加了一个属性，该属性返回选定的主题。这样我就可以使用/绑定到该值。

还可以使用 ValueConverter 将资源的逻辑名称转换为主题特定资源的名称。

编辑

看看这个：Custom light/dark theme resources on Windows Phone 7

【讨论】：

我不想创建新图形，因为内置对我来说已经足够了。但是我已经看到了有关如何在 xaml 中创建可以使用的矢量图形的说明。但这又是太多的工作，尤其是当图形已经存在时：/我尝试了转换器解决方案但没有成功。但这似乎是我眼中最实用的解决方案。你能举个例子，你是如何解决这个问题的吗？
我添加了一个非常有用的链接，允许您将明暗资源放在单独的资源文件中并加载它们。
我尝试了您的链接，但我坚持添加 ThemeResourceDictionary。要么它不存在于命名空间中，要么“每个字典条目都必须有一个关联的键”。
@MarkusRudel - 用这么少的信息很难调试。在我看来，您以错误的方式添加了资源字典。
你是对的，但评论框中的空间太小了。也许我会在另一个问题中问这个。

【解决方案3】：

检测主题（我认为Supporting dark and light themes 提供了最好的解决方案），然后相应地设置图像。如果您经常这样做，那么您可以很容易地创建一个自定义控件，您可以在其中提供两个图像源并使用正确的一个。

编辑：这是关于此主题的另一篇好文章。 New Screen Resolutions

【讨论】：

正如我在原始问题中所写：我正在寻找一种不需要代码来决定应该加载和分配什么图像的解决方案。
这是一个程序。一切都需要代码。 ;) 必要的代码可以很容易地封装在 XAML 标记可重用的东西中。我建议过。
是的，没错，但我想尽可能接近原始类和功能。当然可以编写自己的控件来满足您的需求，但我一直在寻找像 Johan Falk 建议的简单解决方案:) 我仍然不明白为什么只有文本和应用程序栏图标的主题支持而不是整个系统。

【解决方案4】：

您选择一个白色前景图标使用它。它适用于 Light 和 Dark 主题。这就是我一直在做的。

【讨论】：

嗯？如果你在白色背景上使用白色图标，你将看不到任何东西......白色图标后面必须至少有一个浅灰色背景才能看到任何东西，否则对比度会太低。

【解决方案5】：

Coding 4 Fun 控制工具包包含一个圆形按钮，可模仿应用程序栏按钮，包括根据主题更新前景色。代码是开源的，所以也许你可以在那里找到答案。或者，作为一个 hack，您可以使用 RoundButton 控件，关闭边框，并且不提供 Click 事件。

【讨论】：