In addition to building cross-platform mobile apps with .NET MAUI, you can also craft beautiful desktop apps for Windows and Mac. Your application may only be targeting desktop platforms, or it perhaps it is going everywhere across mobile & desktop form factors. Either way, you want to deliver the best experience for your users no matter what device they are on. That means taking advantage of the hardware and operating system your app is running on. In the case of the desktop, .NET MAUI delivers several unique features to enhance the experience for users and today I am going to break down my top 5.
Multi-window
A fundamental change in .NET MAUI was the introduction of the Window
as the base foundation. When you create and run your .NET MAUI app it automatically has a default Window
that your Application
creates and uses to display content. The Application
class has a new CreateWindow
method that is invoked when any new Window
is created. When applications are running on the desktop (or tablet) there is more real estate to take advantage of, which means you may want to create a second or third Window
instead of navigating around. Let’s take an example of a weather application. Once a user navigates to a city we may want to display further information including a map. We have the option to navigate to that page, or open a brand new window with the built in API:
var weatherDetails = new Window(new WeatherDetailsPage());
Application.Current.OpenWindow(weatherDetails);
Our users now have multiple views that they can take advantage of instead of being constrained to a single window of information. At any point the user can close a Window
or we can progmatically close it as well.
// Close a specific window
Application.Current.CloseWindow(weatherDetails);
// Close the active window
Application.Current.CloseWindow(GetParentWindow());
For more information on configuring multi-window support be sure to read through the multi-window documentation..
Top level menu bar
When using desktop applications one of the most common features is the menu bar that is either integrated into the app on Windows or in the system menu bar on Mac. With .NET MAUI you can easily integrate a menu bar with just a few lines of code. As an added benefit when your users run your application on an iPad with a keyboard they will be able to access the menu as well.
Let’s take the weather application as an example again, we may want to have a menu that allows our users to add, remove, or browse different locations.
Every ContentPage
has a MenuBarItems
collection that can have multiple levels of menus:
<ContentPage ...>
<ContentPage.MenuBarItems>
<MenuBarItem Text="File">
<MenuFlyoutItem Text="Exit"
Command="{Binding ExitCommand}" />
</MenuBarItem>
<MenuBarItem Text="Locations">
<MenuFlyoutSubItem Text="Change Location">
<MenuFlyoutItem Text="Redmond, USA"
Command="{Binding ChangeLocationCommand}"
CommandParameter="Redmond" />
<MenuFlyoutItem Text="London, UK"
Command="{Binding ChangeLocationCommand}"
CommandParameter="London" />
<MenuFlyoutItem Text="Berlin, DE"
Command="{Binding ChangeLocationCommand}"
CommandParameter="Berlin"/>
</MenuFlyoutSubItem>
<MenuFlyoutSeparator />
<MenuFlyoutItem Text="Add Location"
Command="{Binding AddLocationCommand}" />
<MenuFlyoutItem Text="Edit Location"
Command="{Binding EditLocationCommand}" />
<MenuFlyoutItem Text="Remove Location"
Command="{Binding RemoveLocationCommand}" />
</MenuBarItem>
<MenuBarItem Text="View">
<!--More items-->
</MenuBarItem>
</ContentPage.MenuBarItems>
</ContentPage>
You can create these menu items directly in XAML or create them progmatically in code so your menus are dynamic. Menu items can be enabled or disabled, have separators, sub-menus, have icons on Windows, and in addition binding to a Command
there is a Clicked
event available. Be sure to browser the menu bar documentation for more details.
Context menus
Sometimes you want to give more options when a user right-clicks on an element. You want a menu like the menu bar, but based on a specific context. This is where context menus come into play in .NET MAUI applications. They have a similar API as the menu bar, but are placed on a specific control. For example we may want to add a comment on a specific city in our weather app. We may want to open a new window and then provide an area to type into with an Editor
.
We can apply a MenuFlyout
to the Editor
and fill it with MenuFlyoutItem
s similar to our menu bar earlier.
<Editor>
<FlyoutBase.ContextFlyout>
<MenuFlyout>
<MenuFlyoutItem Text="Bold" Clicked="OnBoldClicked"/>
<MenuFlyoutItem Text="Italics" Clicked="OnItalicsClicked"/>
<MenuFlyoutItem Text="Underline" Clicked="OnUnderlineClicked"/>
</MenuFlyout>
</FlyoutBase.ContextFlyout>
</Editor>
Just like the menu bar you can also bind to a Command
for the event, have icons, sub-menus, dividers, and more. Checkout the context menu documentation for all the details.
Tooltips
Tooltips are a quick and easy way to add functionality to your application and enhance the user experience. Your desktop users have a mouse and keyboard available to them, which means you can provide additional context when they hover over a control in your app. Using the TooltipProperties.Text
attached property enables you to specify additional information that is displayed to the user on mouse hover.
Let’s say we want to add additional information to the save button on our comment page. All we need to do is set the property and just like that it is good to go.
<Button Text="Save"
ToolTipProperties.Text="Click to save your comment" />
This can also be set progmatically in code for any control:
var button = new Button { Text = "Save" };
ToolTipProperties.SetText(button, "lick to save your comment");
Browser through the tooltip documentation for more information.
Pointer gestures
Speaking of enhancing desktop applications when users are navigating with a mouse, .NET MAUI has several new gesture recognizers specifically for the mouse pointer. You are easily able to see when any pointer has entered, exited, or moved inside of a control.
<Image Source="dotnet_bot.png">
<Image.GestureRecognizers>
<PointerGestureRecognizer PointerEntered="OnPointerEntered"
PointerExited="OnPointerExited"
PointerMoved="OnPointerMoved" />
</Image.GestureRecognizers>
</Image>
Here we are get events when the pointer is interacting with our Image
. Once we get the event we can also get the pointer position inside of the Image
or relative to it.
void OnPointerExited(object sender, PointerEventArgs e)
{
// Position inside window
Point? windowPosition = e.GetPosition(null);
// Position relative to an Image
Point? relativeToImagePosition = e.GetPosition(image);
// Position relative to the container view
Point? relativeToContainerPosition = e.GetPosition((View)sender);
}
And just like that we have our Point
that we can use to perform actions in our app. To learn more about the different gesture recognizers be sure to browse through the documentation.
Even more desktop features
There you have it, 5 awesome features to enhance your .NET MAUI apps on desktop. That is only the start as there are plenty more great features to built great apps across all platforms. Be sure to browse through all of the .NET MAUI documentation for other features and controls that you may want to take advantage of.
Oh still no designer. Personally I don’t prefer to use MAUI without easily seeing how the UI evolves. The emulator approach very very unproductive. Can we do something on it under priority?
We dont need MAUI for desktop. We need WPF port to Linux. MS dumped our long-term efforts on WPF and now do the same thing (desktop UI) but on MAUI. Thank you, but no. Very disappointed.
Why is Designer UI not implemented again in MAUI, with the drag and drop option?
My number one omission is not having a XAML designer like WPF has.
I like XAML, but I want to see what I am building.
Most of the time, I create the layout and then add code.
During that process, the XAML might be correct, but the code mostly isn’t
yeah, I don’t even touch it until there is no serious xaml designer tool. Emulator approach is such a pain and workaround not a real solution. Do something about it and you will get more devs on your platform (and fix the bugz!).
Number 1 missing feature is solving issues (bugs) on time.
During last previews before launch and after launch, average bug solving time was months.
Back then there were also testers who reviewed the bug reports from userson GitHub.
Today all issues are added to Backlog milestone, not reviewed and the testers which confirmed the issue have disappeared.
This means that they're not going to be solved even for .NET 8 (so they will be solved...
While all those features are great and I use them regularly, one thing that would make the desktop experience stand out even more would be the ability to listen to the keyboard. Is there an ETA on that feature?
That would allow us, for example, to listen to keyboard shortcuts, or make UI elements respond to keyboard inputs other than the “Entry” field.
Please review and comment on these Keyboard proposals for .NET 8. https://github.com/dotnet/maui/issues/12004
Isn’t this already possible using the available Desktop APIs? Remember that you have access to all(or many for Mac) the normal Desktop APIs via WinUI/MacCatalyst
But the value in using a cross-platform GUI library is not having to resort to using platform-specific APIs for what should be platform-independent behaviors.
And yet still no compile to single .exe for simple usage like in WPF -,-
yes