如何更改 Xamarin.Forms xaml 页面中的图标颜色？

Question

目前，我正在为 Android 和 iOS 开发 Xamarin.Forms PCL 应用程序。在我的其中一个页面中，我定义了一个 ListView。的模板ListView.ItemTemplate使用 显示一个图标<Image Source="some_Icon.png" />。图标按预期显示（黑色），但我还没有找到设置颜色的方法。

我想根据我的 ViewModel 中的逻辑为这个图标着色。

我已经通过文档和 StackOverlflow 搜索了答案，但无济于事。

1. 有没有更好的方法来显示 Xamarin.Forms PCL 项目中的图标并为其设置样式？

2. Xamarin.Forms 是否需要为我可能使用的每种可能的颜色设置一组资源/图像文件？

Answer 1

我使用Iconize for Xamarin.Forms 解决了我的问题。我根据下面的 Iconize 示例代码实现了我的解决方案。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:iconize="clr-namespace:FormsPlugin.Iconize;assembly=FormsPlugin.Iconize"
         x:Class="Iconize.FormsSample.Page1"
         Title="{Binding FontFamily}">

  <ContentPage.ToolbarItems>
    <iconize:IconToolbarItem Command="{Binding ModalTestCommand}" Icon="fa-500px" />
    <iconize:IconToolbarItem Command="{Binding VisibleTestCommand}" Icon="fa-500px" IconColor="Red" />
    <iconize:IconToolbarItem Command="{Binding VisibleTestCommand}" Icon="fa-500px" IsVisible="{Binding VisibleTest}" />
  </ContentPage.ToolbarItems>
  <ListView CachingStrategy="RecycleElement" ItemsSource="{Binding Characters}">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <StackLayout Orientation="Horizontal">
            <iconize:IconImage HeightRequest="20" Icon="{Binding Key}" IconColor="Blue" WidthRequest="20" />
            <iconize:IconImage HeightRequest="20" Icon="{Binding Key}" BackgroundColor="Blue" IconColor="Yellow" WidthRequest="20" IconSize="10" />
            <iconize:IconButton FontSize="20" Text="{Binding Key}" TextColor="Red" WidthRequest="48" />
            <iconize:IconLabel FontSize="20" Text="{Binding Key}" TextColor="Green" VerticalTextAlignment="Center" />
            <Label Text="{Binding Key}" VerticalTextAlignment="Center" />
          </StackLayout>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

就我而言，我只需替换原始<Image .../>元素并将其替换为 <iconize:IconImage HeightRequest="20" Icon="fa-circle" IconColor="{Binding CircleColor}" WidthRequest="20" />.

在我的 ViewModel 中，我添加了 CircleColor 属性，以根据我的逻辑根据需要设置图标颜色。