Xamarin Forms MVVM (Prism) with Media.Plugin - How to get a taken picture from device storage

Question

I am using Xamarin Forms PCL (MVVM Prism) with MediaPlugin (https://github.com/jamesmontemagno/MediaPlugin).

I have a viewModel with a public property called ImagePath

private string imagePath;
public string ImagePath
{
   get { return imagePath; }
   set { SetProperty(ref imagePath, value, "ImagePath"); }
}

in my XAML i have:

When i set a image url (from web) to ImagePath property, it works without problems. (I am setting an string like this: "http://www.myaddress.com/myimage.jpg")

But, when I take a picture using the following code (MediaPlugin):

var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
            {
                Directory = "Sample",
                Name = "test.jpg"
            });

ImagePath = file.Path;

// also tried: ImagePath = ImageSource.FromFile(file.Path).toString();

the var file.Path receives a value like this:

"/storage/emulated/0/Android/data/{APPNAME}.Android/files/Pictures/{DIRECTORYNAME}/{IMAGENAME}"

With this file.Path value then i'm setting ImagePath property: ImagePath = file.Path;

But the taken image does not appear on the screen.

I also have tried to use the Image.Source property as suggested in MediaPlugin docs, however i have not reached the result i want.

I also have tried the following:

Public property into VM:

private Image image = new Image();
        public Image Image
        {
            get { return image; }
            set { SetProperty(ref image, value, "Image"); }
        }

Xaml:

After set file value (as showed before):

image.Source = ImageSource.FromStream(() =>
                    {
                        var stream = file.GetStream();
                        file.Dispose();
                        return stream;
                    });

Is there any way to make it work? Thanks!!

user_4149 · Answer

The Media Plugin returns a MediaFile.

I store this in a class I use for storage and display

public class IncidentImage
{
    [PrimaryKey, AutoIncrement]
    public int Id { get; set; }

    public int IncidentDetailsId { get; set; }

    public byte[] ImageBytes { get; set; }

    [Ignore]
    public ImageSource ImageSource
    {
        get
        {
            ImageSource retval = null;
            if (ImageBytes != null)
            {
                retval = ImageSource.FromStream(() => new MemoryStream(ImageBytes));
            }
            return retval;
        }
    }
}

Like this

    var incidentImage = new IncidentImage
    {
        ImageBytes = image.ToByteArray()
    };

image being the MediaFile returned by the plugin.

Then my XAML looks like this

You could also do it by moving the ImageSource code to a converter.

Xamarin Forms MVVM (Prism) with Media.Plugin - How to get a taken picture from device storage

2 Answers