MVUX Command for new window throws exception

[sosuisen]

Current behavior

Multi-window support is a new feature in v5.2.
Creating a new window in MVVM architecture is fine.
However, the MVUX command to create a new window throws an exception.
The exception is System.Runtime.InteropServices.COMException (in WinRT.Runtime.dll) when WinAppSDK,
System.InvalidOperationExcption (in Uno.UI.dll) if Desktop.

Expected behavior

Can create a new window using a method called by MVUX command.

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

MainPage.xaml

<Page x:Class="MultiWindowTestXamlMVUX.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:MultiWindowTestXamlMVUX"
      xmlns:um="using:Uno.Material"
      Background="{ThemeResource BackgroundBrush}">
  <Page.DataContext>
    <local:BindableMainModel />
  </Page.DataContext>
  <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
    <Button Command="{Binding OpenWindow}" Content="Open Window" />
  </StackPanel>
</Page>

MainModel.cs

namespace MultiWindowTestXamlMVUX;
internal partial record MainModel
{
    public void OpenWindow()
    {
        var window = new Window();
        window.Activate();
    }
}

Workaround

Use MVVM.

[MartinZikmund]

This problem occurs because the command is executing on non-UI thread and Window is a UI-thread bound class. @dr1rrb what is the recommended way to handle this situation in MVUX?

[francoistanguay]

Just to be clear, the pattern is is typically that a Model (MVUX or other) shouldnt know about the View layer, therefore shouldnt be able to call into windowing apis directly.

The recommended approach could be to introduce a "IWindowService" abstraction, that MVUX layer could call.

The WindowService implementation would do exactly what David recommends below and get an IDispatcher (or have access to DispatcherQueue) injected and call the proper new Windows().Activate()....

As to explain why this is happening, MVUX's command implementation makes sure to leave the UI thread asap for its execution to keep the UI thread free. If a State is updated that trickles back to the UI, it will make sure to jump back on the UI thread at the last responsible moment.

But if you call UI apis direclty in your commands, you need to take that responsibility explicitly.

[dr1rrb]

You need to get access to the dispatcher.

If you are using navigation from the extensions you can simply add an Uno.Extensions.IDispatcher parameter to your constructor to get it injected by the DI.

eg:

using Uno.Extensions;

namespace MultiWindowTestXamlMVUX;

internal partial record MainModel(IDispatcher Dispatcher)
{
    public ValueTask OpenWindow(CancellelationToken ct)
       => Dispatcher.ExecuteAsync(() => 
       {
            var window = new Window();
            window.Activate();
       }, ct);
}

If you are instantiating your model directly in the code behind of your page, you can simply pass the DispatcherQueue (still in the ctor).

[agneszitte]

@dr1rrb, @MartinZikmund should we add a bit more details in the current documentation please?

[sosuisen]

Thanks @dr1rrb and everyone here.
I understood the UI thread and Dispatcher. I have only been on the Uno platform for two days, but the following steps worked.
I opened "Uno Platform Template Wizard" > [3. Presentation] MVUX > [4. Markup] C# Markup > [6. Extensions] Select "Navigation : Regions" > [Create].
I have modified Presentation/MainModel.cs as follows

private IDispatcher Dispatcher;
public MainModel(
    INavigator navigator, IDispatcher Dispatcher)
{
    _navigator = navigator;
    this.Dispatcher = Dispatcher;
    Title = "Main";
}
public void OpenWindow(CancellationToken ct) => Dispatcher.ExecuteAsync((obj) =>
{       
    var window = new Window();
    window.Activate();
}, ct);

[sosuisen]

As @dr1rrb says, this is easy when using DI and Navigation.
When using only DI and no Navigation, it worked in a much less clean way.

In App.xaml.cs, added DispatcherQueue as a public static property.

public partial class App : Application
{
    public static IHost? Host { get; private set; }
    public static DispatcherQueue DispatcherQueue { get; } = DispatcherQueue.GetForCurrentThread();

Added BindableMainModel as a service.

        var builder = this.CreateBuilder(args)
            .Configure(host => host
                .ConfigureServices((context, services) =>
                {
                    services.AddSingleton<BindableMainModel>();
                })
            );

MainPage.cs

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.DataContext(App.Host.Services.GetRequiredService<BindableMainModel>(), (page, vm) => page
            .Background(Theme.Brushes.Background.Default)
            .Content(new StackPanel()
            .VerticalAlignment(VerticalAlignment.Center)
            .HorizontalAlignment(HorizontalAlignment.Center)
            .Children(
                new Button()
                    .Content("Open Window")
                    .Command(() => vm.OpenWindow)
            )));
    }
}

MainModel.cs

internal partial record MainModel
{
    public void OpenWindow() => App.DispatcherQueue.TryEnqueue(() =>
    {
        var window = new Window();
        window.Activate();
    });
}

The code above works.
But, not using Navigation is probably not a good pattern as you mention in the following URL
at https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Tutorials/Navigation/HowTo-NavigateInCode.html

[francoistanguay]

Thanks for the detailed update. It's great to see you made it work. We'll better explore how we could facilite UI-Level API access with MVUX without forcing navigation to be used...