{"id":39408,"date":"2022-04-12T11:00:39","date_gmt":"2022-04-12T18:00:39","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/dotnet\/?p=39408"},"modified":"2022-04-13T08:51:55","modified_gmt":"2022-04-13T15:51:55","slug":"dotnet-maui-rc-1","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/dotnet-maui-rc-1\/","title":{"rendered":".NET MAUI Release Candidate &#8211; Ready for cross-platform app development"},"content":{"rendered":"<p>Today we are excited to announce the availability of <a href=\"https:\/\/dotnet.microsoft.com\/en-us\/apps\/maui\" rel=\"noopener\" target=\"_blank\">.NET Multi-platform App UI<\/a> (.NET MAUI) Release Candidate. The SDK is now API complete, ready for libraries to update and make ready for GA (general availability) compatibility. As with other .NET release candidates, this release is covered by a &#8220;go live&#8221; support policy, meaning .NET MAUI is supported by Microsoft for your production apps.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/04\/dotnet-podcasts.png\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/04\/dotnet-podcasts.png\" alt=\"Image dotnet podcasts\" width=\"1920\" height=\"1080\" class=\"alignnone size-full wp-image-39414\" srcset=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/04\/dotnet-podcasts.png 1920w, https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/04\/dotnet-podcasts-300x169.png 300w, https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/04\/dotnet-podcasts-1024x576.png 1024w, https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/04\/dotnet-podcasts-768x432.png 768w, https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/04\/dotnet-podcasts-1536x864.png 1536w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/><\/a><\/p>\n<h2>Get Started Today<\/h2>\n<p>To acquire .NET MAUI RC1, <a href=\"https:\/\/aka.ms\/vs2022preview\">install or update Visual Studio 2022 Preview<\/a> to version 17.2 Preview 3. In the installer confirm .NET MAUI (preview) is checked under the &#8220;Mobile Development with .NET workload&#8221;.<\/p>\n<p>To use .NET MAUI RC1 on Mac, follow the <a href=\"https:\/\/github.com\/dotnet\/maui\/wiki\/macOS-Install\">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<p>Release Candidate <a href=\"https:\/\/github.com\/dotnet\/maui\/releases\/tag\/6.0.300-rc.1\">release notes are on GitHub<\/a>. For additional information about getting started with .NET MAUI, refer to our <a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/get-started\/installation\">documentation<\/a>, and the <a href=\"https:\/\/github.com\/dotnet\/maui\/wiki\/Migrating-to-RC1\">migration tip sheet<\/a> for a list of changes to adopt when upgrading projects.<\/p>\n<p>Jump start your journey with the <a href=\"https:\/\/github.com\/microsoft\/dotnet-podcasts\" rel=\"noopener\" target=\"_blank\">.NET Podcasts app<\/a> (pictured above) which runs on Android, iOS, macOS, and Windows, and showcases both native app UI as well as <a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/blazor\/hybrid\/\" rel=\"noopener\" target=\"_blank\">Blazor Hybrid<\/a>. Looking for a full workshop on how to get started with .NET MAUI? We have you covered with our newly released <a href=\"https:\/\/github.com\/dotnet-presentations\/dotnet-maui-workshop\">.NET MAUI workshop<\/a> where you will build an app from start to finish and integrate native features.<\/p>\n<blockquote>\n<p><strong>What about Xamarin support?<\/strong> The <a href=\"https:\/\/dotnet.microsoft.com\/platform\/support\/policy\/xamarin\">Xamarin Support Policy<\/a> is still in effect which covers those products for 2 years after initial release. The last release was November of 2021, and so support will continue through November 2023.<\/p>\n<\/blockquote>\n<h2>What&#8217;s in the .NET MAUI release candidate?<\/h2>\n<p>As a multi-platform app building framework, .NET MAUI leverages platform SDKs for Android, iOS, macOS, and Windows. These foundational pieces are included in this release, and you can use them directly with C# in addition to maximizing your code sharing and productivity with .NET MAUI.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/04\/base_theme.png\" alt=\"base theme for all controls\" \/><\/p>\n<p>.NET MAUI ships with <a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/controls\/\">40+ layouts and controls<\/a> optimized for building adaptive UIs across both desktop and mobile platforms. You can also incorporate Blazor components or entire Blazor applications to distribute the same experiences on desktop and mobile as you may today on web.<\/p>\n<blockquote>\n<p><strong>How does this compare to Xamarin.Forms?<\/strong> You get every UI control that ships with Xamarin.Forms, plus new controls such as BlazorWebView, Border, GraphicsView, MenuBar, Shadow, and Window.<\/p>\n<\/blockquote>\n<table>\n<thead>\n<tr>\n<th><\/th>\n<th><\/th>\n<th><\/th>\n<th><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Layouts<\/strong><\/td>\n<td>CarouselView<\/td>\n<td>Line<\/td>\n<td>Stepper<\/td>\n<\/tr>\n<tr>\n<td>AbsoluteLayout<\/td>\n<td>Checkbox<\/td>\n<td>ListView<\/td>\n<td>SwipeView<\/td>\n<\/tr>\n<tr>\n<td>BindableLayout<\/td>\n<td>CollectionView<\/td>\n<td>Path<\/td>\n<td>Switch<\/td>\n<\/tr>\n<tr>\n<td>FlexLayout<\/td>\n<td>ContentView<\/td>\n<td>Picker<\/td>\n<td>TableView<\/td>\n<\/tr>\n<tr>\n<td>GridLayout<\/td>\n<td>DatePicker<\/td>\n<td>Polygon<\/td>\n<td>TimePicker<\/td>\n<\/tr>\n<tr>\n<td>HorizontalStackLayout<\/td>\n<td>Editor<\/td>\n<td>Polyline<\/td>\n<td>WebView<\/td>\n<\/tr>\n<tr>\n<td>StackLayout<\/td>\n<td>Ellipse<\/td>\n<td>ProgressBar<\/td>\n<td><strong>Pages<\/strong><\/td>\n<\/tr>\n<tr>\n<td>VerticalStackLayout<\/td>\n<td>Entry<\/td>\n<td>RadioButton<\/td>\n<td>ContentPage<\/td>\n<\/tr>\n<tr>\n<td><strong>Views<\/strong><\/td>\n<td>Frame<\/td>\n<td>Rectangle<\/td>\n<td>FlyoutPage<\/td>\n<\/tr>\n<tr>\n<td>ActivityIndicator<\/td>\n<td>GraphicsView<\/td>\n<td>RefreshView<\/td>\n<td>NavigationPage<\/td>\n<\/tr>\n<tr>\n<td>BlazorWebView<\/td>\n<td>Image<\/td>\n<td>RoundRectangle<\/td>\n<td>TabbedPage<\/td>\n<\/tr>\n<tr>\n<td>Border<\/td>\n<td>ImageButton<\/td>\n<td>ScrollView<\/td>\n<td>Shell<\/td>\n<\/tr>\n<tr>\n<td>BoxView<\/td>\n<td>IndicatorView<\/td>\n<td>SearchBar<\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td>Button<\/td>\n<td>Label<\/td>\n<td>Slider<\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>These are all <a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/controls\/\">documented<\/a> in addition to related topics such as:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/animation\/basic\">Animation<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/brushes\/\">Brushes<\/a> for solid and gradient colors<\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/pop-ups\">Displaying Pop-ups<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/graphics\/\">Graphics<\/a> for making the most of <code>Microsoft.Maui.Graphics<\/code> with blend modes, colors, canvas drawing, images, transforms, winding modes, and more<\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/shadow\">Shadows<\/a><\/li>\n<li>Styling with <a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/styles\/xaml\">XAML<\/a> and <a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/styles\/css\">CSS<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/theming\">Theming<\/a> for light and dark modes<\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/visual-states\">Visual States<\/a><\/li>\n<\/ul>\n<p>The new .NET MAUI project template now includes a default stylesheet in &#8220;Resourcesstyles.xaml&#8221; with a color palette and styling for all the controls. Take for example the <code>Entry<\/code>. When starting a new application these text inputs will now begin with a shared theme while still being true to the platform on which it runs.<\/p>\n<pre><code class=\"language-xaml\">&lt;Style TargetType=\"Entry\"&gt;\r\n    &lt;Setter Property=\"TextColor\" Value=\"{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}\" \/&gt;\r\n    &lt;Setter Property=\"FontFamily\" Value=\"OpenSansRegular\"\/&gt;\r\n    &lt;Setter Property=\"FontSize\" Value=\"14\" \/&gt;\r\n    &lt;Setter Property=\"PlaceholderColor\" Value=\"{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}\" \/&gt;\r\n    &lt;Setter Property=\"VisualStateManager.VisualStateGroups\"&gt;\r\n        &lt;VisualStateGroupList&gt;\r\n            &lt;VisualStateGroup x:Name=\"CommonStates\"&gt;\r\n                &lt;VisualState x:Name=\"Normal\"&gt;\r\n                    &lt;VisualState.Setters&gt;\r\n                        &lt;Setter Property=\"TextColor\" Value=\"{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}\" \/&gt;\r\n                    &lt;\/VisualState.Setters&gt;\r\n                &lt;\/VisualState&gt;\r\n                &lt;VisualState x:Name=\"Disabled\"&gt;\r\n                    &lt;VisualState.Setters&gt;\r\n                        &lt;Setter Property=\"TextColor\" Value=\"{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}\" \/&gt;\r\n                    &lt;\/VisualState.Setters&gt;\r\n                &lt;\/VisualState&gt;\r\n            &lt;\/VisualStateGroup&gt;\r\n        &lt;\/VisualStateGroupList&gt;\r\n    &lt;\/Setter&gt;\r\n&lt;\/Style&gt;<\/code><\/pre>\n<p>For views that support different states we&#8217;ve created a sensible default, and provided light and dark mode color options. For more information check out:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/styles\/xaml\">Styles<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/theming\">Theming<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/visual-states\">Visual states<\/a><\/li>\n<\/ul>\n<h3>Customizing Controls<\/h3>\n<p>One of the things .NET MAUI does to improve upon the Xamarin.Forms architecture is adding low-code hooks to modify just about anything. Let&#8217;s consider the canonical example of removing the distinctive Android underline on an <code>Entry<\/code> field. How might you go about doing this when there is no multi-platform style for &#8220;underline&#8221; because it only exists on Android?<\/p>\n<pre><code class=\"language-csharp\">#if ANDROID\r\nMicrosoft.Maui.Handlers.EntryHandler.Mapper.ModifyMapping(\"NoUnderline\", (h, v) =&gt;\r\n{\r\n    h.PlatformView.BackgroundTintList = ColorStateList.ValueOf(Colors.Transparent.ToPlatform());\r\n});\r\n#endif<\/code><\/pre>\n<p>That&#8217;s all the code there is. This code just needs to run somewhere in the start of your application before the handler is called. <\/p>\n<p>Let&#8217;s explain what is going on here. Firstly, the <code>#if ANDROID<\/code> is a conditional compilation directive that indicates this code should only run for Android. In other cases where you are modifying the control for ALL platforms, this isn&#8217;t necessary.<\/p>\n<p>Next, we need need access to the control. The <code>Entry<\/code> you use is a .NET MAUI control. Each property, command, event, etc. of the <code>Entry<\/code> is &#8220;mapped&#8221; by a &#8220;handler&#8221; to a platform implementation. To modify a mapping you can tap into it via the handler&#8217;s map such as <code>Microsoft.Maui.Handlers.EntryHandler.Mapper<\/code>. From the mapper we have 3 methods:<\/p>\n<ul>\n<li><code>PrependToMapping<\/code> which runs before the .NET MAUI code<\/li>\n<li><code>ModifyMapping<\/code> which runs instead of the .NET MAUI code<\/li>\n<li><code>AppendToMapping<\/code> which runs after the .NET MAUI code<\/li>\n<\/ul>\n<p>For this case it doesn&#8217;t matter which one we use, as it will be called at least once, and no other implementation on the <code>Entry<\/code> will touch the native properties we need to modify. Here the coded uses <code>ModifyMapping<\/code> and adds an entry called &#8220;NoUnderline&#8221;. Typically the property matches the name of an actual property, however in this case we are introducing a new one.<\/p>\n<p>The <code>h<\/code> in the action is the handler which gives us access to the <code>PlatformView<\/code> which in this case is of Android type <code>TextView<\/code>. At this point the code is working directly with the Android SDK.<\/p>\n<p>With the underline now out of the way, you can implement your own design of, say, a bordering box like old-school Windows Phone.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2022\/04\/border_entry.png\" alt=\"border around an entry view\" \/><\/p>\n<pre><code class=\"language-xaml\">&lt;Border Stroke=\"{StaticResource Black}\"\r\n        StrokeThickness=\"2\"\r\n        StrokeShape=\"Rectangle\"&gt;\r\n    &lt;Entry\r\n        Margin=\"20,4\"\r\n        Placeholder=\"Username\" \/&gt;\r\n&lt;\/Border&gt;<\/code><\/pre>\n<p>For more examples on how you can easily modify the look and feel of controls at the cross-platform as well as platform specific layers, check out the <a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/user-interface\/handlers\/customize\">documentation for customizing controls<\/a>.<\/p>\n<h2>We need your feedback<\/h2>\n<p>Install the latest preview of Visual Studio 2022 for Windows (17.2 Preview 3) following our <a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/get-started\/first-app\">simple guide<\/a> and build your first multi-platform application today. <\/p>\n<p>We&#8217;d love to hear from you! As you encounter any issues, file a <a href=\"https:\/\/github.com\/dotnet\/maui\/issues\/new\/choose\">report on GitHub at dotnet\/maui<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>.NET MAUI Release Candidate is now feature complete, API stable for the upcoming GA release. Get started today to build app for Android, Windows, iOS, and macOS.<\/p>\n","protected":false},"author":553,"featured_media":39409,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[685,7233],"tags":[7239,7238,7246,7245,7622,7620,7621],"class_list":["post-39408","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnet","category-maui","tag-dotnet-6","tag-net-maui","tag-android","tag-ios","tag-macos","tag-release-candidate","tag-windows"],"acf":[],"blog_post_summary":"<p>.NET MAUI Release Candidate is now feature complete, API stable for the upcoming GA release. Get started today to build app for Android, Windows, iOS, and macOS.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/39408","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=39408"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/39408\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/39409"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=39408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=39408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=39408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}