Skip to main content

Add DocumentPreviewControl to WPF Application

  • 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:

    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;
        }
    }
    
  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:

    WPF Document Viewer Drop from Toolbox

    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:

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

    WPF Document Preview Result

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.

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();
}

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.

See Also