Binding Image Source to Page

Question

I'm trying to get an image to appear inside of an Image in a UWP app so that I can display the selected image from an image picker to the end user. I can tell that current file is being set properly based on the user picking an image via filepicker, but nothing displays on the form. Can anyone help?

MainPage.xaml

        <Border Grid.Row="1" BorderBrush="WhiteSmoke" BorderThickness="2" Margin="5">
            <Image Source="{Binding CurrentFile}" Stretch="Fill" />
        </Border>

MainPageViewModel.cs

    public StorageFile CurrentFile {
        get
        {
            return _currentFile;
        }
        set
        {
            SetValue(ref _currentFile, value);
        }
    }

Answer 1

You can use a binding converter as mentioned in a comment to the question, or you change the type of your view model property to ImageSource:

public ImageSource CurrentImage
{
    get { return currentImage; }
    set { SetValue(ref currentImage, value); }
}

You would then create a BitmapImage from a StorageFile and assign it to the property like this:

var bitmap = new BitmapImage();
await bitmap.SetSourceAsync(await file.OpenReadAsync());
CurrentImage = bitmap;

---

As you are mentioning an "image picker" in your question, you may use the above code like this:

var picker = new FileOpenPicker
{
    SuggestedStartLocation = PickerLocationId.PicturesLibrary
};
picker.FileTypeFilter.Add(".jpg");
picker.FileTypeFilter.Add(".jpeg");
picker.FileTypeFilter.Add(".png");

var file = await picker.PickSingleFileAsync();
if (file != null)
{
    var bitmap = new BitmapImage();
    await bitmap.SetSourceAsync(await file.OpenReadAsync());
    viewModel.CurrentImage = bitmap;
}