Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

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

    WPF Document Viewer Drop from Toolbox

    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:

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