uwp 中的按钮图标着色答案

【问题标题】：Button Icon tinting in uwpuwp 中的按钮图标着色
【发布时间】：2016-10-05 17:07:58
【问题描述】：

我有一个按钮，里面有一个白色的图标。如何使用 XAML 更改图标的颜色？

Android 支持像这样为 ImageView 着色：

<ImageView android:layout_width="@dimen/toolbar_icon_size" android:layout_height="@dimen/toolbar_icon_size" android:src="@drawable/btn_home" android:tint="@{@android:color/black}" />

如何在 XAML/UWP 中执行此操作？

我的代码

资源文件：

 <Image x:Key="icon_home" Stretch="Fill" Source="ms-appx:///Assets/ToolbarIcons/drawable-xhdpi/btn_home.png"/>

页面文件：

<UserControl.Resources>
    <ResourceDictionary Source="ms-appx:///Resources/Images.xaml" />
</UserControl.Resources>

<Button Width="40" Height="40" Content="{StaticResource icon_home}" />

【问题讨论】：

图标是一个图像文件，所以你不能（轻易地）改变它的颜色。您可能最好使用带有几何图形的路径作为图标。
@Clemens 谢谢，但我如何使用路径，我不知道如何使用它来解决这个问题。这在像

标签： xaml win-universal-app uwp uwp-xaml

【解决方案1】：

您应该使用 BitmapIcon 代替 od Image。这样你就不必使用向量，但你可以给它着色。您不必使用完整路径“ms-appx:///Assets/ToolbarIcons/drawable-xhdpi”，而只需键入“Assets/...”

<BitmapIcon x:Name="icon_home" UriSource="Assets/ToolbarIcons/drawable-xhdpi/btn_home.png" Foreground="Red"/>

【讨论】：

【解决方案2】：

正如 Grace Feng 所提到的，您无法像 Android 允许的那样动态地为 Button（或任何元素）着色（至少不容易）。在 UWP 中，通常最好使用矢量资源而不是位图，因为它们可以缩放到任何分辨率而不会丢失清晰度，并且可以动态着色。

我有一些替代建议：

使用SymbolIcon

<Button Foreground="Red">
    <SymbolIcon Symbol="Home"/>
</Button>

您可以从Symbol 枚举中选择要显示的图像。 UWP 附带了许多合适的图标可供选择。 SymbolIcon 的前景将继承自 Button。

关于 SymbolIcon 的一个烦人的事情是，如果你想改变它的大小，你需要将它包裹在一个 Viewbox 中并设置 Viewbox 的大小。

使用FontIcon

<Button Foreground="Red" FontSize="30">
    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE80F;"/>
</Button>

FontIcon 类允许您选择包含要显示的图标的合适字体。 Windows 10 带有内置的 Segoe MDL2 Assets 字体。你可以找到字形here。它还尊重 FontSize 属性，这很好。

使用PathIcon

如果你想使用一个完全自定义的图标，这个类允许你显示来自路径数据的图像。

<Button Foreground="Red">
    <PathIcon Data="M0,20 L10,0 L20,20 Z" Width="20" Height="20"/>
</Button>

您需要提供定义图标几何图形的path markup syntax。这与 SVG 图像中使用的标记基本相同，因此从简单的 SVG 资产中获取这些信息应该不难。

您还需要使用 Viewbox（或 RenderTransform）来更改其大小。

【讨论】：

有没有办法填充SymbolIcon的图标，即用颜色填充家？
@ShimmyWeitzhandler 除非有填充版本的主页图标，否则没有。

【解决方案3】：

正如@Clemens 所说，您的图标是一个图像文件，有很多方法可以更改其颜色，但我认为最简单的方法是将这个图像源替换为另一个。

我看到你的评论，也许你想要的是将图像变成白色和黑色，在 UWP 中没有像在 Andriod 中那样简单的方法，如果你坚持使用图像并在代码中更改其颜色，那么这里是一种方法，可以参考我的answer here。

另一个相当简单的方法是你可以使用Lumia Imaging SDK 3.0，GrayscaleEffect 是你所需要的。

【讨论】：