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

Question

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

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

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

是否有更好的方法来显示和设置 Xamarin.Forms PCL 项目中的图标样式？
Xamarin.Forms 是否需要一组 resource/image 文件来满足我可能使用的每种可能的颜色？

Answer 1

我用 Iconize 为 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 属性以根据我的逻辑根据需要设置图标颜色。

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

How to change icon color in Xamarin.Forms xaml page?

xaml

prism

xamarin.ios

xamarin.android

xamarin.forms