DevExpress Reporting and .NET MAUI — Generate and Export Report Documents in macOS, Android and iOS (v23.1)

In this post, I'll discuss how you can incorporate DevExpress Reports and our Blazor Report Viewer within a .NET MAUI project.

Before I start, a quick reminder: Because of the new DevExpress.Drawing graphics rendering engine, our .NET Reporting Tools no longer depend on GDI+. This de-coupling from GDI+ allows you to deploy DevExpress Reports-powered applications on new platforms, including .NET MAUI. The following features are available on this new/emerging platform:

• Create report documents at runtime
• Export reports to available formats
• Create reports in the Visual Studio Report Designer within a separate class library project
• Display a report’s print preview in your .NET MAUI Blazor app using the DevExpress Blazor Report Viewer

With that brief intro, let's dive in and integrate DevExpress Reports in your .NET MAUI project.

Use the Visual Studio Report Designer

The DevExpress Visual Studio Report Designer analyzes project references and dependencies and starts a separate background process based on collected data. During testing, we discovered a project structure discrepancy in .NET MAUI when compared to other application types. Because of this issue, the DevExpress Report Designer for Visual Studio cannot be integrated into .NET MAUI projects out of the box.

To create and edit reports in your .NET MAUI application, we recommend that you create and store reports in a separate class library, and then reference this library in your .NET MAUI project. To add a new report:

1. Press CTRL+SHIFT+A or click Project | Add New Item in the Visual Studio menu.
   

2. Select the DevExpress Report item, specify a report name, and click Add.
   

3. Select the report type in the Report Wizard and click Finish. Select Blank if you want to create a report from scratch.
   

Once complete, the Visual Studio Report Designer will appear on-screen:

For additional information on report generation within Visual Studio, please refer to the following help topics:

• Create a Report in Visual Studio
• Visual Studio Report Designer
• Detailed Guide to DevExpress Reporting

Add the Blazor Report Viewer

You can use the DevExpress Blazor Report Viewer if your app needs to display a report preview (before print output or export operations) within .NET MAUI. To incorporate the Blazor Report Viewer, you'll need to create a .NET MAUI Blazor Hybrid App, reference required packages, and add a Report Viewer for WebAssembly (Native) component to a Razor page.

To export and share reports from your .NET MAUI Blazor apps, you need to customize the DevExpress Report Viewer's export process. To customize the export process, implement the IExportProcessor interface (grants you access to a byte array with document data). Once complete, use .NET MAUI’s built-in IShare interface. This interface contains an API to send data (such as text or web links) to the device share function.

The following code snippet shares a file:

public class SharedReportExportProcessor : IExportProcessor {
    public async Task ProcessExportResult(ExportResultItem exportResultItem, bool isPrintOperation) {
        var fileName = Path.Combine(FileSystem.CacheDirectory, exportResultItem.FileName);
        using (var file = File.Create(fileName)) {
            file.Write(exportResultItem.Bytes);
        }

        await Share.Default.RequestAsync(new ShareFileRequest
        {
            Title = "Share a Report",
            File = new ShareFile(fileName)
        });
    }
}

If implemented in this manner, when you select the desired export format, the Share Window opens and prompts the user to select the app to share with.

Register Fonts

Please note that the set of fonts installed on your development machine differs from that available on mobile devices. If a font used in a report is not found in the system, the text-decoration will likely fall back to the default Open Sans font.

To maintain a report’s appearance in the deployed app, you first need to call the ConfigureFonts method in the MauiProgram class (see the Fonts help topic for details).

The next step is to use the DXFontRepository class to register the fonts used in the report. The DevExpress.Drawing assembly uses this font dictionary to resolve fonts during document rendering. Use the following code snippet after a ConfigureFonts method call:

using (StreamReader rd = new StreamReader(Assets.Open("Arial.ttf"))) {
        using (var ms = new MemoryStream()) {
            rd.BaseStream.CopyTo(ms);
            DXFontRepository.Instance.AddFont(ms);
        }
    }

Please refer to the following help topic for additional information: Use DXFontRepository to Add Custom Fonts

Your Feedback Matters

As always, we would love to hear your thoughts. Should you have questions about this blog post or if you're considering .NET MAUI for an upcoming project, please submit a support ticket via the DevExpress Support Center. We'll be happy to follow up.