{"id":32603,"date":"2021-04-09T12:18:31","date_gmt":"2021-04-09T19:18:31","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/dotnet\/?p=32603"},"modified":"2021-04-09T12:18:31","modified_gmt":"2021-04-09T19:18:31","slug":"announcing-net-multi-platform-app-ui-preview-3","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/announcing-net-multi-platform-app-ui-preview-3\/","title":{"rendered":"Announcing .NET Multi-platform App UI Preview 3"},"content":{"rendered":"

With <\/span>.NET 6<\/span> Preview 3<\/span> we are shipping the latest progress for mobile and<\/span> desktop development with .NET Multi-platform App UI. This release adds the Windows platform with WinUI 3<\/span>, improves the base application and<\/span> startup builder, adds native lifecycle events, and<\/span> continues to add more UI controls and<\/span> layout capabilities. We are also introducing new semantic properties for accessibility. As we explore each of these in a bit more detail, we invite you to dotnet new<\/code> along with us and<\/span> share your feedback.<\/p>\n

Windows Desktop Now Supported<\/h2>\n

Project Reunion 0.5 has shipped! Now Windows joins Android, iOS, and macOS as target platforms you can reach with .NET MAUI! To get started, follow the Project Reunion installation instructions<\/a>. For this release we have created a sample project<\/a> that you can explore and run from the 16.10 preview of Visual Studio 2019.<\/p>\n

\".NET<\/p>\n

Once we have the necessary .NET 6 build infrastructure for Project Reunion, we will add Windows to our single project templates.<\/p>\n

Getting Started<\/h2>\n

As we are still in the early stages of preview, the process of installing all the dependencies you need for mobile and desktop development is a bit manual. To help ourselves, and you, Jonathan Dick<\/a> has put together a useful dotnet tool<\/code> that evaluates your system and gathers as many of the required pieces as it can. To get started, install maui-check<\/code> globally from the command line:<\/p>\n

dotnet tool install -g Redth.Net.Maui.Check\r\n<\/code><\/pre>\n
Source: https:\/\/github.com\/Redth\/dotnet-maui-check<\/a><\/p>\n
\"maui-check<\/p>\n
Now run > maui-check<\/code> and follow the instructions. Once you succeed, you’re ready to create your first app:<\/p>\n
dotnet new maui -n HelloMaui\r\n<\/code><\/pre>\n
Step-by-step instructions for installing and getting started may also be found at https:\/\/github.com\/dotnet\/maui\/wiki\/Getting-Started<\/a>.<\/p>\n
Your First Application<\/h2>\n
.NET MAUI starts every application using the Microsoft.Extensions HostBuilder<\/a>. This provides a consistent pattern for application developers as well as library maintainers to quickly develop native applications. Each platform has a different starting point, and the consistent point of entry for your application is Startup.cs<\/code>. Here is the most basic example:<\/p>\n
public class Startup : IStartup\r\n{\r\n    public void Configure(IAppHostBuilder appBuilder)\r\n    {\r\n        appBuilder\r\n            .UseMauiApp<App>();\r\n    }\r\n}\r\n<\/code><\/pre>\n
This is where you can do such things as register fonts and register compatibility for Xamarin.Forms renderers or your own custom renderers. This is also where you introduce your App<\/code>, an implementation of Application<\/code> which is responsible for (at least) creating a new Window<\/code>:<\/p>\n
public partial class App : Application\r\n{\r\n    public override IWindow CreateWindow(IActivationState activationState)\r\n    {\r\n        return new MainWindow();\r\n    }\r\n}\r\n<\/code><\/pre>\n
To complete the path to your content, a view is added to the MainWindow<\/code>:<\/p>\n
public class MainWindow : IWindow\r\n{\r\n    public MainWindow()\r\n    {\r\n        Page = new MainPage();\r\n    }\r\n\r\n    public IPage Page { get; set; }\r\n\r\n    public IMauiContext MauiContext { get; set; }\r\n}\r\n<\/code><\/pre>\n
And that’s it! You now have content in a window.<\/p>\n
Native Lifecycle Events<\/h2>\n
Expanding on the startup extensions, Preview 3 introduces ConfigureLifecycleEvents<\/code> for easily hooking into native platform lifecycle events. This is an important introduction, especially for the single project experience, to simplify initialization and configuration needed by many libraries.<\/p>\n
As a basic example, you can hook to the Android back button event and handle it as needed:<\/p>\n
public class Startup : IStartup\r\n{\r\n    public void Configure(IAppHostBuilder appBuilder)\r\n    {\r\n        appBuilder\r\n            .UseMauiApp<App>()\r\n            .ConfigureLifecycleEvents(lifecycle => {\r\n                #if ANDROID\r\n                lifecycle.AddAndroid(d => {\r\n                    d.OnBackPressed(activity => {\r\n                        System.Diagnostics.Debug.WriteLine(\"Back button pressed!\");\r\n                    });\r\n                });\r\n                #endif\r\n            });\r\n    }\r\n}\r\n<\/code><\/pre>\n
Now let’s look at how libraries can use these methods to streamline their platform initialization work. Essentials (Microsoft.Maui.Essentials), a library for cross-platform non-UI services that is now a part of .NET MAUI, makes use of this to configure everything needed for all platforms in a single location:<\/p>\n
public class Startup : IStartup\r\n{\r\n    public void Configure(IAppHostBuilder appBuilder)\r\n    {\r\n        appBuilder\r\n            .UseMauiApp<App>()\r\n            .ConfigureEssentials(essentials =>\r\n            {\r\n                essentials\r\n                    .UseVersionTracking()\r\n                    .UseMapServiceToken(\"YOUR-KEY-HERE\");\r\n            });\r\n    }\r\n}\r\n<\/code><\/pre>\n
Within the Essentials code, you can see how the ConfigureEssentials<\/code> extension method is created and hooks into the platform lifecycle events to greatly streamline cross-platform native configuration.<\/p>\n
public static IAppHostBuilder ConfigureEssentials(this IAppHostBuilder builder, Action<HostBuilderContext, IEssentialsBuilder> configureDelegate = null)\r\n{\r\n    builder.ConfigureLifecycleEvents(life =>\r\n    {\r\n#if __ANDROID__\r\n        Platform.Init(MauiApplication.Current);\r\n\r\n        life.AddAndroid(android => android\r\n            .OnRequestPermissionsResult((activity, requestCode, permissions, grantResults) =>\r\n            {\r\n                Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);\r\n            })\r\n            .OnNewIntent((activity, intent) =>\r\n            {\r\n                Platform.OnNewIntent(intent);\r\n            })\r\n            .OnResume((activity) =>\r\n            {\r\n                Platform.OnResume();\r\n            }));\r\n#elif __IOS__\r\n        life.AddiOS(ios => ios\r\n            .ContinueUserActivity((application, userActivity, completionHandler) =>\r\n            {\r\n                return Platform.ContinueUserActivity(application, userActivity, completionHandler);\r\n            })\r\n            .OpenUrl((application, url, options) =>\r\n            {\r\n                return Platform.OpenUrl(application, url, options);\r\n            })\r\n            .PerformActionForShortcutItem((application, shortcutItem, completionHandler) =>\r\n            {\r\n                Platform.PerformActionForShortcutItem(application, shortcutItem, completionHandler);\r\n            }));\r\n#elif WINDOWS\r\n        life.AddWindows(windows => windows\r\n            .OnLaunched((application, args) =>\r\n            {\r\n                Platform.OnLaunched(args);\r\n            }));\r\n#endif\r\n    });\r\n\r\n    if (configureDelegate != null)\r\n        builder.ConfigureServices<EssentialsBuilder>(configureDelegate);\r\n\r\n    return builder;\r\n}\r\n<\/code><\/pre>\n
You can see the full class on dotnet\/maui<\/a>. We are excited to see more libraries take advantage of this pattern to streamline their usage.<\/p>\n
Updates to Controls and Layouts<\/h2>\n
Work continues enabling more controls, properties, and layout options in .NET MAUI, in addition to the existing compatibility renderers brought in from Xamarin.Forms. If you begin your application with a startup like the code above, then you’ll be using only the handlers currently implemented. To see what’s currently implemented, you can review the Handlers folder at dotnet\/maui<\/a>.<\/p>\n
To track incoming work we have a Project Board<\/a> setup for all the handlers we are accepting pull requests for. Several developers have already contributed, and early feedback indicates this architecture provides a much improved experience for ease of contribution.<\/p>\n
“Porting handlers are fun. Any mid-senior developer can handle if they had a little bit of a proper understanding of how Xamarin Forms renderers and how Xamarin in general work.” – Burak<\/p><\/blockquote>\n
Special thanks to these community contributors:<\/p>\n