Get Started with WinUI Reporting

• Aug 18, 2023
• 3 minutes to read

This topic describes how to create a new WinUI application that integrates the Document Viewer control.

Prerequisites

DevExpress WinUI controls have the following system requirements:

• Windows 10 version 1809 (build 17763) and higher
• Visual Studio 2022 version 17.1 and higher (recommended) or Visual Studio 2019
• Required workloads and components as listed in the following section: Install tools for the Windows App SDK
• Windows App SDK Version 1.0.2 Visual Studio extension

DevExpress WinUI Reporting requires an active DevExpress Reporting Subscription.

Create a New Project

1. Start Visual Studio and click Create a new project. Select the Blank App, Packaged (WinUI 3 in Desktop) template and click Next.

   

2. Specify the project name and location. Click Create.

   

Create a NuGet Package Source

If you run the DevExpress installer, the DevExpress 23.2 Local NuGet package source is created automatically.

If you do not install DevExpress controls on a local machine, you should obtain a personal NuGet feed URL and create a DevExpress NuGet package source as follows:

1. Right-click the Dependencies node in the Solution Explorer window and select Manage NuGet Packages:

   

2. Obtain your NuGet feed URL and copy it to the clipboard.

3. Create a new package source for the DevExpress NuGet feed, as described in the following help topic: Install NuGet Packages in Visual Studio, VS Code, and Rider.

Install NuGet Packages

1. In the invoked NuGet Package Manager, set Package source to DevExpress (or DevExpress 23.2 Local). Locate the DevExpress.WinUI package and click Install.

   

2. Optional (required to work with SQLite databases). Set Package source to nuget.org, locate the System.Data.SQLite.Core package, and click Install.

Create a Sample Report

Create a new report as described in the following help topic: Create a Report in Visual Studio. The default report name is XtraReport1.

If you create a report bound to data, specify the sample nwind.db SQLite database as the data source. The sample nwind.db database ships with the DevExpress installation. The database is stored in the following default folder:

C:\Users\Public\Documents\DevExpress Demos 23.2\Components\Data

When a new report is added to the project, the DevExpress.Reporting.Core NuGet package is installed automatically.

Add the Document Viewer to the Page

1. Define the Document Viewer in XAML and specify its DocumentSource property binding:

   MainWindow.xaml

   <Window
   x:Class="App1.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:dxdvr="using:DevExpress.WinUI.DocumentViewer"
   mc:Ignorable="d">
   
   <Grid>
       <dxdvr:DocumentViewer DocumentSource="{x:Bind Report, Mode=OneWay}"/>
   </Grid>
   </Window>
   

2. Define and initialize the Report property in the code-behind file as shown in the following code snippet:

   MainWindow.cs

   using DevExpress.XtraReports.UI;
   using Microsoft.UI.Xaml;
   
   namespace App1
   {
       public sealed partial class MainWindow : Window
       {
           public MainWindow()
           {
               this.InitializeComponent();
               this.Report = new XtraReport1();
           }
           private XtraReport Report { get; set; }
       }
   }
   

Run the App

When you run the application, it shows the Document Viewer that displays a report. If you create a simple table report from the Categories data table in the nwind.db sample database, the application appears as follows: