如何使用FFImageLoading在Xamarin-Forms中实现UWP自定义渲染器

Question

我找不到一个很好的例子来说明在xamarin表单的UWP自定义渲染器中使用FFImageLoading，很好的例子是网站只在android和ios中使用。我的主要问题是如何在UWP资源中使用这个Image类，如果我理解正确的话，应该在PCL项目中使用CachedImage。那么我应该如何继续呢？ImageService的高级使用并没有详细说明这一点。我可能不明白一些事情。提前谢谢。

这是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>

​

图像源来自我视图模型中存储的图像url

Answer 1

我的主要问题是如何在UWP资源中使用此图像类

如果你想自定义图像渲染器。您可以展开xamarin图像的属性。

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); }
    }

}

您还可以调用LoadUrl在自定义图像渲染中为本机控件设置图像。

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