Xamarin Forms Image doesn't get shown

Question

I have a problem. I want to use an IconView to change the color of an Image, so I use this project: https://github.com/andreinitescu/IconApp.

Now I added the Renderers in both IOS and Android and I added the IconView.cs class to the project. In my xaml I am trying to use the following code:

<controls:IconView Source="ledstrip" Grid.RowSpan="2" Grid.Column="0" Margin="5" Foreground="Red" />

But when I run my app, nothing shows up and I have no clue what I am doing wrong? If I create the following Image:

<Image Source="ledstrip" Grid.RowSpan="2" Grid.Column="0" Margin="5" />

The image gets shown!

Here is my full XAML:

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:controls="clr-namespace:Bluepixel.Tools"
             mc:Ignorable="d"
             x:Class="Bluepixel.Pages.Devices">

    <StackLayout Orientation="Vertical">
        <ListView ItemsSource="{Binding knownDeviceList}" SelectionMode="None" RowHeight="90" ItemTapped="device_Clicked" x:Name="MyListView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <ViewCell.ContextActions>
                            <MenuItem Command="{Binding Path=BindingContext.DeleteDevice, Source={x:Reference MyListView}}}"
                    CommandParameter="{Binding Id}"
                    Text="Delete" IsDestructive="True" />
                        </ViewCell.ContextActions>

                        <AbsoluteLayout HeightRequest="70" Margin="20,10,20,10">
                            <StackLayout Opacity="0.3" BackgroundColor="White"
                                    AbsoluteLayout.LayoutBounds="0,0,1,1" 
                                    AbsoluteLayout.LayoutFlags="All" />
                            <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" 
                                    AbsoluteLayout.LayoutFlags="All">
                                <Grid RowSpacing="0">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="35" />
                                        <RowDefinition Height="35" />
                                    </Grid.RowDefinitions>

                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="70" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="70" />
                                    </Grid.ColumnDefinitions>

                                    <controls:IconView Source="ledstrip" Grid.RowSpan="2" Grid.Column="0" Margin="5" Foreground="Red" />


                                    </Grid>
                            </StackLayout>
                        </AbsoluteLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

What am I doing wrong?

Answer 1

The library is not use to change the color of an Image, if you see the source code in the renderer in the iOS project, it changes the tintColor of UIImage in iOS:

var uiImage = new UIImage(Element.Source);
uiImage = uiImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate);
Control.TintColor = Element.Foreground.ToUIColor();
Control.Image = uiImage;

You can see the document and this thread to know how tint color works.

After some test, I found if you use a image which background is transparent, the image will show successfully with this plugin.

I uploaded a sample project here and there are several images you can test under resource folder. I think it's the same behavior in Android.