MVVMCross - Image Binding in iOS Xamarin

Question

In my ViewModel, I receive an Image URL in the property : UserImage

In my ViewController using ‘SDWebImage’ nuGet package I’m able to bind my image

Img_UserImage.SetImage(new NSUrl(ViewModel.UserImage));

Now, since I receive image Url in my view model How do I bind the image URL to my UIImage through MvvMCross Binding????

private void SetUpBinding()
    {
     var set = this.CreateBindingSet<UserProfileViewController, UserProfileViewModel>();
     set.Bind(Img_UserImage).For(v => v.Image).To(vm => vm.UserImage); // Here I need to bind it.
     set.Apply();
    }

Would really appreciate the help…Thanks

Cheesebaron Cheesebaron · Accepted Answer · 2020-09-15T13:34:03

You would have to create your own TargetBinding class that knows how to bind this View.

This would look something like:

public class SDWebImageTargetBinding : MvxTargetBinding
{
    protected UIImageView ImageView => Target as UIImageView;

    public override Type TargetType => typeof(string);

    public override MvxBindingMode DefaultMode => MvxBindingMode.OneWay;

    public SDWebImageTargetBinding(object target)
        : base(target)
    {
    }

    public override void SetValue(object value)
    {
        if (ImageView == null) return;

        if (value is string stringValue)
        {
            ImageView.SetImage(stringValue);
        }        
    }
}

Then in Setup.cs you would register it by overriding FillTargetFactories:

protected override void FillTargetFactories(IMvxTargetBindingFactoryRegistry registry)
{
    base.FillTargetFactories(registry);

    registry.RegisterCustomBindingFactory<UIImageView>("ImageUrl", view => new SDWebImageTargetBinding(view));
}

Then you can bind with:

using var set = this.CreateBindingSet...
set.Bind(imageView).For("ImageUrl").To(vm => vm.UserImage);

MVVMCross - Image Binding in iOS Xamarin

1 Answers