BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News .NET MAUI Preview 9: Borders, Corners, Shadows and Performance Improvements

.NET MAUI Preview 9: Borders, Corners, Shadows and Performance Improvements

This item in japanese

Bookmarks

.NET Multi-platform App UI (.NET MAUI) is the evolution of Xamarin.Forms that expands capabilities beyond mobile Android and iOS into native desktop apps for Windows and macOS. The latest version of it, Preview 9, is here and brings a lot of improvements and interesting stuff for developers. Preview 9 is now available with .NET 6 RC2 and the preview version of Visual Studio 2022 (Preview 5). 

The Preview 9 is another version of .NET MAUI, and developers can expect regular Preview versions each month until the Q1 of 2022 when the first release candidate will be available; another planned quarter is the Q2 of 2022, which is for the global availability version. As stated in Scott Hunters’s post:

.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.

This month's release of the .NET MAUI Preview edition introduces the support for borders, corners, and shadows for the controls and layouts. Besides those, the focus of Preview 9 was also on finalizing more than fifty controls and layouts. Preview 9 now ships with a .NET MAUI startup tracing profile which will improve the performance of Android applications startup time.

Regarding the updates for .NET MAUI app startup time on Android OS, there is an interesting GitHub pull request made by Jonathan Peppers for a custom Resource.designer.cs. As can be understood from the original dev blog by Microsoft, Peppers found a way to get an additional 400ms improvement by optimizing the Android resource designer file. There was a couple of community interactions in the comments below the post, but regarding these benchmark values, David Ortinau answered the following:

Each benchmark report should be looked at individually, and that 400ms was for that specific app and configuration. The impact of the change on another application and device will vary...

With each monthly release, .NET MAUI brings a lot of interesting UI-related updates. Developers can now add borders, render corners, and shadows to most of the controls or layouts in .NET MAUI. This is possible with the usage of Microsoft.Maui.Graphics library, which is a cross-platform graphics library for iOS, Android, Windows, macOS, Tizen, and Linux completely in C#. It is based on a native graphics engine and it provides a consistent UI drawing API.

Adding the border to the layout or controls is now possible with the usage of new Border controls. It wraps the control or layout and provides a way to control each independent corner for radius adjustments. The corner radius is using the Thickness type.

<Border 
    Grid.Row="2"
    Padding="16,8"
    Stroke="{StaticResource PrimaryBrush}"
    Background="#2B0B98"
    StrokeThickness="4"
    HorizontalOptions="Center">
    <Border.StrokeShape>
        <RoundRectangle CornerRadius="40,0,0,40"/>
    </Border.StrokeShape>
    <Label 
        Text=".NET MAUI Preview: 9"                
        FontSize="18"
        FontAttributes="Bold"
        TextColor="White"
        x:Name="CounterLabel" />
</Border>

Adding depth to the user interface part of an app is easier than ever with the new Shadow feature. It can be used with any layout or control, and also with images and shapes.

<Image>
    <Image.Shadow>
        <Shadow Brush="#000000" 
                Offset="20,20"
                Radius="40"
                Opacity="0.8"/>
    </Image.Shadow>
</Image>

A couple of component vendors already started using the support provided in Microsoft.Maui.Graphics which lead to recent releases of new sets of controls for the .NET Multi-platform App UI.

Other notable controls which got updated implementations in the latest preview are BoxView, IndicatorView, ImageButton, and WebView.

To follow the project development progress and future releases of .NET MAUI, the official roadmap is available on the GitHub wiki roadmap.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT