Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Collapse]Printing-Exporting
   [Expand]Overview
   [Expand]Getting Started
   [Expand]Fundamental Concepts
   [Expand]Concepts
   [Collapse]Examples
     How to: Use the Simple Link
     How to: Use the CollectionView Link
     How to: Print and Export the DXGrid Control
     How to: Use the Composite Link
     How to: Customize the Document Preview Toolbar
     How to: Create Drill-Down Reports
     How to: Stretch the Detail Area to Fill the Entire Page
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Customize the Document Preview Toolbar

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=T263038.

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.

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

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

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

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

    Then, handle the BarItem.ItemClick events of the added buttons as shown below.

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

The result is shown in the following image.

Is this topic helpful?​​​​​​​