.NET MAUI Team Blog

.NET MAUI Memory Profiling — Identify and Fix Memory Leaks

Alexander Russkov (DevExpress) — Mon, 04 Nov 2024 23:05:00 Z

Why is proper memory management crucial when modern devices ship with gigabytes of RAM? In simple terms, memory leaks can significantly degrade performance, drain device batteries, and/or crash an app. In this blog post, I'll outline common .NET MAUI-related memory leaks and show you how to locate/address leaks using .NET Meteor and Heapview. If you've never used .NET Metear or Heapview, feel free to watch the following short YouTube video first:

Common Memory Leaks in .NET MAUI

Before diving into common .NET MAUI memory leaks, let's first review the fundamentals of .NET memory management.

As you know, managed memory is overseen by the garbage collector (GC), which handles both memory allocation and deallocation when objects are no longer in use. Memory allocated to an object can only be reclaimed if no strong references to the object exist from other objects. The GC can detect cyclic references, so even if ObjectA and ObjectB reference one another, they can still be collected and released.

It's important to remember that the garbage collector only manages .NET objects. If an object allocates unmanaged memory, you must call Dispose . You can do so explicitly or by adding the using statement to the variable definition:

//implicit dispose 
using var fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read) 

//explicit dispose
var fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read) 
//... 
fileStream.Dispose()

The using statement ensures that the compiler automatically calls Dispose when a variable goes out of scope.

With that brief overview, let's review some common memory leaks in .NET MAUI-powered applications and what you can do to address them. If you'd like to follow along to this blog post, please download the following sample GitHub project:

Download Test Application

Reference from a long-lived object or static property

One common cause of memory leaks is creating a strong reference from an object that persists for the entire application runtime. For example, if you reference a child page from AppShell, the child page will never be released. The same issue can arise if you create a reference from a static property:

public partial class AppShell : Shell { 
    public List<ContentPage> OpenedChildPages = new List<ContentPage>(); 
    public AppShell() { 
        InitializeComponent(); 
    } 
} 

public partial class DirectReferenceLeakPage : ContentPage { 
    public DirectReferenceLeakPage () { 
        InitializeComponent(); 
       ((AppShell)App.Current.MainPage).OpenedChildPages.Add(this);    
    } 
 }

To address the leak, remove the strong reference in the OnDisappearing event handler. If the same page instance can be opened multiple times, create the reference in the OnAppearing event handler instead of the page constructor:

private void OnDisappearing(object sender, EventArgs e) { 
    ((AppShell)App.Current.MainPage).OpenedChildPages.Remove(this); 
} 

private void OnAppearing(object sender, EventArgs e) { 
    ((AppShell)App.Current.MainPage).OpenedChildPages.Add(this); 
}

Event Handler or Function Delegate

When you subscribe to an event, the event source holds a reference to the subscriber (to be able to call its handler). A memory leak only occurs if you subscribe to a long-lived object event. If the event source and the subscriber have the same lifetime, leaks will not occur. For instance, subscribing to the Clicked event of a Button on the same page won't cause a leak (because the .NET garbage collector detects cycles and releases objects that reference each other).

The following code will cause a leak because the long-lived Accelerometer object holds a reference to the Accelerometer_ReadingChanged delegate:

public partial class EventLeakPage : ContentPage 
{ 
    public EventLeakPage() { 
        InitializeComponent(); 
        Accelerometer.ReadingChanged += Accelerometer_ReadingChanged; 
    } 
    private void Accelerometer_ReadingChanged(object sender, AccelerometerChangedEventArgs e) { 
        //... 
    } 
}

The same issue can occur if you pass a function delegate to a long-lived object. A common example is the Dispatcher.StartTimer method, which accepts a function delegate as its second parameter:

public partial class DelegateLeakPage : ContentPage { 
    public DelegateLeakPage() { 
        InitializeComponent(); 
        Dispatcher.StartTimer(TimeSpan.FromSeconds(1), TimerTick);    
    } 
    bool TimerTick() { 
         //...
    } 
}

To address the issue, subscribe or unsubscribe from events when a page is displayed and hidden:

private void OnAppearing(object sender, EventArgs e) { 
   Accelerometer.ReadingChanged += Accelerometer_ReadingChanged; 
} 

private void OnDisappearing(object sender, EventArgs e) { 
   Accelerometer.ReadingChanged -= Accelerometer_ReadingChanged; 
}

Controls with a Memory Leak

If a page includes at least one control that isn't properly released, it will prevent the entire page from being released. This happens because all .NET MAUI controls include a Parent property. All references stored in Parent point back to the page.

A potential fix is to replace the problematic component with a different control or remove it when a user navigates to another page.

Singleton View

As you may know, Dependency Injection (DI) allows you to register objects as transients or singletons. Transient objects are created anew each time they are requested from the DI container, whereas singleton objects are instantiated only once (with the DI container returning the same instance for each request).

mauiAppBuilder.Services.AddTransient<MyPage>(); 
mauiAppBuilder.Services.AddSingleton<MyPage>();

If you register a page as a singleton, the DI container will create only one instance of the page and reuse it each time you navigate to it. Although the page will never be released, this isn't considered a memory leak because the number of stored pages remains constant regardless of how often you navigate to it. This technique is akin to caching and can be useful for frequently accessed pages.

Memory Profiling with .NET Meteor and Heapview

Since .NET doesn't document memory leaks, how can we identify objects cluttering memory?

One option is to use the .NET Meteor VS Code extension (to capture a memory dump). Once captured, we can visualize the memory dump via Heapview.

Here's how to configure .NET Meteor to capture a memory dump.

Step 1: Install Tools

First, we'll need to install the appropriate tools:

Visual Studio Code - a lightweight, cross-platform editor that, with the help of a few extensions, provides all the IDE capabilities needed to develop .NET MAUI apps for multiple operating systems.
.NET Meteor - a VS Code extension for running, debugging, and profiling .NET MAUI projects.
Heapview - a cross-platform .NET tool for visualizing memory snapshots. To install it, run the following command using the Command Prompt or VS Code Terminal:
```
dotnet tool install -g dotnet-heapview
```

Step 2: Prepare App

Once we've installed the necessary tools, we must open the target project. Since VS Code does not use Visual Studio *.sln solution files, we'll need to use the Open Folder menu item and select the project folder (for this blog post, I'll use the following sample project: Common .NET MAUI Memory Leaks):

After opening the project folder, we'll navigate to the Run and Debug tab and create a launch.json file.

.NET Meteor uses settings from launch.json to run, debug, and profile apps. To profile an application, we'll need to add a configuration entry with the profilerMode attribute set to gcdump

{ 
    "version": "0.2.0", 
    "configurations": [ 
        { 
            "name": ".NET Meteor Debugger", 
            "type": "dotnet-meteor.debugger", 
            "request": "launch", 
            "preLaunchTask": "dotnet-meteor: Build" 
        }, 
        { 
            "name": ".NET Meteor Profiler", 
            "type": "dotnet-meteor.debugger", 
            "request": "launch", 
            "profilerMode": "gcdump", 
            "preLaunchTask": "dotnet-meteor: Build" 
        } 
    ] 
}

We'll now save the modified launch.json file and select the profiling configuration from the dropdown menu next to the Start button.

Next, we'll select the device used to run the project:

Step 3: Obtain a Profiling Snapshot

We can now run our sample application and collect profiling data (be certain to select Run Without Debugging).

Before collecting the memory dump, we must invoke the garbage collector's Collect and WaitForPendingFinalizers methods. We'll need to call these methods multiple times, as garbage collection occurs in several cycles. Note: in your .NET MAUI project, you can create a button for profiling purposes and trigger garbage collection via the Button.Click event handler:

GC.Collect();
GC.WaitForPendingFinalizers();

If you're running our GitHub test project, you can click the green button to invoke these methods.

We can now open the VS Code Debug Console window and execute the /dump command to generate a memory dump file (which will be added to the project folder). If following along, you should see a message like this:

Writing gcdump to '...\com.companyname.TypicalMemoryLeaks.gcdump'... 
command handled by DotNet.Meteor.Debug.GCDumpLaunchAgent 
Finished writing 672119 bytes.

If the device port used by .NET Meteor is busy (and unable to obtain the memory dump), the memory dump won't be collected. To address the issue, you should modify the Profiler Host Port setting. Navigate to VS Code Extensions Tab | Extension Settings | Profiler Host Port, and make the necessary change:

Step 4: Analyze Snapshot

The memory dump should now be in the project folder. To analyze it with Heapview, we'll open a new Terminal window in VS Code (Terminal | New Terminal) and execute the dotnet-heapview command with the memory dump file name as a parameter:

dotnet-heapview com.companyname.TypicalMemoryLeaks.gcdump

This will open the following in Heapview:

Types of objects currently held in memory.
Instances of these objects in memory.
Number of child items held by the current object.
Chain of elements that prevent the selected object from being released.

In this example, the page named DirectReferenceLeakPage (1) has three active instances (2) and seventeen references to child objects (3). In the Retainers panel, note that DirectReferenceLeakPage is part of a list of ContentPages in the AppShell object (4). Since AppShell persists throughout the application's lifecycle, it will never be released. To fix the leak, we need to remove DirectReferenceLeakPage from AppShell references.

We'll address this particular memory leak by removing the reference to DirectReferenceLeakPage in the OnDisappearing event handler:

private void OnDisappearing(object sender, EventArgs e)
{
    ((AppShell)App.Current.MainPage).OpenedChildPages.Remove(this);
}

Once the leak is fixed, we can collect the memory dump once again and open it in Helpview. Notice that DirectReferenceLeakPage can no longer be found in the retained objects view:

Summary

Needless to say, identifying the source of a memory leak can be challenging. .NET Meteor and Heapview can help you isolate unreleased objects and trace associated references (crucial for diagnosing both common and atypical memory-related issues).

If you are new to .NET MAUI or want to optimize an existing .NET MAUI project, be sure to review the following blog post: How to Profile .NET MAUI Applications and Isolate Performance-Related Issues

.NET MAUI: Check Grammar within the DevExpress HTML Edit Using OpenAI GPT Models

Anthony Sameishchev (DevExpress) — Tue, 01 Oct 2024 00:00:00 Z

Back in school, I dreamed of a magic pen that could fix all my mistakes and come up with creative ways to describe fictional characters. With AI, the magic pen is finally here.

As you know, developers are discovering numerous ways to add AI to their solutions (and it’s often easier than you’d think) thanks to easy-to-use cloud-based AI services and flexible control APIs. In this blog post, I'll use OpenAI to extend the capabilities of the DevExpress .NET MAUI HTML Edit. Specifically, I'll show you how easy it is to add AI-related capabilities to our HTML Edit Control and tweak its UI for the best possible user experience.

GitHub Example

Configure OpenAI

Until recently, only companies with dedicated machine learning experts were in position to add advanced AI features to their products. Today, thanks to powerful pretrained models with billions of parameters, leveraging AI requires minimal effort. Cloud services like OpenAI now make it easy to tackle complex business requirements, such as:

Text generation: The core feature of ChatGPT, which we'll use in this post.
Image analysis: Detect objects in images, identify boundaries, and more
Image generation: Create images from text descriptions—ideal for apps with design features or data visualization needs
Text-to-speech and speech-to-text: Seamlessly convert between spoken and written languages.

The process is even more straightforward with the OpenAI .NET library since it provides cloud APIs without directly handling HTTP requests. To get started with OpenAI, you will need to:

Sign up for OpenAI if you don't already have an account.
Visit the API Keys page to obtain your API key. Remember, OpenAI uses a credit system to monetize the service—the more powerful the model, the higher the cost. New accounts typically receive free credits unless you've created one previously.
Open your .NET MAUI project and reference the OpenAI NuGet package.
Create a ChatClient instance and pass your API key to the constructor:
```
ChatClient aiClient = new(model: "gpt-3.5-turbo", "YOUR API TOKEN");
```
We'll use the GPT 3.5 Turbo model as it's less resource-intensive, but you can always switch to a more powerful model for more complex requirements.

Configure DevExpress Components

To fully leverage AI, it's essential to create an intuitive user interface. When handling large text messages, it's helpful to support rich text formatting (lists, bold, headings) to visually separate text blocks. Accordingly, we'll use our .NET MAUI HTML Editor. Its APIs allow you to load documents from various sources and retrieve current HTML content (to send to OpenAI). We'll also incorporate buttons to trigger AI actions, using the Toolbar control (which is designed to work seamlessly with components like the DevExpress .NET MAUI HTML Editor).

Display a Document in the HTML Edit Control

With our .NET MAUI HTML Editor, you can load content from various sources like files, streams, strings, or URIs. For this example, we'll load HTML from a document stored in the application's bundle (in the Resources\Raw folder). To display the HTML, simply read the file and pass it to the HTML Editor's SetHtmlSourceAsync method:

async void OnPageAppearing(object sender, EventArgs e) {
   using Stream stream = await FileSystem.Current.OpenAppPackageFileAsync("mail.html");
   using StreamReader reader = new StreamReader(stream);
   await htmledit.SetHtmlSourceAsync(await reader.ReadToEndAsync());
}

Add a Custom Toolbar

On smaller mobile screens, incorporating multiple action buttons without compromising usability can be challenging. It's crucial to strike a balance between the number of actionable elements and their size. Additionally, you need to decide which elements to display since in many instances, you don’t need to display all actions simultaneously (as this can clutter the UI).

Our Toolbar control can help address these realities:

It automatically adjusts elements based on Material Design 3 standards, so you don’t have to worry about padding or sizing.
It allows you to group elements into pages. Said differently, you can display all AI-related actions on a separate page, displayed only when needed.

The HTML Editor includes a built-in toolbar, but we’ll hide it in favor of our custom toolbar. To do this, set the HTML Editor’s ShowToolbar property to false and create a Toolbar control with appropriate custom buttons:

<dx:SafeKeyboardAreaView>
	<Grid RowDefinitions="*,Auto">
		<dx:HtmlEdit x:Name="htmledit" ShowToolbar="false" dx:DXDockLayout.Dock="Top"/>
		<dx:DXToolbar Grid.Row="1">
			<dx:ToolbarNavigationButton Content="🪄" PageName="AIAssistant"/>
			<dx:ToolbarPage Name="AIAssistant" ShowBackButton="true">
				<dx:ToolbarButton Content="Fix Grammar ✨" Clicked="OnFixGrammarClick"/>
				<dx:ToolbarButton Content="Translate to German 🇩🇪" Clicked="OnToGermanClick"/>
				<dx:ToolbarButton Content="Enhance 🪄" Clicked="OnEnhanceClick"/>
            </dx:ToolbarPage>
		</dx:DXToolbar>
	</Grid>
</dx:SafeKeyboardAreaView>

As you'll notice, we've placed the HTML Editor and Toolbar inside the SafeKeyboardAreaView container to prevent overlap when the keyboard is opened.

Obtain an AI Response and Display it within our .NET MAUI HTML Editor

Once your custom toolbar buttons are set up, you can handle associated click events. When a button is clicked, we’ll retrieve content from the HTML Editor, send it to OpenAI, and display the response back in the DevExpress .NET MAUI HTML Editor.

To obtain HTML content, we’ll use the GetHtmlAsync method. We'll then call the CompleteChatAsync method from the OpenAI client class we configured earlier. Finally, we’ll assign the response from OpenAI to the HTML Editor:

async void OnFixGrammarClick(System.Object sender, System.EventArgs e) {
	await ExecuteChatRequest($"Fix grammar errors:{await htmledit.GetHtmlAsync()}");
}
 
async Task ExecuteChatRequest(string prompt) {
	try {
		ChatCompletion completion = await aiClient.CompleteChatAsync(new List<ChatMessage> {
		    new SystemChatMessage($"You are an assistant correcting HTML text. Use only those tag types that you can find in the source document"),
		    new UserChatMessage(prompt)
		});
		await htmledit.SetHtmlSourceAsync(completion.Content[0].Text);
	}
	catch (Exception ex) {
	    await Shell.Current.DisplayAlert("Error", ex.Message, "OK");
	}
}

The CompleteChatAsync method accepts a list of chat messages, which can be one of the following:

System: A general instruction for the model. You can define only one system message.
User: The user’s prompt, which can include additional instructions and content for the model to process.
Assistant: The model's reply. You can combine multiple user and assistant messages to build a chat history, ensuring the latest request includes all previous context.

Summary

As user/business expectations continue to rise, integrating AI capabilities will become a more and more critical. Fortunately, you don’t need to be a machine learning expert to take advantage of AI. In this post, I followed these simple steps to incorporate intelligent text enhancements into my .NET MAUI project:

Sign up for OpenAI and obtain an API key.
Add a library to your client that connects to OpenAI services.
Retrieve content from the DevExpress .NET MAUI HTML Editor using GetHtmlAsync
Add toolbar buttons to invoke AI functions.

These easy-to-follow steps can address a variety of requirements - making the dream of a "magic pen" a reality.

.NET MAUI — Early Access Preview (v24.2) & Minor Update Enhancements (v24.1.5)

Alexander Russkov (DevExpress) — Mon, 23 Sep 2024 23:00:00 Z

In this blog post, I’ll outline enhancements available in our early access preview (EAP v24.2) build. The post includes new features we expect to ship in our next major release (v24.2) and enhancements made in official minor updates (v24.1.4, v24.1.5).

Early Access Preview (v24.2)

To download/install our EAP, check “Include prerelease” when using the DevExpress NuGet feed:

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please back up your project and other important data before installing Early Access and CTP builds.

This EAP may not include all features/products we expect to ship in our v24.2 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months. For additional information on what you can expect, refer to our Year-End 2024.2 Roadmap.

Ease of Use and IDE Integration

How long does it take to go from a blank page to a fully functional view? While the amount of time varies by project, the process typically involves the following steps:

Designing a mockup
Selecting appropriate UI components
Setting up control APIs
Implementing a view model to interact with business logic

And of course, each of these steps can be broken down into smaller tasks.

One of our primary goals for the upcoming major update (v24.2) is to streamline this entire process - helping you deliver intuitive mobile apps in the shortest possible time.

To make this happen, we're introducing new project templates that include popular modules and pre-designed pages. While these templates aren't available in the current EAP release, I’d like to share our prototype with you...

In addition to templates, we're planning to introduce a toolbox packed with predefined XAML blocks, allowing you to design views by dragging items from the toolbox.

We understand that every app has unique requirements and predefined templates can't address each and every usage scenario. That's why we've made our building blocks flexible - use them as a foundation and customize them to suit your specific needs.

MVVM

We've developed a library of services, helpers, and markup extensions to make it easier to create MVVM-based applications. We didn’t create our own MVVM framework (as we did for WPF and WinForms components). Instead, we went with the Community Toolkit MVVM. Our library doesn’t replace it but enhances it with additional functionality.

Services

The following is a list of services our MVVM library includes:

NavigationService. Navigate between pages directly from your view model.
PrintService. Launch the default print dialog to print files.
SaveFilePicker. Open a dialog and allow users to save a file.

These services are registered in the default Dependency Injection (DI) container. You simply need to register your view model and define a constructor that accepts corresponding interfaces to access the service within your view model.

public class ViewModel 
{ 
    public ViewModel(INavigationService navigationService, 
                     IPrintService printService, 
                     ISaveFilePicker saveFilePickerService) 
    { 
        //navigationService.GoToAsync(...); 
        //printService.PrintAsync(...); 
        //saveFilePickerService.SaveAsync(...); 
    } 
}

If you prefer to use your own custom service implementation, you can register it in the DI container to override the default registration:

public static class MauiProgram 
{ 
    public static MauiApp CreateMauiApp() 
    { 
        //... 
        builder.Services.AddSingleton<INavigationService, NavigationServiceEx>(); 
    } 
} 
public class NavigationServiceEx : NavigationService { }

We've also implemented a UI service mechanism that allows you to interact with UI objects directly from your view model - without tying your code to a specific element type.

For instance, to force a CollectionView scroll to the last element, you can create a custom service that calls DXCollectionView.ScrollTo:

public interface IScollService  {  
    void ScrollToEnd();  
} 
public class ScollService : UIServiceBase, IScollService 
{ 
    public void ScrollToEnd() 
    { 
        DXCollectionView collection = (DXCollectionView)AssociatedObject; 
        collection.ScrollTo(collection.VisibleItemCount, DXScrollToPosition.End); 
    } 
}

Once complete, you can attach this service to your DXCollectionView:

<dx:DXCollectionView> 
    <dx:DXCollectionView.Behaviors> 
        <local:ScollService/> 
    </dx:DXCollectionView.Behaviors> 
</dx:DXCollectionView >

In your view model, you can access the registered service via the service container and trigger UI-related actions through the service interface:

public partial class ViewModel : IUIServiceClient 
{ 
    public IUIServiceContainer ServiceContainer { get; } = new UIServiceContainer(); 
  
    void ShowLastItem() 
    { 
        var scrollService = ServiceContainer.GetRequiredService<IScollService>(); 
        scrollService.ScrollToEnd(); 
    } 
}

This technique allows you to invoke UI actions in a clean, MVVM-compliant manner.

Dependency Injection

To simplify Dependency Injection, we've created a markup extension that allows you to assign a view model from the DI container directly in XAML:

<ContentPage ... 
             xmlns:dx="http://schemas.devexpress.com/maui" 
             BindingContext="{dx:Ioc Type={x:Type vm:MainViewModel}}">

    public static class MauiProgram  { 
       public static MauiApp CreateMauiApp()   { 
           //... 
           builder.Services.AddTransient<ViewModel>(); 
       } 
  }

With this extension, there's no need to create a constructor in your view to pass the view model and manually assign it to BindingContext :

//not required anymore
public MainPage(ViewModel viewModel) 
{ 
	BindingContext = viewModel; 
	InitializeComponent(); 
}

The Ioc extension allows you to inject a view model into a view, even if the view itself isn't registered in the DI container. This will be useful when you have a ContentView embedded within a parent page in XAML.

<ContentPage ...  
           x:Class="MauiExample.MainPage" > 
           <views:ChildContentView/> 
          <!--...--> 
</ContentPage> 
 
<ContentView ... 
             x:Class=" MauiExample.ChildContentView" 
             BindingContext="{dx:Ioc Type={x:Type vm:ChildViewModel}}"> 
    <!--...--> 
</ContentView>

Collection View – Frozen Group Row

You can now keep group row headers visible while scrolling, as long as at least one child row in the group is on screen. Enable the DXCollectionView.AllowFixedGroupHeaders option to incorporate this feature in your DevExpress-powered .NET MAUI app.

Asynchronous CRUD

As you know, both our .NET MAUI Collection View and .NET MAUI Data Grid controls include CRUD APIs to help you create detail and edit item forms. Since mobile apps often need to connect to remote services for data editing purposes, we've enhanced our CRUD APIs to support asynchronous operations.

Both the Collection View and Data Grid use CRUD view models to automatically transfer information between detail/edit views and handle actions like edit, save, and delete operations. We've made these commands asynchronous, so you can now execute them without freezing the UI. Additionally, we've added an IsAsyncOperationInProgress property. This property allows you to display a loading indicator during asynchronous operations.

Data Grid Multi Selection

You can now enable multiple row selection in our Data Grid. Simply set DataGridView.SelectionMode to Multiple to activate this feature.

To retrieve selected rows in your view model, bind DataGridView.SelectedItems to a ObservableCollection<T> property type.

Minor Update (v24.1)

The following is a quick overview of new features included in recent minor updates. These features are included in our official releases, so you can start using them immediately by updating your NuGet packages to the most recent version.

Collection View & Tree View – Header & Footer

Headers and footers allow you to add custom elements above and below list items. Since they scroll alongside the rest of the view, this new feature helps make efficient use of available screen space. You can define any content for your header/footer (display elements that stand out from the rest of the list).

Here are a few ways to use headers and footers:

Display favorite items at the top.
Add a collection title.
Include a button to add more items or display the full list.

Collection View & Data Grid – Unlimited Height

When displaying a small collection within a scrollable layout, you might need to disable virtualization to ensure the collection takes up the space occupied by its items. This allows you to combine CollectionView with other elements inside a ScrollView, using one vertical scrollbar. We've introduced a new property to disable virtualization in CollectionView, allowing it to expand based on its child items.

Use the ReduceSizeToContent property to enable this feature.

Data Grid Immediate Posting

In earlier versions, Data Grid cell data was only posted to the source after the active editor was closed. While this is what you expect when working with text fields, you may prefer to post changes immediately in other column types (such as CheckBox columns). To address this requirement, we've introduced an option that updates the data source instantly when a cell is modified by a user.

To enable this mode, set EnableImmediatePosting to true.

PDF Viewer Print Command

We implemented a class to invoke native device printing dialogs. This feature is accessible via a built-in toolbar item in our .NET MAUI PDF Viewer control (or directly in code).

To invoke the dialog in code, call PdfViewer.PrintDocumentAsync.

Optimized Property Initialization

We’ve reduced the time needed to initialize controls before first use.

Note: The following chart displays the time required for control initialization, not overall application startup or view opening time.

Chat Control Example

Our .NET MAUI Chat example is based on the DevExpress .NET MAUI CollectionView and includes the following options/capabilities:

Chat-inspired custom styled visual elements (DXCollectionView, TextEdit, DXButton).
Buttons for quick responses.
A fully-functional view model and basic business logic.

You can download the example from the following GitHub repository: Use DevExpress .NET MAUI Components to Build a Chat View

Your Feedback Matters

.NET MAUI — Year-End Roadmap (v24.2)

Anthony Sameishchev (DevExpress) — Fri, 12 Jul 2024 07:05:00 Z

Thank you for your continued interest in our .NET MAUI component suite. In this post, we'll share our release plans for .NET MAUI in the second half of 2024 (v24.2). If you have any questions about the features/capabilities mentioned in this roadmap, please leave a comment in the survey below. As always, we appreciate your input.

The information contained within this blog post details our current/projected development plans. Please note that this information is being shared for INFORMATIONAL PURPOSES ONLY and does not represent a binding commitment on the part of Developer Express Inc. This roadmap and the features/products listed within it are subject to change. You should not rely on or use this information to help make a purchase decision about Developer Express Inc products.

Ease of Use and IDE Integration

Among our primary goals is to help customers develop high-impact applications more efficiently (high impact = performance, reliability, intuitive UX, visual appeal, and scalability). Achieving these qualities requires careful use of platform features and a robust application architecture.

To streamline this process, we expect to ship pre-built application modules, pages, and templates in our upcoming major release. These resources will simplify component use and ensure your applications are built atop a solid architecture, with well-designed views and optimized performance.

New Project Templates

We expect to release customizable project templates in our v24.2 release cycle (expected Dec 2024). With the following templates/modules, you will be in position to generate a basic .NET MAUI project and address multiple usage requirements with just a few clicks:

MVVM & Dependency Injection: A basic setup for MVVM. Ready-to-use application setup.
Authentication and Role-Based Data Access: A client-server application based on our free .NET App Security Library & Web API Service.
CRUD Operations with Detail/Editing Forms: Uses a local SQLite database and a remote Web API service.
Generating Data-Bound Reports: Uses DevExpress Reports and our .NET MAUI PDF Viewer control.
Unit Tests: A module to help introduce/maintain reliability.
Document Processing: Uses the DevExpress Office File API library.

New Page Templates

Our page templates will allow you to integrate optimized views into your .NET MAUI project. These page templates offer more than just design and UX solutions; they include control settings, view models, basic logic, and other essential components. We expect to ship the following views in December:

CRUD detail/editing forms
Login forms
Profile settings views
Charting views
Collections with filtering capabilities
Collections with detail data in Bottom Sheet
Scheduling views

Predefined XAML Templates

In addition to modules and pages, we expect to introduce smaller XAML templates that can be used individually on separate pages. You can browse through all available templates and select those needed for your current requirements. Our predefined XAML templates will be designed based on Material Design 3 guidelines and performance optimization best practices. Here are some of the templates we expect to release:

CollectionView item templates.
Popup & BottomSheet-based dialogs.
Various card designs.
Shimmer loading layouts.
Configured form items.
Various gauge types.

Toolbox

v24.2 will include toolbox support. This capability will allow you to quickly add components to a page. When you drop a toolbox item, it will automatically add the appropriate NuGet package and XAML namespace.

New Toggle Switch Control

We expect to introduce a simple and customizable ToggleSwitch control, based on Material Design 3 guidelines.

Collection View – Frozen Group Row

We expect to add fixed group row support to our .NET MAUI Collection View. Fixed group rows remain visible at the top if at least one child row in the group is visible.

Collection View & Data Grid– Unlimited Height

When displaying a short collection in a scrollable layout, disabling virtualization in the collection may be necessary to ensure it occupies the space used by collection items. This capability allows you to incorporate CollectionView and additional elements into ScrollView with a single vertical scrollbar. We plan to introduce a property that allows you to disable virtualization in CollectionView and expand it based on child items.

Filtering UI Elements – Sliders

As you know, our .NET MAUI Filtering UI elements allow you to filter data in both our .NET MAUI Collection View and .NET MAUI Data Grid. In v24.2, we will introduce support for sliders within the filtering UI (making it easier for your users to select numeric ranges).

Data Grid – Immediate Posting

At present, changes to Data Grid cell data are posted to the source only after exiting the active editor. To address this limitation, we will introduce an option to immediately update the data source when a cell is modified by the user.

Document Printing

We are developing a class to invoke native device printing dialogs. This feature will be accessible via a built-in command in our .NET MAUI PDF Viewer control (or directly in code).

Text Editors – Hide Max Text Counter

We've received numerous requests in the DevExpress Support Center to hide the text counter displayed in our .NET MAUI TextEdit and MultilineEdit controls. In our upcoming release (v24.2), we will introduce a property to hide this counter.

Integration with MVVM Community Toolkit

We're planning to introduce helper classes built upon the MVVM Community Toolkit library (to help simplify control integration across multiple MVVM usage scenarios).

Your Feedback Matters

.NET MAUI Collection View — Switch Between Different Item Representations

Kseniya Kuzmina (DevExpress) — Fri, 24 May 2024 02:13:00 Z

How many different ways can you present information using the CollectionView? More importantly, which presentation option should you choose for the best possible user experience? Here is our recommendation: Consider offering users multiple options and let them choose based on requirements/preferences.

As you might have guessed by now, the DevExpress .NET MAUI CollectionView allows you to switch between multiple data presentation modes: single/multiple columns or simple/detailed item template. In this blog post, we will review both options in detail.

Multi-Span Layout

In one of our minor releases (v23.2.4), we’ve extended our DXCollectionView with a new DXCollectionView.ItemSpanCount property so you can easily display CollectionView items across a multi-column list. This property allows you to set the number of columns (Orientation is Vertical) or rows (Orientation is Horizontal) the DXCollectionView must display on-screen.


<dxcv:DXCollectionView 
        x:Name="collectionView"
        ItemSpanCount="{Binding ColumnsCount}">
    <!--...-->
</dxcv:DXCollectionView>

The complete source code for our demo app is available on GitHub: Collection View - Filtering UI.

To design a more flexible user interface, you can calculate the number of collection view spans (columns or rows) based on device type (phone or tablet) and screen orientation (landscape or portrait). Obviously, a tablet screen in landscape mode can fit more data items - improving readability when compared to a mobile phone screen.

With this fact in mind, let’s add selection logic for the ItemSpanCount property value based on device parameters. To do so, we’ll use our multi-functional ON class and its ON.Idiom, ON.Orientation and ON.OrientationChanged methods. The following code snippet determines the number of Collection View columns to display.


public MainPage() {
    //...
    ON.OrientationChanged(this, OnOrientationChanged);
    OnOrientationChanged(this);
}
void OnOrientationChanged(ContentPage view) {
    UpdateColumnsCount();
}
void UpdateColumnsCount() {
    ViewModel.ColumnsCount = ON.Idiom<int>(ON.Orientation<int>(1, 2), ON.Orientation<int>(2, Height < 600 ? 2 : 4));
}

Simplified and Detailed Item Template

Additionally, we can vary visual representation of items when using single-column and multi-column modes. This approach can address a diverse set of user preferences and usage scenarios.

The amount of information displayed for a single item may also depend on user preferences. For example, users with impaired vision will typically prefer larger items in a single column. In this instance, you can display less detail, but improve overall readability.

You may also want to display more details when a user filters them against a criteria. For example, if you need to filter the list by the number of orders, you may want to switch to detailed mode to view numbers on-screen.

In our example, we select a simple item template in multi-column mode and a detailed item template in single mode. To deliver this capability, we implemented the ColumnsCountToTemplateConverter that conditionally selects a template to apply to the ItemTemplate property (based on the number of DXCollectionView layout columns).


<ContentPage.Resources>
    <utils:ColumnsCountToTemplateConverter x:Key="cardTemplateConverter" SmallCardTemplate="{StaticResource smallHouseCardTemplate}" CardTemplate="{StaticResource houseCardTemplate}"/>
</ContentPage.Resources>
    <!--...-->
    <dxcv:DXCollectionView 
        x:Name="collectionView" 
        ItemsSource="{Binding ItemsSource}" 
        ItemTemplate="{Binding ColumnsCount, Converter={StaticResource cardTemplateConverter}}" >
    </dxcv:DXCollectionView>


public class ColumnsCountToTemplateConverter : IValueConverter {
    public DataTemplate SmallCardTemplate { get; set; }
    public DataTemplate CardTemplate { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
        return ON.Idiom<DataTemplate>((int)value > 1 ? SmallCardTemplate : CardTemplate, CardTemplate);
    }

    //...
}

Summary

By providing users with flexible item presentation options (and by using our flexible .NET MAUI CollectionView component), you can address a variety of business requirements/use cases.

To learn more about our .NET MAUI product line, refer to the following blog posts:

How to Implement Material Design 3 in a .NET MAUI Application

Anthony Sameishchev (DevExpress) — Wed, 22 May 2024 05:25:00 Z

Material Design is a cross-platform system of guidelines developed by Google. Inspired by the textures of the physical world, it helps you craft visually captivating interfaces with balanced colors and enhanced usability (the objective is to focus attention on essential UI elements). The DevExpress .NET MAUI Suite includes 10 built-in Material Design 3 color themes - available in both dark and light variants. With the help of the ThemeColor markup extension and project templates, you can easily support Material Design 3 themes in applications using DevExpress or standard .NET MAUI controls.

Access the Material Design 3 Palette

Material Design 3 Palette is generated based on a given seed color. From this color, the Material Design 3 algorithm creates six tonal palettes. To support dark and light application appearance, the algorithm takes colors from tonal palettes and creates color schemes. Material Design 3 ensures color scheme colors have sufficient contrast and a consistent appearance. To use Material Design 3 colors in your application, simply bind controls directly to a color scheme's colors. Refer to the Color Theme Anatomy section for more information.

To simplify bindings, we ship a ThemeManager class. This member allows you to generate a new theme based on a seed color and apply it to the application. This capability will be of value for those who wish to style applications based on brand colors.

using DevExpress.Maui;
using DevExpress.Maui.Core;
using Microsoft.Maui.Graphics;

// ...
public static class MauiProgram {
    public static MauiApp CreateMauiApp() {
        ThemeManager.UseAndroidSystemColor = false;
        ThemeManager.Theme = new Theme(Color.FromArgb("FF6200EE"));
        var builder = MauiApp.CreateBuilder();
        builder
            .UseDevExpress()
            // ...
            .UseMauiApp<App>();
        return builder.Build();
    }
}

You can also use the APIs mentioned above to apply a predefined theme to your application:

using DevExpress.Maui;
using DevExpress.Maui.Core;

// ...
public static class MauiProgram {
    public static MauiApp CreateMauiApp() {
        ThemeManager.UseAndroidSystemColor = false;
        ThemeManager.Theme = new Theme(ThemeSeedColor.TealGreen);
        var builder = MauiApp.CreateBuilder();
        builder
            .UseDevExpress() 
            // ...
            .UseMauiApp<App>();
        return builder.Build();
    }
}

When you need to use a color scheme's color, you can use the ThemeColor markup extension to pick a color by its token name.

To maintain application consistency with the appearance of a device, we also added the ThemeManager.UseAndroidSystemColor property. It takes the primary color of your Android device as a seed color, generates a new theme based on it, and applies the theme to the application.

Additionally, you can set a custom navigation bar's background and foreground colors (available on Android OS), status bar background color (available on Android OS), and status bar foreground color (for both Android OS and iOS).

ThemeManager.Theme = new Theme(ThemeSeedColor.DarkGreen);
ThemeManager.AndroidNavigationBarForeground = AppTheme.Light;

Refer to the following topic for additional guidance: Apply System Colors to System Bars

You can also visit the DevExpress .NET MAUI Demo Center GitHub repository to view our theme engine in action.

Use Predefined Material Design Styles

The default appearances of our .NET MAUI Controls meet Material Design 3 guideline requirements. Like Material Design 3, our controls support multiple types: Accent, Filled, Outlined, and Text.

When it comes to application appearance, design consistency of utmost importance. If you use both standard controls and DevExpress .NET MAUI Controls in a single solution, you can apply our color themes to standard controls to introduce consistency across your entire mobile project.

If you create a new application, you do not need to worry about extra code because we added styles for standard controls in our project templates. If you already have an application, you simply need to use our ThemeColor markup extension to bind standard controls to DevExpress .NET MAUI Color Themes.


<VerticalStackLayout BackgroundColor="{dx:ThemeTertiaryColor Light=10, Dark=100}">
    <Label Text="Faux Available" TextColor="{dx:ThemeColor OnSurface}"/>
    <Button Text="Open File" BackgroundColor="{dx:ThemePrimaryColor Light=40, Dark=80}"/>
</VerticalStackLayout>

Refer to the following topic for more information in this regard: Apply Color Theme to a Standard Control

To review sample code used to theme standard .NET MAUI controls: Apply Themes to Standard Controls

Summary

Material Design 3 principles help you deliver mobile solutions with a consistent, modern appearance. While Material Design 3 includes many rules and uses sophisticated algorithms for color calculation, our components and predefined project templates have been designed to style your app with relative ease.

Choosing a Framework/App Architecture for Desktop & Mobile Cross-Platform Apps

Alexander Russkov (DevExpress) — Thu, 02 May 2024 01:20:00 Z

“Write once, run anywhere" – this slogan helped Java achieve widespread popularity in the mid-1990s. Since then, many cross-platform frameworks have been introduced, such as Ionic, Flutter, and of course .NET MAUI. These frameworks allow developers to use the same code regardless of the underlying operating system/device type. While using a single UI framework may save time/resources, the effectiveness and efficiency of this development strategy depends entirely on app complexity and UX requirements.

An alternative technique to a cross-platform app is to share business logic and services but use different UI frameworks based on device type (desktop/mobile). With this strategy, you will share less UI code, but use the inherent benefits/advantages of each platform to craft high-quality interfaces (and of course deliver the best possible user experience across platforms/devices).

Your browser does not support the video tag.

Download Example

Single UI Project: Advantages and Challenges

A fully cross-platform interface can help dev teams reduce development costs and time-to-market. For instance, a single page created using Blazor can be used in web, desktop and mobile apps via Blazor Hybrid. And this is not just a WebView wrapper for web components: it allows you to run code in the .NET environment while accessing device capabilities. This strategy can improve team productivity, because you can share code and expertise.

The following article will help you create your first Blazor Hybrid app: Get Started - Blazor Hybrid.

Another rapidly evolving cross-platform framework is .NET MAUI. It was designed to support different device types (desktop, mobile, tablet). The framework includes useful features designed to share code between different targets:

Project Structure: Unlike Xamarin, .NET MAUI incorporates all cross-platform code in a single project.
Device-specific customization: Adaptive layout XAML extensions allow you to update control properties based on device and operating system type.
Native UI elements: Under the hood, .NET components are converted into native OS-specific elements, ensuring a device-specific user experience.

These core features can help you create apps with a single codebase targeted to different devices. You can find a sample app demonstrating .NET MAUI's cross-platform capabilities in the following repository (created by the Microsoft team): Weather '21.

Here is an example of how to specify different layouts for phone and desktop devices (one column for a phone and two columns for a desktop):

<Grid ColumnDefinitions="{OnIdiom Phone='*', Desktop='*,500'}" ... >

This technique works great for relatively simple apps. However, business applications often require more sophisticated device-specific alterations. For example, the desktop client may include complex views with a Ribbon and Docking. These controls are typically replaced by other elements on mobile devices.

Moreover, the entire user flow may differ significantly on a phone. For instance, in-place cell editing is common for desktop apps, however for mobile devices you may prefer to display detail and editing screens separately. You can find this pattern in many applications on your phone (such as Contacts).

The following images illustrate a few examples where it may be challenging to create a single UI code base:

When there's a significant difference between desired desktop and mobile interfaces, creating numerous device-specific triggers may quickly complicate your code (making it hard to develop and maintain).

Apps with Device-Specific UI Frameworks

Using a single UI platform provides more opportunities for code sharing, however it's challenging to leverage these benefits when working on applications with a complex interface. If you are developing such an app, you may want to use separate UI frameworks for different client types and reuse non-visual code. This allows you to take advantage of each platform and still share quite a bit of code.

In the illustration above, client apps are implemented using different UI frameworks, while both clients use common services, business logic and server-side modules. Based on your preferences, you can either implement all server logic as a single service or create a microservices infrastructure.

On the client side, you can select the platforms best suited for your application:

WPF and WinForms (both very mature platforms) offer you a variety of important features and capabilities for rich desktop user experiences.
Lightweight .NET MAUI will allow you to create an application with a mobile centric UX for Android and iOS.

Since WPF, WinForms and MAUI are .NET - based, you can easily reuse client-side services, helpers and model classes. The key to more code sharing is a loosely coupled architecture when modules can be isolated from each other. The MVVM design pattern will help you decouple your views from view models and easily introduce external dependencies using Dependency Injection.

If you pursue this strategy, your project structure may look as follows:

Client.Shared - client-side services, common helpers.
DataModel - a model for database objects.
DesktopClient - WPF/WinForms application
MobileClient - .NET MAUI application
WebApiService - a web service that incorporates business logic and handles access to a database. Note: You can utilize our free Web API Service to implement server-side security and role-based data access.

If you'd like to explore the potential of this strategy, download our sample application at GitHub: WPF & .NET MAUI - Share Code Between Desktop and Mobile Projects

Our Cross-Platform .NET App UI (XAF) is based on a similar idea and has demonstrated its effectiveness for over 15 years. Data processing, security, business logic, and other shared modules are designed as view-agnostic blocks. When introducing a new visual client, you can easily reuse most of your code.

Below, you'll find insights from Paul Usher (Business Solutions Architect and DevExpress Evangelist, experienced in Xamarin and .NET MAUI, as well as native iOS & Android):

There is so much more freedom in separating mobile platforms from desktop. Given your data layer and business logic should be their own seperate projects it makes sense to concentrate development efforts on iOS and Android delivering specific goals for mobile use. The Desktop interface can then be designed specifically to optimise the features required. Typically a mobile version of an application contains less functionality but geared towards more practical "in your hand" usage, whereas the desktop version provides a much deeper, richer user experience utilizing more screen realestate, multiple complex components on screen at the same time.

Summary

Choosing the best possible UI framework for a given platform is crucial as it shapes the development process, user experience, and ultimately, the success of the project. A unified cross-platform UI can be an effective solution for simpler applications, Minimum Viable Products (MVPs), or when user experience excellence for a secondary device isn’t the primary concern.

For more complex applications, the potential for sharing UI code can be limited due to the significant differences in user flow for desktop and mobile devices. By separating visual clients and leveraging advantages of each UI platform you can develop high-impact apps that cater to user needs with laser-like precision. A loosely coupled architecture not only allows for extensive code reuse but also ensures that the code remains clean, maintainable, and testable.

Additional References on Application Architectures

We also have related blog series, which may be of interest for you as well: JavaScript — Consume the DevExpress Backend Web API with Svelte (7 parts from data editing to validation, localization, reporting).

.NET MAUI: Edit HTML Content with the DevExpress .NET MAUI HTML Edit Control

Anthony Sameishchev (DevExpress) — Tue, 23 Apr 2024 04:00:00 Z

In the late 80s, physicist Tim Berners-Lee created the first prototype of HTML - a unified format designed to share documents between researchers.

Since then, HTML adoption has grown exponentially, and is now used in browsers, email clients, and CMS systems. Needless to say, rich content stored in HTML format is used across the web and within applications able to render HTML. Thanks to its versatility, HTML is now ubiquitous.

If HTML editing is important to your mobile development strategy, the DevExpress .NET MAUI HTML Edit Control can help you incorporate HTML editing within your mobile solution and address a variety of usage scenarios, including:

introduce rich text notes
write comments/messages
compose email messages
create content for a CMS system.

In this blog post, I'll use the DevExpress .NET MAUI HTML Edit to display and edit descriptions of homes within a simple mobile application (using a CRUD editing form).

The application showcased in this post is available on GitHub: Edit HTML in DataGridView CRUD Views.

You can also watch a tutorial video on YouTube if you expect to integrate our .NET MAUI HTML Edit Control in your next .NET MAUI project.

The primary goal of our HTML Edit Control is to create/edit rich text content to be displayed in other components/applications. It doesn't support all HTML tags, such as interactive buttons, borders, etc.

To use the DevExpress .NET MAUI HTML Edit control in a project, you must purchase a DevExpress Universal Subscription. If you are new to our .NET MAUI product line and are considering it for an upcoming project, you can start a 30-day trial using NuGet as described in this help topic.

Display HTML Content in Read-Only Mode

Since mobile applications don't have much screen space, its good practice to separate item detail info/editing views.

In this particular example, our .NET MAUI HTML Edit displays rich text in read-only mode on the detail view page (HTML Edit includes an IsReadOnly property that restricts/permits content editing).

To display content in XAML, specify the HtmlEdit.HtmlSource property. For this example, this property is bound to a ViewModel property.

Related GitHub Repository Files

Switch to Edit Mode and Modify Descriptions on a Separate Page

When editing rich text, you will often need more space to display elements such as toolbars. You will also need to reduce excessive scrolling. It's for these reasons we recommend the use of a separate screen to edit content.

If you choose to display our HTML Edit Control in a separate view, you can leverage our built-in adaptive toolbar and use the following content editing actions:

font attributes
colors
lists
headers
and many more.

Set the HtmlEdit.ShowToolbar property to true to display the toolbar.

Editing HTML content with the DevExpress HTML Edit works best if you place the control in a SafeKeyboardAreaView container. This container allows you to manage the following:

Prevent HTML content from keyboard overlap.
Decrease the height of HTML Edit when you open the device keyboard (to maintain toolbar visibility).
Display custom content in the keyboard region to add more space for UI elements. The built-in toolbar uses this feature to display action panels.

Once you modify the HTML, call the HtmlEdit.GetHtmlAsync method to obtain HTML content and save it to a ViewModel property.

Related GitHub Repository Files

.NET MAUI — Early Access Preview (v24.1) & Minor Update Enhancements (v23.2.5)

Kseniya Kuzmina (DevExpress) — Tue, 02 Apr 2024 04:05:00 Z

We expect to ship our next major .NET MAUI update (v24.1) in a couple of months. This post outlines the features available in our early access preview (EAP) build and documents features included in our minor update (v23.2.5).

Early Access Preview (v24.1)

If you expect to use our EAP, make certain to check the “Include prerelease” option within NuGet's Package Manager to access early access preview features.

This EAP may not include all features/products we expect to ship in our v24.1 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

New TreeView Control

v24.1 will ship with a new .NET MAUI TreeView control. Designed to present hierarchical data, our .NET MAUI TreeView allows you to create intuitive and visually appealing user interfaces with ease. With our new .NET MAUI TreeView (DXTreeView), you can quickly visualize files structures, organization relationships, hierarchical data sets, navigation menus, and more.

DXTreeView ships with the following built-in capabilities:

Hierarchical and self-referential data support
Independent and recursive check box support
Filtering
Sorting
Item template support

New SlideView Control

v24.1 ships with a new SlideView component - designed to leverage swipe gestures (right/left or up/down) to navigate between views. Our .NET MAUI SlideView component can help you create a variety of user interface solutions including application galleries or user tutorial screens.

SlideView features include:

MVVM support (ItemsSource, ItemTemplate, ShowNext/ShowPrevious commands)
Item caching for better performance
Horizontal/vertical orientation
Looped and animated navigation

Documentation

Scheduler – new Agenda View

Our new .NET MAUI AgendaView component allows you to display schedules, events, and appointments for as single day.

Features include:

Ability to hide empty time slots to save the screen space
Appointment and header appearance customization options
Built-in button to create a new appointment

Documentation

PDFViewer — Document Signatures

With v24.1, users can sign PDF documents via our intuitive user interface (users can draw a signature at a given location or select a predefined signature). Signatures can be selected, moved and resized. Users can also specify ink color and line width.

To respond to user sign actions, our .NET MAUI PDF Viewer includes the following events:

SignatureAdded / SignatureAdding
SignatureChanged
SignatureDelete / SignatureDeleting
SignatureSelectionChanged

PDFViewer — Text Selection

Users are now able to select text in a PDF document and highlight or copy it to the clipboard as requirements dictate. To help facilitate selection, we added a selection context menu that appears when text is selected (the menu includes copy and highlight commands).

You can also interact with selected content via new API methods and events.

PDFViewer — Text Formatting Annotations

v24.1 gives you the ability to highlight selected text with different markup text annotations. The following text decorations can be added via the interface or API:

Highlight
Underline
Strikethrough
Underline with a wavy line

PDFViewer — Graphic Annotations

Users can now add annotations to a PDF document, and then comment/collaborate with one another. Our .NET MAUI PDF viewer supports the following annotations:

Sticky notes
Free text
Ellipses (Circle annotations)
Rectangles (Square annotations)
Free-hand drawing

Note: Our official release should give you the ability to apply all the annotations listed above via the control's UI.

Fltering UI — Predefined Filters

v24.1 will ship with a new PredefinedFilterCheckedChipGroupItem component. You can leverage this new UI element to add quick chip filters. Each filter chip allows you to set display text and filter criterion. Common usage scenarios for this filter item include creating favorite user filters or filtering based on a predefined value range.


<ContentPage ...
             xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors">
             <!--...-->
                  <dxe:PredefinedFilterCheckedChipGroupItem Text="Price" FieldName="Price" ShowValueCounts="true">
                      <dx:PredefinedFilter Text="$0 - $500" FilterExpression="?p < 500"/>
                      <dx:PredefinedFilter Text="$500 - $2000" FilterExpression="?p >= 500 AND ?p < 2000"/>
                      <dx:PredefinedFilter Text="$2000+" FilterExpression="?p >= 2000"/>
                  </dxe:PredefinedFilterCheckedChipGroupItem>
             <!--...-->
</ContentPage>

Documentation

Minor Update (v23.2)

New Slider Controls

We added two slider controls to our .NET MAUI component suite:

DXSlider — allows users to select a numeric value.
DXRangeSlider — allows users to select a range of numeric values.

Both controls adhere to the most recent Material Design 3 guideline.

Features include:

Configurable scale step
Minimum and maximum values
Customizable thumbs, tickmarks, and track

Documentation

CollectionView — Multi-Column Layout

DXCollectionView now supports multiple items in a row/column. Our multi-span layout can simplify design if/when collection view items are displayed as cards (allowing you to display more items on screen).

For more information, please refer to the following API members:

CollectionView — Ripple Effect

DXCollectionView now supports ripple effects for tapped items. Ripple animations can help you create more intuitive user experiences. To activate ripple effects, enable the UseRippleEffect property.

CollectionView — Item and Group Separators

Separators are common elements and are used in most collections. With our most recent update, you no longer need to add a separator to your item template. This enhancement simplifies the XAML code and template arrangement logic. The following APIs will help you add separators to a DXCollectionView:

HTML Edit — Tables

Users can now add and edit tables within our .NET MAUI HTML Editor. Like other DevExpress .NET MAUI controls, user interface elements are designed to maximize ease-of-use on mobile devices/form factors.

Documentation

DXButton — Ripple Effect

We added ripple effect support to DXButton. Enable the UseRippleEffects property to activate ripple animations for individual buttons.

Target Standard .NET

As you may know, the XUnit testing library requires standard .NET 8 (not .NET 8.0 Android/iOS) to be referenced as a target framework within project settings. In previous versions, you could not use our controls in a standard .NET 8 project and therefore you could not use XUnit. With v23.2.5, you can target standard .NET 8 in projects when using DevExpress .NET MAUI component libraries.

<Project Sdk="Microsoft.NET.Sdk">
    <PropertyGroup>
        <TargetFrameworks>net8.0;net8.0-android;net8.0-ios</TargetFrameworks>
        <OutputType Condition="'$(TargetFramework)' != 'net8.0'">Exe</OutputType>
        <!-- ... -->
    </PropertyGroup>
    <!-- ... -->
</Project>

Documentation

How to Profile .NET MAUI Applications and Isolate Performance-Related Issues

Alexander Russkov (DevExpress) — Mon, 01 Apr 2024 01:05:00 Z

According to Google/SOASTA research, bounce rates increase by 32% when page load takes 1-3 seconds. Though enterprise mobile app users are unlikely to close an application if they encounter unnecessary delays, performance issues may affect perception/overall user experience. Understanding/addressing performance bottlenecks can be challenging (and time consuming) but mastering the process can help enhance app usability/adoption.

In this blog post, I’ll demonstrate a simple technique to profile .NET MAUI applications using .NET Meteor and Speedscope VS Code extensions. You can leverage the techniques outlined herein whether using Windows or macOS. If you'd prefer, you can also watch a step-by-step tutorial video on YouTube:

Step 1: Install Tools

We'll use the following tools in this tutorial:

Visual Studio Code – a lightweight cross-platform editor. Powered by a few extensions, it offers all the IDE capabilities required to develop .NET MAUI apps, regardless of the OS used.
.NET Meteor – a VS Code extension for running, debugging, and profiling .NET MAUI projects.
Speedscope – a VS Code extension to render profiling snapshots as a flame graph.

You can download .NET Meteor and Speedscope from the Visual Studio Marketplace or use the “Extensions” tab in VS Code.

Step 2: Prepare Application

Once necessary tooling is installed, simply open the project you'd like to profile. As you know, VS Code doesn’t use "*.sln" solution files created in Visual Studio. Therefore, to open your project, use the “Open Folder” menu item and select the project folder.

Once open, navigate to the “Run and Debug” tab and create a “launch.json” file.

.NET Meteor applies settings for running, debugging, and profiling apps from this file. To profile an application, add a configuration entry with the “profilerMode” attribute set to “trace”.

{ 
    "version": "0.2.0", 
    "configurations": [ 
        { 
            "name": ".NET Meteor Debugger", 
            "type": "dotnet-meteor.debugger", 
            "request": "launch", 
            "preLaunchTask": "dotnet-meteor: Build" 
        }, 
        { 
            "name": ".NET Meteor Profiler", 
            "type": "dotnet-meteor.debugger", 
            "request": "launch", 
            "profilerMode": "trace", 
            "preLaunchTask": "dotnet-meteor: Build" 
        } 
    ] 
}

You can set “profilerMode” to “gcdump” for memory profiling, but I’ll describe this mode in a separate blog post.

Save the modified "launch.json" file and select the profiling configuration from the dropdown menu located next to the "Start" button.

Step 3: Obtain Profiling Snapshot

We can now run the application to collect profiling data. Note: Be sure to "Run Without Debugging."

Open the view you'd like to inspect and press the "Stop" button. To obtain a valid snapshot, it's important to stop the application using VS Code instead of closing it on the device/emulator.

Step 4: Analyze Snapshot

.NET Meteor saves the profiling snapshot to the "*.speedscope.json" file under the ".meteor" directory. Right-click this file and open it with Speedscope.

Once open, you will see a flame graph with all .NET functions called when you interacted with the application. The wider a block, the more execution time for the corresponding function. The flame graph automatically groups methods with a similar call stack (it represents aggregated data, reducing the amount of information you need to analyze). Let’s consider the following simplified flame graph as an example:

Here, method F1 calls F2, which in turn calls F3. Then, a new F3 starts and calls F4. When F4 is complete, F3 and F1 are completed as well. At this point a new F3 function (green) starts. Because the last F3 function has a different call stack, it’s not merged with F3 functions called earlier.

Let’s take a look at two performance issues I intentionally introduced in my test app.

Sample Issue 1: Heavy View Model Initialization

In the following code snippet, I initialize a collection of items in the view model constructor. When each item is added, the Thread.Sleep method is called causing a delay.

public class ProblemPageViewModel : BindableBase { 
    //... 
    public ProblemPageViewModel() { 
        LongInitializationOperation(); 
    } 
    void LongInitializationOperation() { 
        Customers = new ObservableCollection<Customer>(); 
        for (int i = 1; i < 200; i++) { 
            Thread.Sleep(10);  
            Customers.Add(new Customer() { ID = i, Name = "Customer" + i }); 
        } 
    } 
}

Here is how this code appears in the flame graph.

As you can see, LongInitializationOperation is very wide compared to sibling methods which may indicate a potential issue. To focus on a specific method, you can open the “Sandwich” tab, press “Ctrl + F” and find this method. In the “Sandwich” view, you can select a function and see all previous and subsequent methods in a more readable manner.

Here, you can see that the performance issue is caused by the Thread.Sleep method. This is evident because we call it every time a new item is added to the Customers collection. That was a simple example - let’s move on to a more realistic usage scenario.

Sample Issue 2: Unoptimized View Layout

Let’s consider the following view with a vertical stack panel and CollectionView:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="TestPerformanceApp.ProblemPage" 
             xmlns:viewModels="clr-namespace:TestPerformanceApp.ViewModels" 
             Title="ProblemPage"> 
    <ContentPage.BindingContext> 
        <viewModels:ProblemPageViewModel/> 
    </ContentPage.BindingContext> 
    <VerticalStackLayout> 
        <CollectionView ItemsSource="{Binding Customers}"/> 
    </VerticalStackLayout> 
</ContentPage>

It seems unusual that such a simple layout causes a delay when loading the view, so what’s wrong with this code?

Typically, when a view layout causes performance issues, you will find many “Measure” methods in the flame graph.

While the profiler won’t reveal the specific cause of the issue, it’s evident that the problem lies in the view layout. One of the simplest ways to pinpoint the cause of the delay is to comment out XAML code sections until you observe an improvement. However, it's essential to examine how different view elements function - both separately and together.

For instance, in the code snippet above, if I comment out the CollectionView, we'd expect a performance improvement, as this is the only relatively complex component in the view. However, CollectionView is a common component, and it would be unusual if it caused such performance issues across all usage scenarios. This suggests that the root cause may be related to its parent panel – VerticalStackLayout. By commenting out the VerticalStackLayout, we see an improvement, indicating that the lag occurs only when VerticalStackLayout is used together with CollectionView.

The reason behind this particular bottleneck lies in the way VerticalStackLayout measures child elements (infinite height is used for all associated children). As a result, the CollectionView “thinks” that it’s very tall, doesn’t activate the virtualization mechanism, and measures all its elements even if they don’t fit the screen. To resolve the issue, we simply need to replace VerticalStackLayout with a Grid using several rows or DXDockLayout.

Conclusion

While performance optimization can be challenging, research shows that performance affects the overall user experience and perceived quality of a given application. Bottleneck identification is the first step in the optimization process and VS Code extensions like .NET Meteor and Speedscope can be invaluable for those interested in performance optimization.

Memory leaks are another common performance-related issue, and .NET Meteor supports memory profiling as well. We will describe this feature in a separate blog post - please stay tuned!

Explore more ways to enhance your next great .NET MAUI mobile app: