.NET MAUI — 7 Cool New features (+400ms Optimization Benchmark)🚀

.NET MAUI is a new toolkit for building apps that run on many different devices. People who use C# and .NET can use it to create cross-platform apps.

It has new features including an easier UI design, rich set of controls, and easy data binding. There are 7 new cool features in the latest preview of .NET MAUI. Let’s check it.

ImageButton

The ImageButton view can combine a Button and an Image into one button. When someone clicks the ImageButton, it does something different than if they click a Button. It has no idea of what is written on the text and how it is displayed, as opposed to the Button view.

WebView

WebView renders any online or embedded HTML material using the platform’s native browser control; suitable for displaying markup that is more complicated than the subset of HTML supported by Label.

BoxView

BoxView is a basic rectangle with a given width, height, and color. It could be used for BoxView decorating, basic graphics, and touch interaction with the user.

IndicatorView

The IndicatorView is a control that shows indications in a CarrouselView that reflect the number of items and the current position:

Ecosystem Controls

DevExpress, Syncfusion, and Telerik have all recently released new sets of controls for.NET MAUI that take use of Microsoft’s strong graphics capabilities. Maui.Graphics.

Shadows, corners, and borders

Here we have Microsoft.Maui.Graphics library, that offers an uniform UI drawing API based on native graphics engines, allowing us to quickly add borders, corner rendering, and gorgeous shadows to nearly any .NET MAUI layout or control.

Microsoft offers a new border control. It may be used to provide borders and individual corner management on any layout or control. This functionality is accessible in WPF, UWP, Silverlight, and the most recent Windows App SDK templates.

In this example, we can see how is used a border check to wrap the counter label in order to round the top-left and bottom-right corners. This is an excellent choice for small business owners that are downsizing or wanting to create a more minimalist appearance on their new site.

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

The specified shape’s corner radius accepts a Thickness type value, allowing separate control of each of the rectangle’s four corners: bottom-left, bottom-right, top-left and top-right.

The border control can make your content wrap around. You can customize the background color and padding. There are more attributes that you can change, including:

StrokeLineCap: is a form that appears at the end of a line.
StrokeDashOffset: is the distance between the dots in the dash pattern.
StrokeMiterLimit: set the miter length ratio to half of the stroke thickness.
StrokeLineJoin: a type of vertices join.
StrokeDashArray: a dash and gap pattern in the stroke.

Are you ready to give your user interface some depth? Any layout or control, including pictures and objects, can be given with Shadow 👇

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

This is the result:

Android Quick Start

Ahead-of-time (AOT) compilation helps your Android application to code faster. If you’re trying to stay below the wifi installation bar, then full AOT may make your app’s artifacts larger than you want. Startup tracing is a solution in this case.

You can balance performance and space by only partially AOT’ing the parts of your program that run at startup

The following are the results of device testing on the Pixel 5:

400ms benchmark

Here we can see an incredible increase in the performance made by Jonathan Peppers.

He found a systemic problem with Xamarin.Android class libraries:

Include AndroidX & Google Material
Include at least one @(AndroidResource) and use the ID from C#
Resource.designer.cs has 2,700+ fields

This problem compounds itself as you include more class libraries that depend on each other. The main app will end up repeatedly setting these fields at startup for each library that contains fields in Resource.designer.cs.

Reviewing the .NET MAUI fields, Jonathan Peppers found:

src\Core\src\obj\Debug\net6.0-android\Resource.designer.cs
5310
src\Controls\src\Core\obj\Debug\net6.0-android\Resource.designer.cs
5167 fields
src\Controls\src\Xaml\obj\Release\net6.0-android\Resource.designer.cs
5167 fields
src\Compatibility\Core\src\obj\Debug\net6.0-android\Resource.designer.cs
5333 fields
src\Essentials\src\obj\Debug\net6.0-android\Resource.designer.cs
204 fields

He found 21,497 fields were set at startup for a dotnet new maui app in Resource.designer.cs

To solve this problem, he came up with a new pattern.

He only copy the contents of Resource.designer.cs and manually delete all the fields we don't need.

Results

Building a dotnet new maui then dotnet build -c Release and
running on a Pixel 5.

Before:

21,497 fields set at startup in UpdateIdValues()
Activity Displayed: 1s454ms
.apk size: 17300275 bytes

After:

65 fields set at startup in UpdateIdValues()
Activity Displayed: 1s079ms
.apk size: 16677683 bytes

You can check the benchmark at GitHub

Conclusion

The news and features of.NET MAUI are numerous; however, the most of them have yet to be properly utilized, and we will have to wait for Microsoft to explore them in depth in the not-too-distant future.

If you liked this article, don’t forget to FOLLOW US, so that you can be one of the first to read what’s new in .NET.

Blog