How display picture taken with the camera in the view with mvvmcross vnext?

Question

I was able to access the camera and take a picture (with PictureChooser plugin), It store the picture in picture-library of android, I just want to display it on the screen and delete it (I don't need to store pictures) How can I do that ? (few lines of code are welcome :)) Thanks !

ps: maybe with File plugin of mvvmcross ?

edit: Thanks for your answer, I think the best way for me is to do a custom binding to bind a byte[] to a normal ImageView, I saw the sample for custom binding (textview and button) and I tried to make mine.

namespace Testa.Droid.Bindings
{
    class PictureBinding : MvxBaseAndroidTargetBinding
    {
        private readonly ImageView _imageView;

        public PictureBinding(ImageView imageView)
        {
            _imageView = imageView;
        }

        public override MvxBindingMode DefaultMode
        {
            get { return MvxBindingMode.OneWay; }
        }

        public override Type TargetType
        {
            get { return typeof (byte[]); }
        }

        public override void SetValue(object value)
        {
            var memoryStream = new MemoryStream((byte[])valyue);
            Bitmap bitmap = BitmapFactory.DecodeStream(memoryStream);
            _imageView.SetImageBitmap(bitmap);
        }
    }
}

In Setup.cs

protected override void FillTargetFactories(Cirrious.MvvmCross.Binding.Interfaces.Bindings.Target.Construction.IMvxTargetBindingFactoryRegistry registry)
    {
        base.FillTargetFactories(registry);

        registry.RegisterFactory(new MvxCustomBindingFactory<ImageView>("Picture", (imageView) => new PictureBinding(imageView)));
    }

In my ViewModel I have:

 public byte[] ImageData {
    get { return _imageData; }
    set { _imageData = value; RaisePropertyChanged(() => ImageData); }
 }

And now in my view I don't know how to use this custom binding

<ImageView
  android:id="@+id/image"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content" 
  local:MvxBind="Picture ??, Mode=TwoWay" />

mvvcross vNext|monodroid

note that @Livercool has solved this problem before - see http://stackoverflow.com/questions/14194546/mvvmcross-android-bind-image-from-byte - but didn't share the result. Hope you solve it and that you share the answer somewhere on gist.github.com, on twitter or on a blog :) — Stuart, Feb 16 '13 at 11:16

score 0 · Accepted Answer · edited May 23 '17 at 11:45

Uploading an image to a webservice is covered in uploading photo to a webservice with mvvmcross and mono touch

Showing an image in an ImageView is covered in Take/Select picture and show it in ImageView without saving first (using MvvmCross)

To find these hits I used the StackOverflow search box with the words "mvvmcross" and "picture" - https://stackoverflow.com/search?q=mvvmcross+picture

Update after your update (please try not to do this - please try to ask new questions - you can always cross-reference them).

I've changed the binding code in your update just a bit - it had strings and Streams as well as byte[] - so I brought everything down to the byte[] level and then added a byte[] property on the ViewModel.

To use the binding you should now be able to use:

 <ImageView
     android:layout_width="200dp"
     android:layout_height="200dp"
     local:MvxBind="Picture ImageBytes"
     />

Note that you don't need TwoWay - TwoWay is for when the View needs to send changes to the ViewModel - e.g. when a user enters text into a textbox.

Ok, thanks very much for your help. I've just to solve wrong orientation of the picture at screen (the image should be displayed with an orientation of 90 ° to the right). — liotims, Feb 18 '13 at 12:14

How display picture taken with the camera in the view with mvvmcross vnext?

1 Answers1