Customize the Document Preview Toolbar

• Aug 18, 2023
• 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.

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: