Modal windows for desktop apps

[mikeparker104]

Ability to display a traditional desktop modal window in a .NET MAUI app that:

• Can be moved beyond the confines of a specific window e.g., so it can be displayed next to the window or on another monitor
• Prevents interaction with all other application windows until that modal window has been closed
• Keeps focus (and appears on top of the other application windows) even when other application windows receive input
• Does not appear alongside other windows in the taskbar and/or switcher

Existing options, within .NET MAUI and other third-party components, only support the display of a Page and/or dialog that is constrained to the Window it was opened from.

The expectation is that this requires use of the following platform-specific APIs.

MacCatalyst

A modal event loop can be started and stopped for a specific NSWindow using the following APIs from the NSApplication class:

• runModal(for:)
• stopModal

While the NSApplication and NSWindow types cannot be used directly in MacCatalyst, it's possible to get a reference to those types and invoke the requisite functionality on them via selectors.

WinUI3

There's an open proposal for adding modal dialog support to WinUI3 but it does not currently support this concept directly. However, the requirements might be achieved through a combination of Win32 and Windows App SDK Interop APIs alongside the Windows App SDK components as described in an answer to a recent forum question. Notable members, types, and APIs include:

Types and Members

• AppWindow.IsShownInSwitchers
• AppWindow.Presenter
• OverlappedPresenter.IsMaximizable
• OverlappedPresenter.IsMinimizable
• OverlappedPresenter.IsResizable

WIn32 APIs and Constants

• GetWindow
• EnableWindow
• SetWindowLong
• WindowStyles

Would others consider this a valuable addition to the Community Toolkit?

[mikeparker104]

Created initial feature proposal here: #842

[VladislavAntonyuk]

It can be achieved by Popup. Why do you need a new window?

[mikeparker104]

Hi @VladislavAntonyuk, thanks for your reply. To confirm my understanding, you're saying that the Popup can already be displayed outside of the window it was opened from/within? Or are you asking why modal windows would be required for multi-window desktop apps in general?

[VladislavAntonyuk]

I am just asking how you plan to use it?
What is your scenario that you cannot achieve with Popup?

[mikeparker104]

In multi-window desktop apps, a modal window is often used to ensure a task or flow is completed before further interaction with application functionality is able to take place on any window in the application. For example, in Visual Studio when a user needs to sign in, switch accounts, or change some global settings.

[pictos]

@mikeparker104 can't you archive this with the popup control?

[mikeparker104]

@pictos My understanding is the popup doesn't prevent interaction with other open application windows and also can't be moved beyond the confines of a specific window e.g., so it can be displayed next to the window or on another monitor.

[faustmet]

A modal may be required when we want to ensure that this flow is completed before another interaction, especially where we need a confirmation before any future action is taken. Also, we would like to prevent background or offscreen popups from collecting in general.

[mikeparker104]

Thanks for discussing during the February 2023 .NET MAUI Community Toolkit Monthly Standup. Some further input on potential handling on non-desktop platforms.

Looking at features for building great desktop apps, and how those are handled in MAUI, the APIs and/or types are exposed to all TFMs but are ignored (or fail silently) on platforms where they're not suitable/supported. On this basis, developers would either do nothing or handle the flow/UI differently based on whether they're targeting mobile or desktop. However, in this case, the current INavigation.PushModalAsync behavior feels like a suitable fallback for those platforms that don't support multi-window (and modal windows).

As a starting point, one approach might be to extend INavigation with a version of INavigation.PushModalAsync that will show the specified Page in a modal Window if supported but otherwise use the current method to display it within the current Window.

Indicative implementation

namespace Microsoft.Maui.Controls;

public static class INavigationExtensions
{
    public static Task PushModalAsyncEx(this INavigation navigation, Page page)
    {
#if MACCATALYST || WINDOWS
        Application.Current.OpenWindow(new ModalWindow(page));
        return Task.CompletedTask;
#else
        return navigation.PushModalAsync(page);
#endif
    }
}

Indicative usage

public partial class MainPage : ContentPage
{
    void OnButtonClicked(object sender, EventArgs e)
        => Navigation.PushModalAsyncEx(new MyPage());
}

Further considerations

Assuming demand continues to grow within the community for desktop focused features, one approach to consider in future might be splitting those capabilities out into a standalone version of the toolkit specific to desktop. For example, CommunityToolkit.Maui.Desktop.

Thoughts?

[mouralabank]

@mikeparker104 I totally agree with you, MAUI has a lot of potential for multi platform and with that the need for desktop-focused demands eventually, such as Modal, MDI, toolbar/ribbon, mouse events, keyboard events, options to configure a window (no titlebar, always on top, without minimizing, without maximizing, just maximized...), tabbed pages, control the mouse for accessibility (no clickable areas change the mouse to indicate this, for example), custom dialogs

[danielancines]

This will be great for desktop applications, even WPF been an option, the implementation with Maui is great for mobile and it'll be amazing to hit all targets (windows, macos, linux (future maybe), iOs, Android and Web) with one code base. Maui is great and this option will put Maui on the top of options. Thrilled to see what's next.

[CliffAgius]

Closed as answered.