{"id":33794,"date":"2021-08-10T15:30:07","date_gmt":"2021-08-10T22:30:07","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/dotnet\/?p=33794"},"modified":"2021-08-11T10:40:43","modified_gmt":"2021-08-11T17:40:43","slug":"announcing-net-maui-preview-7","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/announcing-net-maui-preview-7\/","title":{"rendered":"Announcing .NET MAUI Preview 7"},"content":{"rendered":"<p>.NET 6 Preview 7 is now available, and we have introduced all new layouts for <a href=\"https:\/\/docs.microsoft.com\/dotnet\/maui\/\">.NET Multi-platform App UI<\/a> (MAUI). This is a significant change for performance and reliability. We are excited to also introduce some new accessibility focused capabilities based on the new SemanticService, font scaling options, compatibility support for Xamarin.Forms Effects, and more.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2021\/08\/grid-landscape.png\" alt=\"Grid landscape\" \/><\/p>\n<h2>New Layouts<\/h2>\n<p>Up to now the layouts you&#8217;ve been using in .NET MAUI are the Xamarin.Forms layouts that were made aware of how to size and position both renderers and the new handler based controls. We began with this approach in order to quickly put UI on screen and focus our efforts on completing our library of UI 40 controls, and to prove out our ability to be compatible with projects migration from Xamarin.Forms. At the same time, we have been building optimized layouts based on a new LayoutManager approach employing our 7 years of Xamarin.Forms layout learning to optimize for consistency, performance, and maintainability.<\/p>\n<p>In this preview, the old layouts are now only to be found in the Microsoft.Maui.Controls.Compatibility namespace, and the new layouts are enabled by default as:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/layouts\/grid\">Grid<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/layouts\/flex-layout\">FlexLayout<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/layouts\/stacklayout\">StackLayout<\/a>\n<ul>\n<li>HorizontalStackLayout<\/li>\n<li>VerticalStackLayout<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>StackLayout now wraps two layouts focused on horizontal and vertical orientations. We recommend choosing the one that fits your layout need. The StackLayout still has an orientation property you can set, and in some cases this is essential when your adaptive layouts my change orientation based on screen size or device idiom.<\/p>\n<p>Each layout has an accompanying LayoutManager responsible for measuring and positioning views. The Measure method takes height and width constraints, and is responsible for measuring all of hte layout&#8217;s children. The ArrangeChildren then sets the size and position of each view according to the rules of the layout. For very advanced cases, you may override the CreateLayoutManager method of a layout to provide a custom implementation of ILayoutManager.<\/p>\n<p>One of the immediate updates you&#8217;ll noticed is the leveling of default spacing values on these layouts: 0. If you have used the legacy layouts, then you are already aware of different, arbitrary values previously set there. Zero sets a more clear expectation, and directs you to set your preferred values that meet your design needs. For convenience, set these starting values in your global styles:<\/p>\n<pre><code class=\"language-xaml\">&lt;ResourceDictionary&gt;\r\n    &lt;Style TargetType=\"StackLayout\"&gt;\r\n        &lt;Setter Property=\"Spacing\" Value=\"6\"\/&gt;\r\n    &lt;\/Style&gt;\r\n\r\n    &lt;Style TargetType=\"Grid\"&gt;\r\n        &lt;Setter Property=\"ColumnSpacing\" Value=\"6\"\/&gt;\r\n        &lt;Setter Property=\"RowSpacing\" Value=\"6\"\/&gt;\r\n    &lt;\/Style&gt;\r\n&lt;\/ResourceDictionary&gt;<\/code><\/pre>\n<p><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/layouts\/absolutelayout\"><code>AbsoluteLayout<\/code><\/a> and <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/layouts\/relativelayout\"><code>RelativeLayout<\/code><\/a> now exist only in the compatibility namespace, and we recommend you closely consider whether you really need to use them or not. Where possible, use one of the layouts listed above. In the meantime, you can update your code to use them by adding the new namespace, and prefixing your XAML references:<\/p>\n<pre><code class=\"language-xaml\">&lt;ContentPage\r\n    xmlns:cmp=\"clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls\"\r\n    ...\r\n    &gt;\r\n    &lt;cmp:AbsoluteLayout&gt;\r\n        ...\r\n    &lt;\/cmp:AbsoluteLayout&gt;\r\n&lt;\/ContentPage&gt;<\/code><\/pre>\n<p>The .NET Upgrade Assistant is <a href=\"https:\/\/github.com\/dotnet\/upgrade-assistant\/issues\/774\">being updated for all of these changes<\/a>, and we&#8217;ll do our best to guide you through them, if not handle them for you during the upgrade process.<\/p>\n<p>We will be giving a lot of focus to polishing up these new layouts through the next several sprints, so please give them a look and <a href=\"https:\/\/github.com\/dotnet\/maui\/issues\/new\/choose\">file any issues<\/a> you observe as you explore using them.<\/p>\n<h2>Accessibility Changes and Improvements<\/h2>\n<p>We meet monthly with several developers across a variety of companies heavily invested in delivering applications that meet the highest accessibility rating. From these meetings we have made a few changes and additions to our accessibility support making it easier for everyone to product accessible apps.<\/p>\n<h3>TabIndex and IsTabStop Removed<\/h3>\n<p>TabIndex and IsTabStop properties were introduced in Xamarin.Forms to help developers control the order in which UI elements would be read by a screen reader. In practice, they ended up being confusing and not meeting that need. In .NET MAUI we recommend a thoughtful design approach that orders your UI as you would want it to be read, rather than looking for programmatic ways to manipulate the structure of your interface. For cases when you must take control over the order, we recommend the community toolkit&#8217;s <a href=\"https:\/\/github.com\/xamarin\/XamarinCommunityToolkit\/pull\/1240\"><code>SemanticOrderView<\/code><\/a> which will be available in the .NET MAUI version of the same.<\/p>\n<h3>SetSemanticFocus and Announce<\/h3>\n<p>Part of the new <code>SemanticExtensions<\/code> class, we have added a new <code>SetSemanticFocus<\/code> method allows you to move screen reader focus to a specific element. Compare this to <code>VisualElement.Focus<\/code> which sets input focus.<\/p>\n<pre><code class=\"language-xaml\">&lt;VerticalStackLayout&gt;\r\n    &lt;Label\r\n        Text=\"Explore SemanticExtensions below\"\r\n        TextColor=\"RoyalBlue\"\r\n        FontAttributes=\"Bold\"\r\n        FontSize=\"16\"\r\n        Margin=\"0,10\"\/&gt;\r\n    &lt;Button\r\n        Text=\"Click to set semantic focus to label below\"\r\n        FontSize=\"14\"\r\n        Clicked=\"SetSemanticFocusButton_Clicked\"\/&gt;\r\n    &lt;Label\r\n        x:Name=\"semanticFocusLabel\"\r\n        Text=\"Label receiving semantic focus\"\r\n        FontSize=\"14\"\/&gt;\r\n&lt;\/VerticalStackLayout&gt;<\/code><\/pre>\n<pre><code class=\"language-csharp\">private void SetSemanticFocusButton_Clicked(object sender, System.EventArgs e)\r\n{\r\n  semanticFocusLabel.SetSemanticFocus();\r\n}<\/code><\/pre>\n<p>Within Essentials we have added another new method, <code>Announce<\/code>, which sets the text to be announced by the screen reader. On a button click, for example, you can trigger the following important message to be read:<\/p>\n<pre><code class=\"language-csharp\">void Announce_Clicked(object sender, EventArgs e)\r\n{\r\n  SemanticScreenReader.Announce(\"Make accessible apps with .NET MAUI\");\r\n}<\/code><\/pre>\n<h2>Font Scaling<\/h2>\n<p>All controls across all platforms now have <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/1774\">font scaling<\/a> enabled by default. This means as your application users adjust their text scaling preferences in the OS, your UI will reflect their choice. This produces a more accessible app by default.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2021\/08\/font-scaling.png\" alt=\"the same UI at different text scaling\" \/><\/p>\n<p>Each control has an added <code>FontAutoScalingEnabled<\/code>, and it even works with <code>FontImageSource<\/code> for your font icons. Setting a <code>FontSize<\/code> is your 100% size, and to lock it in you&#8217;ll set <code>FontAutoScalingEnabled=\"false\"<\/code>.<\/p>\n<pre><code class=\"language-xaml\">&lt;VerticalStackLayout&gt;    \r\n    &lt;Label \r\n        Text=\"Scaling disabled\" \r\n        FontSize=\"18\"\r\n        FontAutoScalingEnabled=\"False\"\/&gt;\r\n    &lt;Label \r\n        Text=\"Scaling enabled\" \r\n        FontSize=\"18\"\/&gt;\r\n&lt;\/VerticalStackLayout&gt;<\/code><\/pre>\n<p>Be sure to review your screens and adjust styling as needed to make sure they are usable at all sizes.<\/p>\n<h2>Additional Highlights<\/h2>\n<p>Also in this release are several other notable additions.<\/p>\n<ul>\n<li>We have added support for <a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/app-fundamentals\/effects\/introduction\"><code>Effects<\/code><\/a>, which will support projects upgrading from Xamarin.Forms. <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/1574\">#1574<\/a>.<\/li>\n<li>AppThemeBinding improvements for supporting dark and light theme modes <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/1657\">#1657<\/a><\/li>\n<li>ScrollView handler <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/1669\">#1669<\/a><\/li>\n<li>Android Shell ported to core <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/979\">#979<\/a><\/li>\n<li>Shell navigation passing complex objects <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/2004\">#204<\/a><\/li>\n<li>Visual Tree Helper added for XAML Hot Reload <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/1845\">#1845<\/a><\/li>\n<li>Switch to System.ComponentModel.TypeConverter <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/1725\">#1725<\/a><\/li>\n<li>Window lifecycle events <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/1754\">#1754<\/a><\/li>\n<li>Page navigation events <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/1812\">#1812<\/a><\/li>\n<li>CSS prefix updated to <code>-maui<\/code> <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/1877\">#1877<\/a><\/li>\n<\/ul>\n<p>For a full set of changes, review the <a href=\"https:\/\/github.com\/dotnet\/maui\/compare\/release\/6.0.1xx-preview7...release\/6.0.1xx-preview6\">branch comparison<\/a>.<\/p>\n<h2>Get Started Today<\/h2>\n<p>First thing&#8217;s first, install .NET 6 Preview 7. Next add the <code>maui<\/code> workload using <code>maui-check<\/code>. Also make sure you have updated to the latest preview of Visual Studio 2022.<\/p>\n<blockquote><p>In future versions of Visual Studio 2022 .NET MAUI will be installed alongside other workloads. For now <code>maui-check<\/code> from the CLI is our recommendation for installing everything you need.<\/p><\/blockquote>\n<p>Ready? Open Visual Studio 2022 Preview 3 and create a new project. Search for and select .NET MAUI.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2021\/08\/vs-create-project-maui.jpg\" alt=\"Visual Studio 2022 new project dialog, Announcing .NET MAUI Preview 7\" width=\"1024\" height=\"680\" \/><\/p>\n<p>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>.<\/p>\n<h2>Feedback Welcome<\/h2>\n<p>Visual Studio 2022 previews are rapidly enabling new features for .NET MAUI. As you encounter any issues with debugging, deploying, and editor related experiences, please use the Help &gt; Send Feedback menu to report your experiences.<\/p>\n<p>At the time of release, we are troubleshooting the latest Windows App SDK <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ProjectReunion.MicrosoftSingleProjectMSIXPackagingToolsDev17\">Single-project MSIX extension<\/a> for Visual Studio 2022 and .NET MAUI to address a failure to debug. You can successfully deploy the Windows app directly and run it from the Start menu.<\/p>\n<p>Please let us know about your experiences using .NET MAUI Preview 7 to create new applications by engaging with us on GitHub at <a href=\"https:\/\/github.com\/dotnet\/maui\">dotnet\/maui<\/a>.<\/p>\n<p>For a look at what is coming in future releases, visit our <a href=\"https:\/\/github.com\/dotnet\/maui\/wiki\/roadmap\">product roadmap<\/a>, and for a status of feature completeness visit our <a href=\"https:\/\/github.com\/dotnet\/maui\/wiki\/status\">status wiki<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>.NET MAUI Preview 7 is now available with new layouts, improved accessibility, font scaling, and more.<\/p>\n","protected":false},"author":553,"featured_media":33792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[685,7233],"tags":[4,7238],"class_list":["post-33794","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnet","category-maui","tag-net","tag-net-maui"],"acf":[],"blog_post_summary":"<p>.NET MAUI Preview 7 is now available with new layouts, improved accessibility, font scaling, and more.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/33794","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=33794"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/33794\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/33792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=33794"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=33794"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=33794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}