Boost Your Performance with .NET MAUI Components

See how to boost your .NET MAUI app’s performance with components.

In this article, I will show you how using .NET MAUI components can help you improve performance in your cross-platform applications while allowing for reduced complexity in your projects. Additionally, we will analyze configuration options to optimize rendering and data management toward them.

Tips for Optimizing Rendering and Data Management in .NET MAUI Components

Have you ever felt that your .NET MAUI application loads very slowly, even in Release mode? It might be because you are missing one or more of the following performance recommendations, which are typically learned through experience over time.

Use Compiled Bindings to Bind Data to Your Components

While developing .NET MAUI applications, you may have encountered situations where the bindings in your app do not show in your UI components, usually due to an incorrect assignment to the properties of the view model.

One of the most common ways to resolve this is by checking the Output window when running the application, where we often find that the reason for the problem was an incorrect binding, as shown in the following message:

[0:] Microsoft.Maui.Controls.Xaml.Diagnostics.BindingDiagnostics: Warning: 'Name' property not found on 'PerformanceMAUIDemo.Customer', target property: 'Microsoft.Maui.Controls.Label.Text'

This scenario often occurs when using dynamic bindings, meaning when a binding is created but the linking doesn’t occur until the application executes. The mechanism for resolving these bindings is based on reflection, which can affect the application’s performance and lead to internal exceptions, resulting in a lack of data in the graphical interface.

To solve this problem, you can choose to use compiled bindings, which are a mechanism that allows resolving binding expressions at compile time rather than at runtime. The most common and straightforward way to use them is through with x:DataType, specifying the origin of the properties of the view model.

For example, if we had this model:

public class Customer
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

Assume that you have defined a Customer object with data somewhere in your code, for example from the code-behind of the page (though it could be a view model):

public MainPage()
{
    InitializeComponent();
    BindingContext = new Customer
    {
        FirstName = "John",
        LastName = "Doe"
    };
}

The only thing you need to do to activate compiled bindings is to assign to x:DataType the type of model that you are trying to bind, as in the following example:

<ContentPage
    ...
    xmlns:local="clr-namespace:PerformanceMAUIDemo"
    x:DataType="local:Customer">

    <ContentPage.BindingContext>
        <local:Customer FirstName="John" LastName="Doe" />
    </ContentPage.BindingContext>
    ...

In this way, the Error List window will now display the unbound bindings through warnings, as shown below:

If you want the compiler to mark binding issues as errors instead of warnings, you can do so by modifying the project properties as follows:

<PropertyGroup>
    ...
    <TreatWarningsAsErrors>true</TreatWarningsAsErrors>
    <MauiStrictXamlCompilation>true</MauiStrictXamlCompilation>		
</PropertyGroup>

With this change, the application will not run until all bindings have been correctly resolved.

Avoid Creating Complex Controls on Your Own

There are occasions when we need to find ways to create complex layouts in cross-platform applications, whether to display forms, files with specific formats like PDFs, complex graphics, etc.

This becomes especially challenging when considering that users might use our applications on mobile devices, tablets and even desktop operating systems like Windows or macOS. Often, this results in developments that yield low-performance applications that don’t look good on all platforms or devices.

In the market, companies like Progress are dedicated to creating, thoroughly testing and maintaining .NET MAUI controls that allow for working with complex files and data.

For example, the Progress Telerik UI for .NET MAUI ImageEditor control is a powerful component that enables image editing, saving you from the complexity of performing operations such as applying filters, transformations, etc., on your own. Additionally, you can enable or disable tools in the editor and even create your own toolbar.

Another complex control that proves to be very useful is the .NET MAUI Scheduler. This control is designed for scenarios where reservations need to be managed through views by day, week, month and multi-day. It also supports operations for working with reservations like editing, deletion and previewing.

Within the Telerik component repository for .NET MAUI, you can also find the .NET MAUI PDF Viewer control, which stands out for its versatility in working with PDF files, allowing operations like Searches, Link Annotations, quick navigation, selection support, among many other features.

Finally, I would like to pay special attention to the .NET MAUI Chat (Conversational UI) control, which is very useful in scenarios where you need to implement a chat, whether you are creating a multipurpose chat with SignalR or want to provide conversational AI experiences to your users, without the tedious task of creating data templates, as the control supports a wide variety of message types to display in the conversation.

Optimize Device Resources

A very important recommendation is to always try to optimize device resources as much as possible. To achieve this, it is essential to avoid saturating memory with heavy graphical elements, such as 4K-sized images, long-duration GIFs, overly nested layouts or controls that are not optimized to handle large amounts of information.

Additionally, it is recommended to avoid prolonged use of long-running operations that can drain the battery in short periods, such as keeping unnecessary services running in the background, like those that allow obtaining a device’s location.

Regarding image issues, you can choose to perform optimization operations on your own before displaying them, while to avoid draining the battery, you can activate the service at set intervals, check if the position remains the same before querying the device’s location again, etc.

Improving Application Performance Using Optimized Components

Undoubtedly, one of the main goals when creating cross-platform applications is that they perform well on any device your application targets. For this reason, I will show you my Top 5 components that can help you create .NET MAUI application screens with high-performance components.

Lists with Lazy Loading, Virtualization and Pagination

Although the .NET MAUI CollectionView control has been optimized in each new version of .NET, it still suffers from some performance issues when displaying more complex layouts. One of the problems I’ve noticed is that even when specifying the property SnapPointsType="None", the .NET MAUI CollectionView somehow maintains some snap points, as can be seen in the following example:

In the image above, you can see that after scrolling, the list should scroll smoothly; however, this is not the case. In the case of the Telerik CollectionView, you can see the difference in the following image:

It is worth mentioning that by the time you read this post, things may have changed regarding this point.

Finally, it is possible to combine list-type controls with pagination using a .NET MAUI DataPager, which is very useful for allowing users to navigate through pages of results.

Displaying Table-like Data with DataGrid

Another control that is crucial for displaying information and is not available as a native control in .NET MAUI is the DataGrid type. While it is possible to simulate this kind of control using a CollectionView, the truth is that there are functionalities that would take us a long time to implement, such as editing, Search as You Type, single/multiple selection, sorting, applying filters, lazy loading, among many others.

That’s why the Progress Telerik team has created the .NET MAUI DataGrid, an extraordinary control that enables these functionalities and many more, allowing you to enable or disable them quickly from its configuration. Additionally, this fabulous control supports mechanisms to enhance performance such as Load on Demand.

Optimized Navigation

Having control over where and when elements will be displayed in the graphical interface is undoubtedly something that will allow you to create high-performance applications optimized for your use cases.

An example of these controls is the NavigationView and the SideDrawer. Although they might seem similar at first, they have different use cases.

The first is very useful when you need to define a menu-type navigation in the application. The second is useful for revealing contextual content, such as a secondary menu on the right that shows statistics, messages, filter adjustments, etc.

Create Optimized Forms from Your Models

A common and repetitive task in applications of all types is creating forms for information management. Having to create, validate, bind, etc., data to controls can seem like a straightforward task in simple contact forms, but things change when your application is data-centric, like a CRM or ERP.

In these situations, the .NET MAUI DataForm control is very helpful as it allows you to create forms with validation, grouping, customization and data saving by simply binding to a model and indicating how the form should behave, which greatly alleviates the burden on developers.

Implement Charts That Always Look Good

In mobile applications, it is very common to want to display data visually. This is useful for showing everything from a graph of a user’s remaining storage space to advanced charts that mark trends in real-time.

In critical applications, it is essential to have reliable controls that can handle a large amount of information efficiently, such as Telerik UI for .NET MAUI Chart controls, which offer a wide range of chart formats, allowing you to display any chart you want, from the typical Bar Chart to a Scatter Spline Area Chart, something that is not easily found in free projects and could take many months of development if you try to create them yourself.

Conclusion

Throughout this article, you have learned how you can create high-performance applications through tips, advice and the use of specialized components that will allow you to focus on what really matters: solving your clients’ problems.

Want to try out the .NET MAUI controls in this post, plus about 60 others?

Try UI for .NET MAUI