Add DocumentPreviewControl to WPF Application

• Feb 06, 2025
• 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 to add the DocumentPreviewControl to your application:

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();
               DataContext = new ViewModel(new XtraReport1());
           }
       }
   
       public class ViewModel : BindableBase
       {
           public XtraReport Report { get; } = new XtraReport();
           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
           End Sub
       End Class
   End Namespace
   

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

   

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

   Bind the DocumentViewerControl.DocumentSource property to the ViewModel.Report, and set the DocumentPreviewControl.RequestDocumentCreation property to true.

   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 file contains 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 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.