xtrareports-404435-dot-net-maui-reporting-blazor-report-viewer-in-maui-app.md
This topic describes how to create a .NET MAUI Blazor Hybrid application with a Report Viewer.
View Example: Reporting for MAUI Blazor - Simple Report Viewer Application
The following platforms are available:
Create a new project in Visual Studio and select the .NET MAUI Blazor App template.
Specify the project name and location in the next window.
Select .NET 8 as the target framework and click Create.
iOS and MacOS require ahead-of-time compilation. Enable the <UseInterpreter> property. Set this property to true within the application’s project file:
iOS or MacOS may require MacOS BigSur+.
Configure your Blazor MAUI project to support browser developer tools.
Configure Windows to deploy and debug MAUI applications.
Visit nuget.devexpress.com, log in to your account, and click Obtain Feed URL. Open the NuGet Package Manager in Visual Studio and register the DevExpress NuGet feed as the package source. Install the following packages:
DevExpress.Blazor.Reporting.Viewer This package implements the functionality related to the native Blazor DevExpress Report Viewer component.DevExpress.Drawing.SkiaThis package implements the drawing functionality based on the Skia Graphics Library.
If you are new to NuGet packages, see the following installation guide for assistance: Install DevExpress Packages Using NuGet Package Manager.
If you need to work with fonts or other graphics entities, make sure that you add the following packages to your project:
.NET MAUI apps are designed to run on multiple operating systems and devices. While you develop the application, you can select a device/emulator for test and debug runs.
Select a Debug Target in the Visual Studio toolbar. This example uses an Android device.
Register the required namespaces in the _Imports.razor file:
@using <Namespace>
@using <Namespace>.Shared
Open the MauiProgram.cs file and add using <Namespace>.Data. Once added, call the following methods:
FontsMauiAppBuilderExtensions.ConfigureFonts method in the MauiProgram class and pass fonts used by your application. Refer to the following article for more information on fonts in .NET MAUI: Fonts in .NET MAUI.
Tip
Use the DevExpress.Drawing.DXFontRepository class to register custom fonts. Refer to the following article for more information: Use DXFontRepository to Add Custom Fonts.
The code sample below registers fonts and resources:
public static MauiAppBuilder CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
});
builder.Services.AddMauiBlazorWebView();
builder.Services.AddDevExpressWebAssemblyBlazorReportViewer();
//...
}
Add the following lines to the wwwwroot/index.html file:
<head>
<!--...-->
<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" asp-append-version="true" rel="stylesheet" />
<link rel="stylesheet" href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.css" />
<!--...-->
</head>
Add the Report Viewer component to a Razor page (ReportViewer.razor). Use the DxReportViewer.Report property to specify a report to open.
The code below adds the DxReportViewer component to the ReportViewer.razor page. The XtraReport Report field is used to specify a report class to instantiate and display (the XtraReport1 class).
@page "/reportviewer/"
@using DevExpress.Blazor.Reporting
@using DevExpress.Blazor.Reporting.Viewer.Internal.Services;
@using DevExpress.XtraReports.UI
@using DxReportViewerMauiApp.PredefinedReports
<DxReportViewer @ref="reportViewer" Report="Report" SizeMode="DevExpress.Blazor.SizeMode.Small">
</DxReportViewer>
@code {
DxReportViewer reportViewer;
XtraReport Report = new XtraReport1();
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
await reportViewer.UpdateZoomAsync(0.5);
await base.OnAfterRenderAsync(firstRender);
}
}
Add a navigation menu item to the NavMenu.razor page:
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<nav class="flex-column">
<!-- ... -->
<div class="nav-item px-3">
<NavLink class="nav-link" href="reportviewer">
<span class="oi oi-list-rich" aria-hidden="true"></span> Report Viewer
</NavLink>
</div>
</nav>
</div>
You can create a report in code as described in the following help topic: Create a Report in Code.
The Visual Studio Report Designer is not available in .NET MAUI applications. Visual Studio IDE may ask you to download the .NET Core and System.Drawing.Common package to invoke the report designer.
Alternatively, you can generate a report in a separate class library and reference it in your project. Review the following help topic for more information: Create a Report in Visual Studio.
Once the report is ready, call the XtraReport.FromFile(String, Boolean) or XtraReport.FromStream(Stream, Boolean) methods to load the created report.
Create a IExportProcessor implementation to create an export processor. Call the builder.Services.AddScoped method in the MauiProgram class to register the implementation.
The code sample below shows an implementation that shares a file in the selected format.
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)
});
}
}
using DevExpress.Blazor.Reporting.Services;
using Microsoft.Extensions.Logging;
`...
public static class MauiProgram {
public static MauiApp CreateMauiApp() {
var builder = MauiApp.CreateBuilder();
// ...
builder.Services.AddScoped<IExportProcessor, SharedReportExportProcessor>();
return builder.Build();
}
}
The application is now ready. Run the project to see the result.
See Also