如何在Xamarin.Forms xaml页面中更改图标颜色?

时间:2016-06-24 18:37:41

标签: xaml xamarin.ios xamarin.android xamarin.forms prism

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

我想根据ViewModel中的逻辑对此图标进行着色。

我通过Documentation和StackOverlflow搜索了答案,但无济于事。

  1. 有没有更好的方法来显示和设计Xamarin.Forms PCL项目中的图标?

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

1 个答案:

答案 0 :(得分:4)

我用How to count the number of set bits in a 32-bit integer?为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属性,根据我的逻辑根据需要设置图标颜色。