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

Question

我找不到一个关于在用于 xamarin 表单的 UWP 自定义渲染器中使用 FFImageLoading 的好例子，很好的例子网站只专注于 android 和 ios。我的主要问题是如何在 UWP 资源中使用这个 Image Class，如果我理解正确的话，应该在 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 资源中使用这个 Image Class

如果你想自定义图像渲染器。您可以扩展 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
        }
    }
}