Images can not be set from ViewModel's constructor

[Seekuhnetz]

Current behavior

It is not possible to set an ImageSource in the constructor of a ViewModel and bind it to the View.

For example:
In the MainView:
<Image Source="{Binding ImageSourceFromConstructor}" Width="100" />
In the MainViewModel:

public MainViewModel()
{
    ImageSourceFromConstructor = new BitmapImage(new Uri("ms-appx:///ImageException/Assets/Images/dotnet_bot.png"));
}

A ComException will be thrown.

Expected behavior

It should be possible to set the ImageSource from the ViewModel at creation?

How to reproduce it (as minimally and precisely as possible)

1. Create a new project with the Uno App Template.
2. Add the snippets i provided before.

ZIP:
ImageException.zip

Workaround

Of course you could not use binding:
<Image Source="ms-appx:///ImageException/Assets/Images/dotnet_bot.png" Width="100" />

Or you could use this workaround with events in the code behind:

public MainPage()
{
    this.InitializeComponent();
    LayoutUpdated += MainPage_LayoutUpdated;
}

// You could als try using the "Loaded" Event however i noticed that it is sometimes not working.
// This is the case when the Page loads faster than the ViewModel and the ViewModel is still null.
private void MainPage_LayoutUpdated(object sender, object e)
{
    if (DataContext is MainViewModel viewModel)
    {
        if (viewModel.SetImageSourceCommand.CanExecute(null))
        {
            viewModel.SetImageSourceCommand.Execute(null);
            // Unsubscribe once the Command was called:
            LayoutUpdated -= MainPage_LayoutUpdated;
        }
    }
}

In the ViewModel you will need to set the ImageSource from a RelayCommandMethod:

[RelayCommand]
public void SetImageSource()
{
    ImageSourceFromEvent = new BitmapImage(new Uri("ms-appx:///ImageException/Assets/Images/dotnet_bot.png"));
}

Works on UWP/WinUI

None

Environment

No response

NuGet package version(s)

No response

Affected platforms

Windows

IDE

Visual Studio 2022

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

Or is there maybe a better and working way to set the images from the ViewModel?

[jeromelaban]

Thanks for the report. Just to be sure, the behavior you're seeing is in the .Windows head, correct? If so, this is an expected behavior and a different way of doing what you want has to be used.

[Seekuhnetz]

Thank you.
Yes, i am seeing it on the WinUI 3 Head.
What would be recommended way to bind pictures from ViewModel then and can we add it to the docs here?
I tried using StorageFile.GetFileFromApplicationUriAsync but can not use it in the constructor because it is async.

[Seekuhnetz]

@jeromelaban what would be the recommended way to bind a picture from a ViewModel?

[jeromelaban]

The exception you're getting is caused by the constructor of the MainViewModel being called from a background thread.

It's generally a good idea to avoid manipulating UI elements from a ViewModel, and rather provide primitives like strings or similar to x:Bind expressions to convert the primitive to a UI object like BitmapImage.

[LuisAlfredo92]

Hello, sorry for the necroposting
I tried to do something similar and this worked for me

#if __HAS_UNO__
        .
        .
        .
#else
        MemoryStream ms = new();
        Image.Load(imageStream).SaveAsBmp(ms);
        ms.Position = 0;
        var randomAccessStream = ms.AsRandomAccessStream();
        MainThread.BeginInvokeOnMainThread(async void () =>
        {
            DecodedImage = new BitmapImage();
            await DecodedImage.SetSourceAsync(randomAccessStream);
            randomAccessStream.Dispose();
            ms.Dispose();
        });
#endif

Inside those streams are the bytes from the decoded image, but the main part is that probably you need to do it inside MainThread.BeginInvokeOnMainThread for Windows