.NET MAUI — 7 Cool New features (+400ms Optimization Benchmark)🚀
Tags: csharp, dotnet, netcore, netmaui
Published: 2021-11-02 14:58:00

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


![ImageButton (By. Microsoft)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fe88kolxf4enbd15qyiv.png)

---

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


![New .NET MAUI WebView](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9i9hybs9e256f1f2xwgk.png)

---

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


![.NET MAUI BoxView](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moqn4m2k2u8v8ug8fhlm.png)

---

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

![.NET MAUI IndicatorView control](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h493ao3nf9zrifjf9pnk.png)

---

## Ecosystem Controls

[DevExpress](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), [Syncfusion](https://www.syncfusion.com/blogs/post/introducing-the-first-set-of-syncfusion-net-maui-controls.aspx), and [Telerik](https://www.telerik.com/maui-ui) have all recently released new sets of controls for.NET MAUI that take use of Microsoft’s strong graphics capabilities. Maui.Graphics.

![New .NET MAUI Ecosystem Controls](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v66ytfc21mcggbygq948.png)

---

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

![Corners and borders in .NET MAUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky1bj0qz8lkkubzhkwz2.png)

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.

```csharp
<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`` 👇

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

This is the result:

![Shadows in .NET MAUI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcdh4lauhks84cbueozm.png)

---

## 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:**

![Test](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lizksxe0e5q85tfobvp.png)

---

## 400ms benchmark
Here we can see an **incredible increase in the performance** made by [Jonathan Peppers](https://github.com/jonathanpeppers).

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:

```csharp
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](https://github.com/jonathanpeppers/CustomResourceDesigner).

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](https://github.com/dotnet/maui/pull/2606)

---

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