uwp 中的按钮图标着色

Question

我有一个按钮，里面有一个白色的图标。如何使用 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}" />

Answer 1

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

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

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

Answer 2

正如 Grace Feng 所提到的，您无法像 Android 允许的那样动态地为按钮（或任何元素）着色（至少不容易）。在 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 class 允许您选择合适的字体，其中包含您要显示的图标。 Windows 10内置了Segoe MDL2 Assets字体。您可以找到字形 here。它还尊重 FontSize 属性，这很好。

使用一个PathIcon

如果您想使用完全自定义的图标，此 class 允许您显示来自路径数据的图像。

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

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

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

Answer 3

您应该使用 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"/>

uwp 中的按钮图标着色

Button Icon tinting in uwp

xaml

win-universal-app

uwp

uwp-xaml