{"id":39816,"date":"2022-05-10T12:12:29","date_gmt":"2022-05-10T19:12:29","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/dotnet\/?p=39816"},"modified":"2022-05-10T15:28:07","modified_gmt":"2022-05-10T22:28:07","slug":"dotnet-maui-rc-3","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/dotnet-maui-rc-3\/","title":{"rendered":".NET MAUI Release Candidate 3"},"content":{"rendered":"

We are excited to release .NET Multi-platform App UI (.NET MAUI) Release Candidate 3 with a new batch of improvements. As with previous release candidates, RC3 is covered by a “go-live” support policy, meaning .NET MAUI is supported by Microsoft for your production apps.<\/p>\n

\".NET<\/p>\n

To get started with .NET MAUI, install or upgrade to the latest Visual Studio 2022 preview and select the “.NET Multi-platform App UI development” workload. This will install all the .NET 6 pieces you need, plus enable preview features to make your .NET MAUI development experience more productive.<\/p>\n

\nFor guidance on migrating Xamarin libraries to .NET 6 and .NET MAUI, checkout these tips on the Xamarin blog<\/a>, and the May .NET MAUI Community Standup<\/a> where Brandon Minnick discussed moving the Xamarin Community Toolkit to .NET MAUI.\n<\/p><\/blockquote>\n

Focus on Navigation<\/h2>\n

.NET MAUI provides you with 2 primary ways to implement navigation in your applications. The easiest yet power option is running your app in Shell<\/code> which provides details optimized for both desktop and mobile patterns. The second option is to use the base navigation page controls directly: FlyoutPage<\/a>, TabbedPage<\/a>, and NavigationPage<\/a>.<\/p>\n\n\n\n\n\n\n\n\n\n
<\/th>\nShell<\/th>\nBase Controls<\/th>\n<\/tr>\n<\/thead>\n
Flyout<\/td>\nYes<\/td>\nYes<\/td>\n<\/tr>\n
Tabs<\/td>\nYes<\/td>\nYes<\/td>\n<\/tr>\n
Navigation<\/td>\nURI Based<\/td>\nPush\/Pop<\/td>\n<\/tr>\n
Passing Data<\/td>\nURI Based<\/td>\nView Models<\/td>\n<\/tr>\n
Template-able<\/td>\nYes<\/td>\nNo<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

What should you use? The .NET MAUI new project template implements Shell<\/code> and provides an optimized experience, so we recommend you start with that one. If in the future you want to swap out for specific controls, you can still reuse all your UI. Shell<\/code> is a UI control that hosts your app pages and offers flyout and tab menus. <\/p>\n

The template project includes an “AppShell.xaml” with a single page, and this is assigned to the App.MainPage<\/code>. To see the flyout come to life, simply add more pages and enable the flyout by changing the Shell.FlyoutBehavior<\/code>.<\/p>\n

<Shell\r\n    x:Class=\"MauiApp2.AppShell\"\r\n    xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\r\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\r\n    xmlns:local=\"clr-namespace:MauiApp2\"\r\n    Shell.FlyoutBehavior=\"Flyout\">\r\n\r\n    <ShellContent\r\n        Title=\"Home\"\r\n        ContentTemplate=\"{DataTemplate local:MainPage}\"\r\n        Route=\"MainPage\" \/>\r\n\r\n    <ShellContent\r\n        Title=\"Items\"\r\n        ContentTemplate=\"{DataTemplate local:ItemsPage}\"\r\n        Route=\"ItemsPage\" \/>\r\n\r\n<\/Shell><\/code><\/pre>\n
\"basic<\/p>\n
ShellContent<\/code> enables you to describe the URI routes for navigation, and to use data templates so your pages are loaded on-demand to preserve your startup performance. To be more explicit, you can wrap the ShellContent<\/code> in navigation aliases that instruct Shell clearly how to render your UI.<\/p>\n
<FlyoutItem Title=\"Home\" FlyoutIcon=\"home.png\">\r\n    <ShellContent ...>\r\n<\/FlyoutItem>\r\n\r\n<FlyoutItem Title=\"Items\" FlyoutIcon=\"store.png\">\r\n    <ShellContent ...>\r\n<\/FlyoutItem><\/code><\/pre>\n
Shell supports many customizations of the flyout including styling the background, backdrop covering the content, templating the header, footer, entire content, or just the menu items. You can also set the width of the flyout and keep it open or hide it altogether. Here are some examples of just a few different designs:<\/p>\n
\"gallery<\/p>\n
To display tabs, you can just replace FlyoutItem<\/code> with Tab<\/code>. To group collections of tabs you can wrap them further in a TabBar<\/code>. Mix and match the pages of your app however you need, and Shell<\/code> will do all of the navigation for you.<\/p>\n
For more information on customizing flyout and tabs check out the Shell flyout<\/a> and Shell tabs<\/a> documentation.<\/p>\n
When you need to navigate to pages deeper in your application, you can declare custom routes, and navigate by URI — even pass querystring parameters.<\/p>\n
\/\/ declare a new route\r\nRouting.RegisterRoute(nameof(SettingsPage), typeof(SettingsPage));\r\n\r\n\/\/ execute a route\r\nawait Shell.Current.GoToAsync(nameof(SettingsPage));\r\n\r\n\/\/ execute a route passing data\r\nawait Shell.Current.GoToAsync($\"{nameof(SettingsPage)}?setting=appearance\");\r\n\r\n\/\/ receive querystring value\r\n[QueryProperty(nameof(SelectedSubSection), \"setting\")]\r\npublic partial class TipsPage : ContentPage\r\n{\r\n    ...\r\n    public string SelectedSubSection { get;set;}\r\n    ...\r\n}\r\n<\/code><\/pre>\n
In addition to parameters, you can pass complex data objects through a new API introduced with .NET MAUI:<\/p>\n
\r\n\/\/ execute a route passing full object\r\nvar person = new Person { Name=\"James\" };\r\nawait Shell.Current.GoToAsync(\"DetailsPage\", new Dictionary<string, object>\r\n{\r\n    { \"person\", person }\r\n});\r\n\r\n\/\/ received the object\r\n[QueryProperty(nameof(Person), \"person\")]\r\npublic partial class DetailsPage : ContentPage\r\n{\r\n    Person person;\r\n    public Person Person\r\n    {\r\n        get => person;\r\n        set => person = value;\r\n    }\r\n}<\/code><\/pre>\n
Check out the .NET MAUI Workshop<\/a> for more examples.<\/p>\n
The QueryProperty<\/code> attribute routes the incoming querystring parameter to the public property provided. You can also do this with a view model when implementing the MVVM pattern.<\/p>\n
For more information on navigating with Shell check out the Shell documentation<\/a>.<\/p>\n
Get Started Today<\/h2>\n
To acquire .NET MAUI RC3 on Windows, install or update Visual Studio 2022 Preview<\/a> to version 17.3 Preview 1. In the installer, confirm .NET MAUI (preview) is checked under the “Mobile Development with .NET” workload.<\/p>\n
To use .NET MAUI RC3 on Mac, follow the command-line instructions<\/a> on the wiki. Support for .NET MAUI in Visual Studio 2022 for Mac will ship formally in a future preview.<\/p>\n
Release Candidate 3 release notes are on GitHub<\/a>. For additional information about getting started with .NET MAUI, refer to our documentation<\/a> and the migration tip sheet<\/a> for a list of changes to adopt when upgrading projects.<\/p>\n
\n
Reminder about Xamarin support<\/strong> The Xamarin Support Policy<\/a> is still in effect, which covers those products for 2 years after initial release. The last release was in November of 2021, so support will continue through November 2023.<\/p>\n<\/blockquote>\n
We need your feedback<\/h2>\n
Install the latest preview of Visual Studio 2022 for Windows (17.3 Preview 1) following our simple guide<\/a> and build your first multi-platform application today. <\/p>\n
We’d love to hear from you! As you encounter any issues, file a report on GitHub at dotnet\/maui<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
.NET MAUI Release Candidate 3 is now available with dozens of bug fixes and quality improvements. We also take a look at navigating with Shell including passing parameters and full objects.<\/p>\n","protected":false},"author":553,"featured_media":39817,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[685,7233],"tags":[7238,314,7620,117,7639],"class_list":["post-39816","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnet","category-maui","tag-net-maui","tag-navigation","tag-release-candidate","tag-releases","tag-shell"],"acf":[],"blog_post_summary":"
.NET MAUI Release Candidate 3 is now available with dozens of bug fixes and quality improvements. We also take a look at navigating with Shell including passing parameters and full objects.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/39816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/553"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=39816"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/39816\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/39817"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=39816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=39816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=39816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}