mvvmcross videoview URL binding

Question

I am new in MVVMCross and currently struggling with a binding issue. Trying to bind the URL of an video with the VideoView component in android.

• Is there any Mvx.MvxBind tag that can do it automatically?
• Otherwise, how can i pass the URL from the MvxViewModel to the MvxActivity?

If the first option is not possible i will try to get the URL and play the video as explained here: http://developer.xamarin.com/recipes/android/media/video/play_video/

Thanks in advance.

Answer 1

MvvmCross is very flexible. What you're asking for is not something that is built-in, but you can easily extend MvvmCross to add support for it.

MvvmCross has what are called Binding Builders. This is where you register custom Target Bindings. A binding takes a type, like VideoView, and a property name like "VideoUri".

When MvvmCross sees a binding attribute like: local:MvxBind="VideoUri MyVideoUri" it will take the property value from MyVideoUri, then call the custom binding, which ulimiately will call videoView.SetVideoURI().

Here are the steps you need to take.

1) In your Android project, edit Setup.cs and add the following, to register your custom binding builder.

    protected override MvxAndroidBindingBuilder CreateBindingBuilder()
    {
        return new MyAndroidBindingBuilder();
    }

2) Create a custom binding builder that subclasses the default Android binding builder:

public class MyAndroidBindingBuilder : MvxAndroidBindingBuilder
{
    protected override void FillTargetFactories(IMvxTargetBindingFactoryRegistry registry)
    {
        base.FillTargetFactories(registry);

        registry.RegisterCustomBindingFactory<VideoView>("VideoUri",
                                             videoView => new MvxVideoViewUriTargetBinding(videoView));

    }
}

3) Create a custom target binding for type VideoView and property "VideoUri":

public class MvxVideoViewUriTargetBinding : MvxAndroidTargetBinding
{
    public MvxVideoViewUriTargetBinding(object target) : base(target)
    {
    }

    public override Type TargetType
    {
        get { return typeof (string); }
    }

    protected override void SetValueImpl(object target, object value)
    {
        var videoView = (VideoView) target;
        videoView.SetVideoURI(Uri.Parse((string)value));
    }
}

To use it in your layout, simply create the following:

1) In your layout.xml

<VideoView
    android:id="@+id/SampleVideoView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    local:MvxBind="VideoUri MyVideoUri" />

2) In your ViewModel, add a property for MyVidoeUri

    public string MyVideoUri
    {
        get { return "http://ia600507.us.archive.org/25/items/Cartoontheater1930sAnd1950s1/PigsInAPolka1943.mp4"; }
    }

3) In you View, you can start the video like this:

    protected override void OnCreate(Bundle bundle)
    {
        base.OnCreate(bundle);
        SetContentView(Resource.Layout.MyLayout);

        // SetVideoURI() already called via binding
        var videoView = FindViewById<VideoView>(Resource.Id.SampleVideoView);
        videoView.Start();
     }

Look at the source for MvxAndroidBindingBuilder to see the current bindings. https://github.com/MvvmCross/MvvmCross/blob/bbf9a2ac76e74d9404f4b57036c6e29dfe2cc6c3/Cirrious/Cirrious.MvvmCross.Binding.Droid/MvxAndroidBindingBuilder.cs

Hope this helps.