How to: Customize the Document Preview Toolbar
- 4 minutes to read
This example demonstrates how you can customize a Document Preview control’s Ribbon toolbar. In particular, it shows how you can remove standard toolbar controls, and add custom ones.
To start with this tutorial, create a new WPF application with the Document Preview or open an existing one.
To customize the Document Preview control’s toolbar, do the following.
In XAML, declare a custom command provider of the type DocumentCommandProvider for the Document Preview control. A command provider exposes the CommandProvider.RibbonActions property, which specifies a collection of actions used to customize the Document Preview control’s ribbon.
... <dxp:DocumentPreviewControl Name="preview"> <dxp:DocumentPreviewControl.CommandProvider> <dxp:DocumentCommandProvider> </dxp:DocumentCommandProvider> </dxp:DocumentPreviewControl.CommandProvider> </dxp:DocumentPreviewControl> ...
To replace a standard icon of a toolbar command, add an UpdateAction with a specified bar item name to the command provider’s RibbonActions collection property. To identify toolbar items by their names, use fields of the DefaultPreviewBarItemNames class. In the code sample below, a UpdateAction is used to update the Print command icon.
... <dxp:DocumentPreviewControl Name="preview"> <dxp:DocumentPreviewControl.CommandProvider> <dxp:DocumentCommandProvider> <dxp:DocumentCommandProvider.RibbonActions> <dxb:UpdateAction ElementName="{x:Static dxpbars:DefaultPreviewBarItemNames.Print}" Property="{x:Static dxb:BarItem.LargeGlyphProperty}" Value="{dxp:PrintingImageSelector Source={dx:DXImage Image=Print_32x32.png}, SvgSource='Images/BarItems/Print.svg'}"/> </dxp:DocumentCommandProvider.RibbonActions> </dxp:DocumentCommandProvider> </dxp:DocumentPreviewControl.CommandProvider> </dxp:DocumentPreviewControl> ...
To remove an element from a toolbar, add a RemoveAction with a specified toolbar element name to the command provider’s RibbonActions collection property. In the code sample below, a RemoveAction is used to remove the File command group.
... <dxb:RemoveAction ElementName="{x:Static dxpbars:DefaultPreviewBarItemNames.FileGroup}"/> ...
To add a new element to a toolbar, add an InsertAction to the command provider’s RibbonActions collection property. The example below shows how to add a new custom command group to the ribbon toolbar, and then, add two buttons (Create Document and Clear Preview) to this command group.
... <dxb:InsertAction> <dxb:InsertAction.Element> <dxr:RibbonPageGroup Caption="Custom Commands" Name="CustomCommandsGroup"/> </dxb:InsertAction.Element> </dxb:InsertAction> <dxb:InsertAction ContainerName="CustomCommandsGroup"> <dxb:InsertAction.Element> <dxb:BarButtonItem Content="Create Document" ItemClick="CreateDocument_ItemClick"/> </dxb:InsertAction.Element> </dxb:InsertAction> <dxb:InsertAction ContainerName="CustomCommandsGroup"> <dxb:InsertAction.Element> <dxb:BarButtonItem Content="Clear Preview" ItemClick="ClearPreview_ItemClick"/> </dxb:InsertAction.Element> </dxb:InsertAction> ...
Then, handle the BarItem.ItemClick events of the added buttons as shown below.
Next, display only the PDF File button preforming the PDF export instead of the default Export… drop-down button. To do this, delete the standard Export bar item using the RemoveAction. Then, add a custom bar item and bind its Command and CommandParameter properties as in the code snippet below.
... <dxb:RemoveAction ElementName="{x:Static dxpbars:DefaultPreviewBarItemNames.Export}"/> <dxb:InsertAction ContainerName="{x:Static dxpbars:DefaultPreviewBarItemNames.ExportGroup}"> <dxb:InsertAction.Element> <dxb:BarButtonItem Content="{dxp:PrintingStringId StringId=ExportPdf}" LargeGlyph="{dxp:PrintingImageSelector Source={dx:DXImage Image=ExportToPDF_32x32.png}, SvgSource='Images/BarItems/ExportToPDF.svg'}" Glyph="{dxp:PrintingImageSelector Source={dx:DXImage Image=ExportToPDF_16x16.png}, SvgSource='Images/BarItems/ExportToPDF.svg'}" Hint="{dxp:PrintingStringId StringId=ExportPdf}" Command="{Binding Path=(dxp:DocumentPreviewControl.ActualViewer).ExportCommand, RelativeSource={RelativeSource Self}}" CommandParameter="Pdf"/> </dxb:InsertAction.Element> </dxb:InsertAction> ...
Note
A complete sample project is available at https://github.com/DevExpress-Examples/documentpreviewcontrol-how-to-remove-standard-bar-items-and-add-custom-ones-to-the-toolbar-t263038.
<Window x:Class="CustomizePreviewToolbar.MainWindow"
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:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
xmlns:dxpbars="http://schemas.devexpress.com/winfx/2008/xaml/printing/bars"
xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon"
Title="MainWindow" Height="650" Width="1100">
<Window.Resources>
<DataTemplate x:Key="dayNameTemplate">
<dxe:TextEdit IsPrintingMode="True" Text="{Binding Path=Content}"/>
</DataTemplate>
</Window.Resources>
<Grid>
<dxp:DocumentPreviewControl Name="preview">
<dxp:DocumentPreviewControl.CommandProvider>
<dxp:DocumentCommandProvider>
<dxp:DocumentCommandProvider.RibbonActions>
<dxb:UpdateAction ElementName="{x:Static dxpbars:DefaultPreviewBarItemNames.Print}"
Property="{x:Static dxb:BarItem.LargeGlyphProperty}"
Value="{dxp:PrintingImageSelector Source={dx:DXImage Image=Print_32x32.png},
SvgSource='Images/BarItems/Print.svg'}"/>
<dxb:RemoveAction ElementName="{x:Static dxpbars:DefaultPreviewBarItemNames.Export}"/>
<dxb:RemoveAction ElementName="{x:Static dxpbars:DefaultPreviewBarItemNames.FileGroup}"/>
<dxb:InsertAction>
<dxb:InsertAction.Element>
<dxr:RibbonPageGroup Caption="Custom Commands" Name="CustomCommandsGroup"/>
</dxb:InsertAction.Element>
</dxb:InsertAction>
<dxb:InsertAction ContainerName="CustomCommandsGroup">
<dxb:InsertAction.Element>
<dxb:BarButtonItem Content="Create Document" ItemClick="CreateDocument_ItemClick"/>
</dxb:InsertAction.Element>
</dxb:InsertAction>
<dxb:InsertAction ContainerName="CustomCommandsGroup">
<dxb:InsertAction.Element>
<dxb:BarButtonItem Content="Clear Preview" ItemClick="ClearPreview_ItemClick" />
</dxb:InsertAction.Element>
</dxb:InsertAction>
<dxb:InsertAction ContainerName="{x:Static dxpbars:DefaultPreviewBarItemNames.ExportGroup}">
<dxb:InsertAction.Element>
<dxb:BarButtonItem Content="{dxp:PrintingStringId StringId=ExportPdf}"
LargeGlyph="{dxp:PrintingImageSelector Source={dx:DXImage Image=ExportToPDF_32x32.png},
SvgSource='Images/BarItems/ExportToPDF.svg'}"
Glyph="{dxp:PrintingImageSelector Source={dx:DXImage Image=ExportToPDF_16x16.png},
SvgSource='Images/BarItems/ExportToPDF.svg'}"
Hint="{dxp:PrintingStringId StringId=ExportPdf}"
Command="{Binding Path=(dxp:DocumentPreviewControl.ActualViewer).ExportCommand,
RelativeSource={RelativeSource Self}}"
CommandParameter="Pdf"/>
</dxb:InsertAction.Element>
</dxb:InsertAction>
</dxp:DocumentCommandProvider.RibbonActions>
</dxp:DocumentCommandProvider>
</dxp:DocumentPreviewControl.CommandProvider>
</dxp:DocumentPreviewControl>
</Grid>
</Window>
The result is shown in the following image.