.NET MAUI allows developers to target desktop and mobile devices from a single codebase, but with different user experiences.
.NET MAUI is the modern cross-platform development framework for .NET that enables developers to achieve broad platform reach from a single code base. What started as an evolution of Xamarin.Forms with a mobile-centric mindset now includes desktop support as a first-class citizen. .NET MAUI is future-oriented with strong tooling support for a modern cross-platform development stack and enables the modernization of code-heavy shared applications across mobile/desktop/web devices.
However, developers can be a cynical bunch, and most write-once-run-everywhere solutions are surprising. While .NET MAUI is readily available on desktop and mobile devices, the reality of different form factors requires that you think about application design to optimize the user experience. Actual screen real estate varies greatly between mobile and desktop form factors, and good .NET MAUI applications must account for the differences. Fortunately, it's not difficult to serve mobile and desktop devices with a single code base but slightly different experiences - let's take a look at some solutions.
This article is part of the wonderful.NET MAUI July UISeries. Greetings toMatt Goldmannfor getting the series off the ground, and congratulations to the developer community for expanding the content. .NET MAUI UI Julio brings a lot of inspiration to anyone building a modern cross-platform user interface using .NET MAUI.
dual application mode
AND.NET MAUI controlsThe promise is enticing for .NET developers who want to work cross-platform: a true single project allows applications to run on iOS/Android/Windows/MacOS. However, differences in actual screen space, form factor and user interactions between mobile and desktop devices cannot be denied. For an optimized user experience (UX), .NET MAUI apps better recognize platform/device differences and adapt separately for mobile/desktop devices. However, developers wouldn't want to stray too far from the .NET MAUI promise of a single code base. The key would be to serve the desktop/mobile in a nuanced and responsive way, sharing as much code as possible.
.NET MAUI is also starting to enjoy a rich ecosystem:Telerik UI para .NET MAUIis a complete set of powerful and polished user interface components for desktop and mobile devices. One of the sample applications for Telerik UI for .NET MAUI isCriptoTracker– a demo app that tracks price changes in cryptocurrencies and displays part of the Telerik UI. comfortableopen codeTo inspire developers, the CryptoTracker app does a good job of showing the desired dual mode for .NET MAUI apps, which create slightly different UXes for mobile and desktop devices.
On mobile formats like iOS, the CryptoTracker app basically starts with a list of cryptocurrencies and their price trends.
Users can tap on any listed cryptocurrency and navigate to a detailed view that shows historical price data with some neat data visualizations.
Launch the same CryptoTracker app on the desktop as on macOS and the user will have a different initial experience. Desktop screens have more space and .NET MAUI applications have the opportunity to use it when needed. For the CryptoTracker desktop app, the list of cryptocurrencies and the detailed historical view showing trends for the selected cryptocurrency are displayed together in a consolidated view. Users can click on a cryptocurrency and see price trends on the right, just a better desktop work experience.
platform supply
Deploying a slightly different UX on desktop than on mobile while on the common .NET MAUI codebase is really not that difficult. With conditional compilation directives, .NET MAUI developers can always know which platform their code is running on and take appropriate steps to differentiate themselves with UX. However, the trick might be to not get too deep into platform customizations and reuse as much code as possible across desktop/mobile.
Let's take a look at how the CryptoTracker app offers a different UX for mobile and desktop. When we provide the open source code for the CryptoTracker application, we see a well-known Model View ViewModel (MVVM) design pattern implementation. FORpagesThe folder houses the handful of pages used in the app; Most of this has to do with cryptocurrency information/choices, but there is a dedicated page for desktop mode.
And then there's anotherviewpointsFolder containing the reusable views that form the core of the UI. The sides shelter the views, it's that simple.
So how do you change the UI for desktop and mobile? Easy checks which platform the application is running on: for MacOS/Windows, thedesktop pageis loaded while mobile form factors with iOS/Android get cryptocurrency list view in anavigation page.
CryptoTracker-Namespace {episódio de Klassenanwendung: Anwendung {opbAnwendung() { ...#if MACCATALYST MainPage = new DesktopPage();#elif WINDOWS MainPage = new NavigationPage(new DesktopPage()) { BarBackgroundColor = Colors.White, BarTextColor = Color.FromArgb("#121212"), };#else MainPage = new NavigationPage(new CoinSelectionPage()) {#if IOS BarBackgroundColor = Colors.White, BarTextColor = Color.FromArgb("#121212"),# else BarBackgroundColor = Color.FromArgb("#121212"), BarTextColor = Colors.White,#endif };#endif } }}And the dedicated DesktopPage consolidates some views to make better use of the extra space in desktop formats. Notice the reuse here: no new UI is created, just two of the mobile UX views are joined together.
<Grid RowDefinitions="Auto, *" ColumnDefinitions="500, *, Auto"> ... <Views:CoinSelectionView Grid.Row="1" CoinSelected="OnCoinSelected" Padding="20, 20, 20, 10"/ > <Vistas:CoinInfoChartView x:Name="s selectedCoinInfo" Padding="0, 20, 25, 10" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"> <Views:CoinInfoChartView . BindingContext> <local:CoinInfoViewModel/> </Views:CoinInfoChartView.BindingContext> </Views:CoinInfoChartView></Grid>navigation pattern
While the individual code base .NET MAUI apps work perfectly on desktop and mobile devices, there are definitely different UX expectations based on form factors and user input devices. There are some navigation paradigms that work best on desktop computers with a mouse/keyboard, while others are better suited for mobile devices with touch interactions; this also affects how the app's content is organized.
A .NET MAUI UI paradigm that works particularly well for desktop apps is thisMenu bar—Menus have always been popular for desktop navigation.
It's quite easy to render a menu bar for .NET MAUI applications - they support commands and can be data bound for dynamic options.
<ContentPage.MenuBarItems> <MenuBarItem Text="Ubicaciones"> <MenuFlyoutSubItem Text="Mudar localização"> <MenuFlyoutItem Text="Nova York, EE. UU." Command="{Binding ChangeLocationCommand}" CommandParameter="Nueva York" /> <MenuFlyoutItem Text ="Berlin, Deutschland" Command="{Binding ChangeLocationCommand}" CommandParameter="Berlin" /> <MenuFlyoutItem Text="Madrid, España" Comando ="{Binding ChangeLocationCommand}" CommandParameter="Madrid"/> </MenuFlyoutSubItem> < MenuFlyoutItem Text="Agregar ubicación" Command="{Binding AddLocationCommand}" /> </MenuBarItem></ContentPage.MenuBarItems>.NET MAUI also took overmangaas a standard way of organizing content and navigation; While they don't need to use the shell, most developers will find that the shell is a good place to start. The shell also provides a common user interface paradigm: thesteering wheel. Modern web/mobile apps have popular "hamburger" menus and desktop users may be open to this organization/browsing as well.
Floating menus can be modeled/customized to your heart's content and can also be data driven.
It's very easy to render basic submenus from the shell: templates can be created and include header/menu/footer elements:
<?version xml="1.0" codificação="UTF-8" ?><Shell x:Class="MauiDesktop.AppShell" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x ="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MauiDesktop" Shell.FlyoutBehavior="Flyout"> <Shell.ItemTemplate> <DataTemplate> <Grid ColumnDefinitions=" 0.2*,0.8*"> <Image Source="{Binding FlyoutIcon}" Margin="5" HeightRequest="45" /> <Label Grid.Column="1" Text="{Binding Title}" FontAttributes="Cursiva " VerticalTextAlignment="Center" /> </Grid> </DataTemplate> </Shell.ItemTemplate> <FlyoutItem Title="English" Icon="language.png"> <ShellContent Title="Inicio" ContentTemplate="{DataTemplate local :MainPage}" Route="MainPage" /> </FlyoutItem> <FlyoutItem Title="Alemán" Icon="idioma.png"> <ShellContent Title="Heim" ContentTemplate="{DataTemplate local: GermanPage}" Route=" MainPage" /> </FlyoutItem> <FlyoutItem Title="Spanish" Icon="language.png"> <ShellContent Title="Hogar" ContentTemplate="{DataTemplate local: Spanish Page}" Route="Página principal" /> </FlyoutItem></Shell>While flyouts may be popular now on the web and in desktop apps, there is a UI paradigm that is particularly suited to smaller mobile formats: lo and behold.safe. Tabs provide a neat way to organize your app's content in a container and provide a generally understandable UX.
Fortunately, if you are using the .NET MAUI shell, tab rendering is also built into the shell. Conditional logic can render flyouts for desktop and tabs for mobile devices.
<?version xml="1.0" codificação="UTF-8" ?><Shell x:Class="MauiDesktop.AppShell" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x ="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MauiDesktop" Shell.FlyoutBehavior="Disabled"> <TabBar> <Tab Title="English" Icon=" idioma.png"> <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" /> </Tab> <Tab Title="Alemán" Icon="idioma.png"> <ShellContent Title="Heim" ContentTemplate="{DataTemplate local:GermanPage}" Route="MainPage" /> </Tab> <Tab Title="Español" Icon="idioma.png"> <ShellContent Title="Hogar" ContentTemplate= "{DataTemplate local:SpanishPage}" Route="MainPage" /> </Tab> </TabBar></Shell>Diploma
.NET MAUI makes a big promise: native cross-platform desktop and mobile apps. In fact, most .NET developers appreciate the beauty of a true single codebase shared with .NET MAUI and the ability to have broad platform compatibility. Between iOS/Android for mobile devices and Windows/MacOS for desktop, .NET MAUI allows developers to reach the vast majority of users.
However, mobile and desktop are very different platforms and the corresponding devices are different. .NET MAUI apps work well when they respect differences and provide an appropriate user experience for both desktop and mobile devices. Fortunately, by sharing most of the code between desktop and mobile devices, it's easy for developers to discover platforms and change the UI programmatically. Cheers to the much more common code across mobile and desktop, while having a good UX fit for each platform.