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);
        }
    }

You will need a converter and probably play little with async. There is a chance that [this answer](http://stackoverflow.com/a/26150727/2681948) may help you. — Romasz, Dec 11 '15 at 06:37

Clemens · Accepted Answer · 2015-12-13T19:20:22.803

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;
}

sujith karivelil · Answer 2 · 2015-12-11T01:43:49.547

1

Here the problem is,The type StorageFile cannot be converted as Source for an image.So You have to use either a ValueConverter or change the type StorageFile to Image

so the property will be like the following:

private Image _CurrentFile;    
public Image CurrentFile
{
    get
    {
       return _CurrentFile;
    }
}

where Image is under System.Windows.Controls namespace

edited Dec 11 '15 at 01:43

answered Dec 11 '15 at 01:23

sujith karivelil

28,671
6
55
88

I made a mistake, "not mismatch", the comment cannot be edited, so removed. – Lei Yang Dec 11 '15 at 01:28

score 1 · Answer 3 · answered Dec 11 '15 at 21:18

Per @Clemens, I had to change the type of the property to an image source then load it asynchronously on the UI thread to get the image to display.

The answer in this case for anyone trying to load an image as the source of a WPF Image type is:

Run it via the UI Dispatcher in your StorageFile set method:

//Acquire storagefile via a picker or something
public StorageFile CurrentFile
{
    get { return currentImage; }
    set {
        SetValue(ref currentImage, value); 
        CoreWindow.GetForCurrentThread().Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => SetCurrentImageAsync(value));
    }
}

Asynchronously load the image to the CurrentImage property

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

public async Task SetCurrentImageAsync(StorageFile file) {
    var bitmap = new BitmapImage();
    await bitmap.SetSourceAsync(await file.OpenReadAsync());
    this.CurrentImage = bitmap;
}

Binding Image Source to Page

3 Answers3