{"id":35253,"date":"2021-10-12T09:32:05","date_gmt":"2021-10-12T16:32:05","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/dotnet\/?p=35253"},"modified":"2021-10-13T14:07:55","modified_gmt":"2021-10-13T21:07:55","slug":"announcing-net-maui-preview-9","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/announcing-net-maui-preview-9\/","title":{"rendered":"Announcing .NET MAUI Preview 9"},"content":{"rendered":"<p>.NET Multi-platform App UI (MAUI) Preview 9 is available today with <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/announcing-net-6-release-candidate-2\/\">.NET 6 RC2<\/a> and in the preview channel of <a href=\"https:\/\/aka.ms\/vs2022preview\">Visual Studio 2022 Preview 5<\/a>. While much of the work in this preview is focused on completing and stabilizing the 50+ controls and layouts, preview 9 adds support for borders, corners, and shadows across most all controls and layouts. Preview 9 includes performance improvements to help Android apps start instantly.<\/p>\n<blockquote><p>Roadmap news: as <a href=\"https:\/\/devblogs.microsoft.com\/dotnet\/update-on-dotnet-maui\/\">Scott Hunter shared last month<\/a>, .NET MAUI will continue releasing previews monthly as we make our way to a release candidate (RC) in the first quarter of 2022, and general availability (GA) in the second quarter of 2022.<\/p><\/blockquote>\n<h2>Updated Controls<\/h2>\n<p>New in this release are updated implementations of several controls. <code>BoxView<\/code> is a simple yet flexible and adaptive view that is useful for many needs. <code>IndicatorView<\/code> pairs with any collection based control to display an index of pagination using any shape you need. <code>ImageButton<\/code> is perfect for what you need a button that is just an image. <code>WebView<\/code> uses the platform native browser control to render any online or embedded HTML content; ideal for displaying markup more complex than the subset of HTML supported by <code>Label<\/code>.<\/p>\n<p>More information:<\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/boxview\">BoxView<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/indicatorview\">IndicatorView<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/imagebutton\">ImageButton<\/a><\/li>\n<li><a href=\"https:\/\/docs.microsoft.com\/xamarin\/xamarin-forms\/user-interface\/webview\">WebView<\/a><\/li>\n<\/ul>\n<h2>Borders, Corners, and Shadows &#8211; Oh my!<\/h2>\n<p>The new <code>Microsoft.Maui.Graphics<\/code> library provides a consistent UI drawing API based on native graphics engines, and enables us to easily add borders, corner rendering, and beautiful shadows to most any layout or control in .NET MAUI.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2021\/10\/borders_corners.png\" alt=\"border image\" \/><\/p>\n<p>The new <code>Border<\/code> control can wrap any layout or control to add borders and independent control of each corner. This controls is provided in the style of WPF, UWP, Silverlight, and the latest Windows App SDK. In this example I have wrapped a border control around the counter label in our default template to add the stroke and round the top-left and bottom-right corners.<\/p>\n<pre><code class=\"language-xaml\">&lt;Border \r\n    Grid.Row=\"2\"\r\n    Padding=\"16,8\"\r\n    Stroke=\"{StaticResource PrimaryBrush}\"\r\n    Background=\"#2B0B98\"\r\n    StrokeThickness=\"4\"\r\n    HorizontalOptions=\"Center\"&gt;\r\n    &lt;Border.StrokeShape&gt;\r\n        &lt;RoundRectangle CornerRadius=\"40,0,0,40\"\/&gt;\r\n    &lt;\/Border.StrokeShape&gt;\r\n    &lt;Label \r\n        Text=\".NET MAUI Preview: 9\"                \r\n        FontSize=\"18\"\r\n        FontAttributes=\"Bold\"\r\n        TextColor=\"White\"\r\n        x:Name=\"CounterLabel\" \/&gt;\r\n&lt;\/Border&gt;<\/code><\/pre>\n<p>The corner radius of the provided shape accepts a <code>Thickness<\/code> type value which enables independent control of each corner of the rectangle: top-left, top-right, bottom-left, bottom-right.<\/p>\n<p>The border control does add a wrapping view element around a single content, so you can set a background color or padding as needed. Several other properties are available to customize the stroke of the border such as:<\/p>\n<ul>\n<li>StrokeDashArray: pattern of dashes and gaps in the stroke<\/li>\n<li>StrokeDashOffset: distance within the dash pattern<\/li>\n<li>StrokeLineCap: shape at the end of a line<\/li>\n<li>StrokeLineJoin: type of join at the vertices<\/li>\n<li>StrokeMiterLimit: limit on the ration of the miter length to half of the stroke thickness<\/li>\n<\/ul>\n<blockquote><p>In a future version we&#8217;ll investigate adding a markup helper for setting the stroke shape directly rather than instantiating a shape.<\/p><\/blockquote>\n<p><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2021\/10\/shadow.png\" alt=\"shadow image\" \/><\/p>\n<p>Ready to add some depth to your UI? Add a <code>Shadow<\/code> to any layout or control, including images and shapes.<\/p>\n<pre><code class=\"language-xaml\">&lt;Image&gt;\r\n    &lt;Image.Shadow&gt;\r\n        &lt;Shadow Brush=\"#000000\" \r\n                Offset=\"20,20\"\r\n                Radius=\"40\"\r\n                Opacity=\"0.8\"\/&gt;\r\n    &lt;\/Image.Shadow&gt;\r\n&lt;\/Image&gt;<\/code><\/pre>\n<h2>Quick Android Startup<\/h2>\n<p>Ahead-of-time (AOT) compilation makes a big difference in how quickly your applications can code start on Android. Full AOT may also make your application artifacts larger than you wish if you&#8217;re working to remain below the wifi installation bar. In this situation, Startup Tracing is the answer. By partially AOT&#8217;ing only the parts of your application executed during startup (by tracing the path of startup execution, hence the name), we are able to balance speed and size.<\/p>\n<p>Preview 9 now ships with a .NET MAUI startup tracing profile, and can be used when building <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/2496\" target=\"_blank\" rel=\"noopener\">from command line<\/a>.<\/p>\n<p>Benchmark numbers from Pixel 5 device tests:<\/p>\n<table>\n<thead>\n<tr>\n<th style=\"text-align: right;\"><\/th>\n<th style=\"text-align: right;\">[Android App][1]<\/th>\n<th style=\"text-align: right;\">[.NET MAUI App][2]<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"text-align: right;\">JIT startup time (s)<\/td>\n<td style=\"text-align: right;\">00:00.4387<\/td>\n<td style=\"text-align: right;\">00:01.4205<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right;\">AOT startup time (vs. JIT)<\/td>\n<td style=\"text-align: right;\">00:00.3317 ( 76%)<\/td>\n<td style=\"text-align: right;\">00:00.7285 ( 51%)<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right;\">Profiled AOT startup time (vs. JIT)<\/td>\n<td style=\"text-align: right;\">00:00.3093 ( 71%)<\/td>\n<td style=\"text-align: right;\">00:00.7098 ( 50%)<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right;\">JIT <code>.apk<\/code> size (B)<\/td>\n<td style=\"text-align: right;\">9,155,954<\/td>\n<td style=\"text-align: right;\">17,435,225<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right;\">AOT <code>.apk<\/code> size (vs. JIT)<\/td>\n<td style=\"text-align: right;\">12,755,672 (139%)<\/td>\n<td style=\"text-align: right;\">44,751,651 (257%)<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: right;\">Profiled AOT <code>.apk<\/code> size (vs. JIT)<\/td>\n<td style=\"text-align: right;\">9,777,880 (107%)<\/td>\n<td style=\"text-align: right;\">23,210,787 (133%)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>We have a <a href=\"https:\/\/github.com\/dotnet\/maui\/issues\/2740\">pull request<\/a> for making this the default profile for .NET MAUI applications built in release configuration.<\/p>\n<blockquote><p>Jonathan Peppers also <a href=\"https:\/\/github.com\/dotnet\/maui\/pull\/2606\">found an additional 400ms improvement<\/a> by optimizing the Android resource designer file.<\/p><\/blockquote>\n<h2>Ecosystem Controls<\/h2>\n<p><a href=\"https:\/\/community.devexpress.com\/blogs\/mobile\/archive\/2021\/09\/30\/net-maui-free-early-access-preview-of-data-editors-and-more-for-mobile-development-v21-2.aspx\">DevExpress<\/a>, <a href=\"https:\/\/www.syncfusion.com\/blogs\/post\/introducing-the-first-set-of-syncfusion-net-maui-controls.aspx\">Syncfusion<\/a>, and <a href=\"https:\/\/www.telerik.com\/maui-ui\">Telerik<\/a> have recently all shipped new sets of controls for .NET MAUI, and are making use of the powerful graphics support provided in <code>Microsoft.Maui.Graphics<\/code>.<\/p>\n<p><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/devblogs.microsoft.com\/dotnet\/wp-content\/uploads\/sites\/10\/2021\/10\/vendor_gallery.png\" alt=\"vendor control images, Announcing .NET MAUI Preview 9\" width=\"1920\" height=\"559\" \/><\/p>\n<h2>Get Started Today<\/h2>\n<p>First thing&#8217;s first, install Visual Studio 2022 Preview 5 and check .NET MAUI (preview) under the Mobile Development with .NET workload, and check the Universal Windows Platform development workload.<\/p>\n<p>Now, install the Windows App SDK <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ProjectReunion.MicrosoftSingleProjectMSIXPackagingToolsDev17\">Single-project MSIX extension<\/a>. Before running the Windows target, remember to uncomment the framework in the csproj file.<\/p>\n<p>Ready? Open Visual Studio 2022 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\/10\/vs22_p4_new_project.jpg\" alt=\"Visual Studio 2022 new project dialog, Announcing .NET MAUI Preview 9\" width=\"1009\" height=\"673\" \/><\/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<p>If you are migrating a project from another preview, check out our migration notes in the <a href=\"https:\/\/github.com\/dotnet\/maui\/wiki\">dotnet\/maui wiki<\/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>Please let us know about your experiences using .NET MAUI 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>The next .NET MAUI preview is now available with borders, corners, and shadows &#8211; oh my!<\/p>\n","protected":false},"author":553,"featured_media":35254,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[685,7233],"tags":[7238,7244],"class_list":["post-35253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnet","category-maui","tag-net-maui","tag-maui"],"acf":[],"blog_post_summary":"<p>The next .NET MAUI preview is now available with borders, corners, and shadows &#8211; oh my!<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/35253","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=35253"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/35253\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/35254"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=35253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=35253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=35253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}