Skip to main content

How to: Customize the Document Preview Toolbar

  • 3 minutes to read

View Example

This example demonstrates how you can customize the Document Preview toolbar. You can remove standard toolbar controls, and add custom commands and controls.

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:

    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:

    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:

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

    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:

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

    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>
    
  7. Handle the BarItem.ItemClick events for the newly added buttons:

    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:

Custom-BarManager-DocumentPreview