.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.
Top comments (0)