在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

正如格雷斯冯所提到的，你无法像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）来更改其大小。

Answer 2

您应该使用BitmapIcon而不是图像。这样您就不必使用向量，但可以对其进行着色。您不必使用完整路径“ms-appx：/// Assets / ToolbarIcons / drawable-xhdpi”，而只需输入“Assets /..."

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

Answer 3

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

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

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