5

Currently, I am developing a Xamarin.Forms PCL application for Android and iOS. In one of my pages I define a ListView. The template for the ListView.ItemTemplate displays an icon using <Image Source="some_Icon.png" />. The icon displays as expected (black) but I have not found a way to set the color.

I would like to colorize this icon based on logic in my ViewModel.

I have searched for answers both through the Documentation and StackOverlflow to no avail.

  1. Is there a better way to display and style icons from a Xamarin.Forms PCL project?

  2. Does Xamarin.Forms require a set of resource/image files for every possible color I might use?

Bolezee
  • 117
  • 1
  • 1
  • 12
  • You can't. You could try making it transparent and setting a background color. Or you can try making it a font (like FontAwesome) and setting the color. Otherwise you would need different sets of icons for different colors. – Jason Jun 24 '16 at 18:42
  • possible duplicate, answered here http://stackoverflow.com/questions/37860955/add-overlay-color-to-an-image-using-xamarin-forms/37861038#37861038 – George Papadakis Jun 25 '16 at 23:53
  • @Jason Thanks for your suggestions. I haven't had a chance yet to try them out but I will let you know my results. – Bolezee Jun 26 '16 at 03:05
  • @George Papadakis Thanks for the link. I will give it a try. – Bolezee Jun 26 '16 at 03:10
  • @Jason Your suggestion was helpful and I have essentially implemented something similar using [Iconize for Xamarin.Forms](https://github.com/jsmarcus/Xamarin.Plugins/tree/master/Iconize) – Bolezee Jun 27 '16 at 14:40
  • @GeorgePapadakis I opted for [Iconize](https://github.com/jsmarcus/Xamarin.Plugins/tree/master/Iconize) over [IconView](https://github.com/andreinitescu/IconApp) mainly because Iconize appears to be more actively maintained and supports several icon sets such as [Font Awesome](http://fontawesome.io/) and [Material Design Icons](https://design.google.com/icons/). – Bolezee Jun 27 '16 at 14:56

1 Answers1

4

I solved my problem with Iconize for Xamarin.Forms. I implemented my solution based off the Iconize sample code below.

<?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>

In my case, I simply had to replace my original <Image .../> element and replace it with <iconize:IconImage HeightRequest="20" Icon="fa-circle" IconColor="{Binding CircleColor}" WidthRequest="20" />.

In my ViewModel, I added the CircleColor property to set the icon color as needed based on my logic.

Bolezee
  • 117
  • 1
  • 1
  • 12
  • IconImage is a good solution but I'd recommend using an IconLabel as it is only text and doesn't have the overhead of a bitmap. – Jeremy Jun 01 '17 at 18:31