How to implement a UWP Custom Renderer in Xamarin-Forms using FFImageLoading

Question

I cant find a good example about use of FFImageLoading in a UWP custom renderer for xamarin forms, good example sites use to focus in android and ios only. My main issue is how to use this Image Class in the UWP resource, CachedImage should be used in PCL project if i understand correctly. So how i should continue here? The advance use of ImageService does not detail this. I probably dont understand something. thanks in advance.

This is my View Cell in PCL:

<ViewCell>
<Grid RowSpacing="0" Padding="5,1,10,1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="60"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="30"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="32"></RowDefinition>
        <RowDefinition Height="32"></RowDefinition>
    </Grid.RowDefinitions>
    <ffimageloading:CachedImage Grid.Column="0" Grid.Row="0" Grid.RowSpan="2" Source="{Binding MyViewModel.Image}" Aspect="AspectFit" VerticalOptions="Center" LoadingPlaceholder = "resource://MyProject.Resources.loading.png" />
    <Label Grid.Column="1" Grid.Row="0" Text="{Binding MyViewModel.Name}" FontSize="16" TextColor="Red" FontAttributes="Bold" VerticalOptions="End"></Label>
    <Label Grid.Column="1" Grid.Row="1" Text="{Binding MyViewModel.Serie}" FontSize="11" TextColor="Gray" FontAttributes="Italic" VerticalOptions="Start"></Label>
    <ffimageloading:CachedImage x:Name="check" Grid.Column="2" Grid.Row="0" Grid.RowSpan="2" Source="{Binding MyViewModel.Own, Converter={StaticResource BoolToOwnImageSourceConverter}}}" Aspect="AspectFit" VerticalOptions="Center">
        <Image.GestureRecognizers>
            <TapGestureRecognizer
                Tapped="OnCheckTapped"
                Command="{Binding ChangeOwnCommand}"
                CommandParameter="{Binding .}"/>
        </Image.GestureRecognizers>
    </ffimageloading:CachedImage>
</Grid>
<ViewCell.ContextActions>
    <MenuItem Clicked="OnOwned"     CommandParameter="{Binding .}" Text="Got it!" />
    <MenuItem Clicked="OnNotOwned"  CommandParameter="{Binding .}" Text="Not Yet"    IsDestructive="True" />
</ViewCell.ContextActions>

Image source come from a image url stored in my view model

Do you want to implement custom image renderer with ffimageLoding? — Nico Zhu, Nov 03 '17 at 06:06
Yes, my listview > 1000 items with 2 image by each cell require it for a smooth load — Ricardo Alvarez Castillo, Nov 03 '17 at 11:25
@NicoZhu-MSFT it come from a image url stored in my view model, and loading image is stored in pcl as embedded resource — Ricardo Alvarez Castillo, Nov 06 '17 at 13:32

score 1 · Answer 1 · answered Nov 07 '17 at 05:07

My main issue is how to use this Image Class in the UWP resource

If you want to custom image renderer. You could expand an attribute for xamarin image.

public class CustomImage : Image
{
    public static readonly BindableProperty UriProperty = BindableProperty.Create(
propertyName: "Uri",
returnType: typeof(string),
declaringType: typeof(CustomImage),
defaultValue: default(string));

    public string Uri
    {
        get { return (string)GetValue(UriProperty); }
        set { SetValue(UriProperty, value); }
    }

}

And you could invoke LoadUrl to set image for native control in the custom image render.

protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
{
    base.OnElementChanged(e);
    var customImage = (CustomImage)Element;

    if (Control == null)
    {
        SetNativeControl(new Windows.UI.Xaml.Controls.Image());

    }
    if (e.OldElement != null)
    {

    }
    if (e.NewElement != null)
    {
        if (!string.IsNullOrEmpty(customImage.Uri))
        {
            ImageService.Instance.LoadUrl(customImage.Uri).FadeAnimation(true).Into(Control);
        }
        else
        {
            // do some stuff
        }
    }
}

i see, can you update it with the way of add a LoadingPlaceholder from LocalResource pls?, im using few ones as embedded resources — Ricardo Alvarez Castillo, Nov 15 '17 at 13:04

How to implement a UWP Custom Renderer in Xamarin-Forms using FFImageLoading

1 Answers1