Customize the Document Preview Toolbar

• Oct 06, 2025
• 3 minutes to read

View Example

This example demonstrates how you can customize the Document Preview Ribbon toolbar. You can remove standard toolbar controls, and add custom commands and controls. A WPF subscription is required in order to customize this toolbar.

Tip

If you wish to customize a classic Bar toolbar, adjust the code below to not use the CommandProvider.RibbonActions collection. Place custom actions into the CommandProvider.Actions collections instead.

Proceed as follows:

1. In XAML, use the CommandProvider property to declare the DocumentCommandProvider as a custom command provider for the Document Preview control. A command provider exposes the RibbonActions property, which allows you to access a collection of actions for the Document Preview control’s Ribbon. You should create Bar Actions and add them to the CommandProvider.RibbonActions collection:

   XAML

   xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing" 
   <!-- ... -->
   <dxp:DocumentPreviewControl Name="preview">
       <dxp:DocumentPreviewControl.CommandProvider>
           <dxp:DocumentCommandProvider>
               <dxp:DocumentCommandProvider.RibbonActions>
   
   <!-- ... -->
               </dxp:DocumentCommandProvider.RibbonActions>
           </dxp:DocumentCommandProvider>
       </dxp:DocumentPreviewControl.CommandProvider>
   </dxp:DocumentPreviewControl>
   

2. The UpdateAction can replace a toolbar command’s standard icon. To identify a toolbar item by name, use the DefaultPreviewBarItemNames class. The following code uses the UpdateAction to change the Print command icon:

   XAML

   xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
   xmlns:dxpbars="http://schemas.devexpress.com/winfx/2008/xaml/printing/bars"
   <!-- ... -->
   <dxb:UpdateAction ElementName="{x:Static dxpbars:DefaultPreviewBarItemNames.Print}" 
                     Property="{x:Static dxb:BarItem.LargeGlyphProperty}" 
                     Value="{dxp:PrintingResourceImage ResourceName='Images/BarItems/Print.svg'}"/>
   

3. The RemoveAction can remove an element from a toolbar. The following code removes the File, Send, and Export command groups:

   XAML

   xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
   xmlns:dxpbars="http://schemas.devexpress.com/winfx/2008/xaml/printing/bars"
   <!-- ... -->
   <dxb:RemoveAction ElementName="{x:Static dxpbars:DefaultPreviewBarItemNames.Export}"/>
   <dxb:RemoveAction ElementName="{x:Static dxpbars:DefaultPreviewBarItemNames.Send}"/>
   <dxb:RemoveAction ElementName="{x:Static dxpbars:DefaultPreviewBarItemNames.FileGroup}"/>
   

4. The InsertAction can add a new element to the toolbar. The following code adds a new command group with two buttons (Create Document and Clear Preview):

   XAML

   xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
   xmlns:dxpbars="http://schemas.devexpress.com/winfx/2008/xaml/printing/bars"
   <!-- ... -->
   
   <dxb:InsertAction>
       <dxb:InsertAction.Element>
           <dxr:RibbonPageGroup Caption="Custom Commands" Name="CustomCommandGroup"/>
       </dxb:InsertAction.Element>                      
   </dxb:InsertAction>
   
   <dxb:InsertAction ContainerName="CustomCommandGroup">
       <dxb:InsertAction.Element>
           <dxb:BarButtonItem Content="Create Document" ItemClick="CreateDocument_ItemClick"/>
       </dxb:InsertAction.Element>
   </dxb:InsertAction>
   
   <dxb:InsertAction ContainerName="CustomCommandGroup">
       <dxb:InsertAction.Element>
           <dxb:BarButtonItem Content="Clear Preview" ItemClick="ClearPreview_ItemClick" />                                
       </dxb:InsertAction.Element>
   </dxb:InsertAction>
   

5. Add a custom Export to PDF button to allow a user to export to PDF:

   XAML

   <dxb:InsertAction ContainerName="{x:Static dxpbars:DefaultPreviewBarItemNames.ExportGroup}">
       <dxb:InsertAction.Element>
           <dxb:BarButtonItem Content="{dxp:PrintingStringId StringId=ExportPdf}" 
               LargeGlyph="{dxp:PrintingResourceImage ResourceName='Images/BarItems/ExportPDF.svg'}"
               Glyph="{dxp:PrintingResourceImage ResourceName='Images/BarItems/ExportPDF.svg'}"
               Hint="{dxp:PrintingStringId StringId=ExportPdf}" 
               Command="{Binding Path=(dxp:DocumentPreviewControl.ActualViewer).ExportCommand, 
                   RelativeSource={RelativeSource Self}}" 
               CommandParameter="Pdf"/>
       </dxb:InsertAction.Element>
   </dxb:InsertAction>
   

6. In this example, the Document Viewer loads a document created at runtime to display data from a simple array. The SimpleLink instance gets data from an array and uses the dayNameTemplate defined in XAML to create a document:

   XAML

   xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
   <!-- ... -->
   <Window.Resources>
       <DataTemplate x:Key="dayNameTemplate">
           <dxe:TextEdit IsPrintingMode="True" Text="{Binding Path=Content}"/>
       </DataTemplate>
   </Window.Resources>
   

   C#

   using System.Globalization;
   using System.Windows;
   using DevExpress.Xpf.Printing;
   // ...
       public partial class MainWindow : Window {
           private SimpleLink link;
   
           public MainWindow() {
               InitializeComponent();
   
               // Creates a document to display.
               string[] data = CultureInfo.CurrentCulture.DateTimeFormat.DayNames;
   
               link = new SimpleLink {
                   DetailTemplate = (DataTemplate)Resources["dayNameTemplate"],
                   DetailCount = data.Length
               };
               link.CreateDetail += (s, e) => e.Data = data[e.DetailIndex];
   
               preview.DocumentSource = link;
               link.CreateDocument();
           }
           // ...
       }
   

7. Handle the BarItem.ItemClick events for the newly added buttons:

   C#

   private void CreateDocument_ItemClick(object sender, 
       DevExpress.Xpf.Bars.ItemClickEventArgs e) 
   {
       link.CreateDocument();
   }
   
   private void ClearPreview_ItemClick(object sender, 
       DevExpress.Xpf.Bars.ItemClickEventArgs e) 
   {
       link.PrintingSystem.ClearContent();
   }
   

The result is shown in the following image: