Add DocumentPreviewControl to WPF Application

• May 20, 2024
• 3 minutes to read

This topic describes how to add the DocumentPreviewControl to a WPF application to preview a report.

Step by Step Guide

Do the following:

1. Create a new WPF application from the DevExpress template.
2. Add a new XtraReport1 report to the project. For more information, review the following help topic: Create a Report in Visual Studio.

3. Implement the ViewModel class and pass an instance of this class as the data context:

   MainWindow.cs

   using DevExpress.Mvvm;
   using DevExpress.Xpf.Core;
   using DevExpress.XtraReports.UI;
   
   namespace DXApplication1
   {
       /// <summary>
       /// Interaction logic for MainWindow.xaml
       /// </summary>
       public partial class MainWindow : ThemedWindow
       {
           public MainWindow()
           {
               InitializeComponent();
               this.DataContext = new ViewModel(new XtraReport1());
           }
       }
   
       public class ViewModel : BindableBase
       {
           public XtraReport Report { get; }
           public ViewModel() { }
           public ViewModel(XtraReport report) => Report = report;
       }
   }
   

   MainWindow.vb

   Imports DevExpress.Mvvm
   Imports DevExpress.Xpf.Core
   Imports DevExpress.XtraReports.UI
   
   Namespace DXApplication1
       ''' <summary>
       ''' Interaction logic for MainWindow.xaml
       ''' </summary>
       Partial Public Class MainWindow
           Inherits ThemedWindow
   
           Public Sub New()
               InitializeComponent()
               Me.DataContext = New ViewModel(New XtraReport1())
           End Sub
       End Class
   
       Public Class ViewModel
           Inherits BindableBase
   
           Public ReadOnly Property Report() As XtraReport
           Public Sub New()
           End Sub
           Public Sub New(ByVal report As XtraReport)
               Me.Report = report
               Return Me.Report
           End Sub
       End Class
   End Namespace
   

4. Open the MainWindow.xaml file in the Visual Studio Designer and drop the DocumentPreviewControl control from the DX.24.1: Reporting Toolbox tab to the design surface:

   

   When you drop the DocumentPreviewControl control, all assembly references are added automatically.

   In the smart tag, bind the DocumentViewerControl.DocumentSource property to the ViewModel.Report, and select the RequestDocumentCreation check box.

   The Document Preview control has a Ribbon command UI, but you can select the Bars toolbar layout in the DocumentViewerControl.CommandBarStyle drop-down list or select the None option to remove the toolbar.

5. The MainWindow.xaml has the following XAML content:

   MainWindow.xaml

   <dx:ThemedWindow
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
       xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing" 
       xmlns:models="clr-namespace:DXApplication1"
       x:Class="DXApplication1.MainWindow"
       Title="MainWindow" Height="800" Width="1000">
       <dx:ThemedWindow.DataContext>
           <models:ViewModel />
       </dx:ThemedWindow.DataContext>
       <Grid>
           <dxp:DocumentPreviewControl x:Name="documentPreview1" 
           RequestDocumentCreation="True" 
           DocumentSource="{Binding Report}" />
       </Grid>
   </dx:ThemedWindow>
   

6. Run the application.

   

Preview Large Reports

If a report contains more than 1000 pages, bind the DocumentPreviewControl control to the CachedReportSource component to reduce memory usage. This component stores document pages in a file system or database during document generation.

Call the CachedReportSource object’s CreateDocumentAsync() method to generate a document for preview.

C#

using DevExpress.Xpf.Printing;
using DevExpress.XtraPrinting.Caching;
// ...

private void Window_Loaded(object sender, System.Windows.RoutedEventArgs e) {
    var storage = new MemoryDocumentStorage();
    var report = new XtraReport1();
    var cachedReportSource = new CachedReportSource(report, storage);
    documentPreview1.DocumentSource = cachedReportSource;
    cachedReportSource.CreateDocumentAsync();
}

VB.NET

Imports DevExpress.Xpf.Printing
Imports DevExpress.XtraPrinting.Caching
' ...

Private Sub Window_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs)
    Dim storage = New MemoryDocumentStorage()
    Dim report = New XtraReport1()
    Dim cachedReportSource = New CachedReportSource(report, storage)
    documentPreview1.DocumentSource = cachedReportSource
    cachedReportSource.CreateDocumentAsync()
End Sub

The MemoryDocumentStorage object in this code snippet compresses data and stores the report document in memory. You can use file storage (the FileDocumentStorage object), database storage (the DbDocumentStorage object), or implement a custom storage instead.