How to: Customize the DocumentViewer Toolbar

May 22, 2020
2 minutes to read

This example demonstrates how to customize the DocumentViewer control's toolbar (either Bar Manager or Ribbon Control). In particular, it shows how you can remove a standard button, and add custom ones.

To start with this tutorial, create a new Silverlight application with a Document Viewer or open an existing one.

To customize the Document Viewer's toolbar, do the following.

To remove an item from the toolbar, select the item and press DELETE, or right-click the item and select Delete in the invoked context menu.
To add a button item to a Ribbon control's page group or a Bar Manager's bar, select the corresponding toolbar element, click its smart tag and click Add BarButtonItem in the invoked actions list.

In this tutorial, we will add two buttons that will execute custom commands for generating a document and clearing the preview. For the added button, specify captions Create document and Clear preview. To specify the button's caption, click the button's smart tag and specify the Content property in the invoked actions list.

To provide a custom logic to a toolbar item, implement a custom command for it in a view model (MVVM approach). The implementation of the custom CreateDocumentCommand and ClearDocumentCommand is demonstrated in the MainWindoeViewModel file of the sample project.

NOTE

An alternative approach for providing custom logic to a toolbar button is to perform a custom action in the button's ItemClick event handler.

To bind toolbar buttons to custom commands contained in the view model, you need to specify the view model as the main page's data context in XAML:


<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing" 
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
    xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"       
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" 
    xmlns:System="clr-namespace:System;assembly=mscorlib"xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" 
    xmlns:dxr="http://schemas.devexpress.com/winfx/2008/xaml/ribbon" x:Class="SilverlightApplication1.MainPage"
    xmlns:local="clr-namespace:SilverlightApplication1"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="1000
    ">
   <!-- ... -->

    <UserControl.DataContext>
        <local:MainPageViewModel />
    </UserControl.DataContext>

   <!-- ... -->
<UserControl />

Now, you can bind your custom toolbar buttons to commands. To bind a toolbar button to a command available in a the page data context, select the button, expand the drop-down menu for its BarItem.Command property in the Properties window and select Create Data Binding....

In the invoked dialog, set Binding type to Data context, next specify the path to the required command in the Path tree list and click OK to exit the dialog.