Customize the Document Viewer Toolbar in the WinUI Application

• Aug 18, 2023
• 2 minutes to read

This topic demonstrates how to hide the initial toolbar that is displayed out-of-the-box and create a new toolbar with existing commands and new custom actions.

Hide the Built-in Toolbar

Set the ShowCommandBar property to false to hide the built-in toolbar.

Create a New Toolbar

Declare a CommandBar in XAML, and add common UI elements. Bind the command bar controls to the Document Viewer commands from the DocumentViewer.Commands command container.

The code snippet below creates a custom toolbar with the following command elements:

• Standard Document Viewer command buttons.
• Back and Close AppBarButtons.
• A button with a link to this documentation page. The hyperlink button is a HyperlinkButton inside the AppBarElementContainer.

Page.xaml

```xaml
<Page
    x:Class="CustomizeDocumentViewerToolbarExample.Views.DocumentViewerPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CustomizeDocumentViewerToolbarExample.Views"
    xmlns:dxdv="using:DevExpress.WinUI.DocumentViewer"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid RowDefinitions="Auto,*">
        <CommandBar
            HorizontalAlignment="Left"
            DefaultLabelPosition="Right"
            IsOpen="False">
            <AppBarButton Click="AppBarButton_Click">
                <FontIcon Glyph="&#xE72B;" />
            </AppBarButton>
            <AppBarSeparator />
            <AppBarButton Command="{x:Bind documentViewer.Commands.ShowOpenDialogCommand}" Label="Open...">
                <FontIcon Glyph="&#xED25;" />
            </AppBarButton>
            <AppBarButton Command="{x:Bind documentViewer.Commands.ShowSaveDialogCommand}" Label="Save As...">
                <FontIcon Glyph="&#xE74E;" />
            </AppBarButton>
            <AppBarButton Command="{x:Bind documentViewer.Commands.ShowPrintDialogCommand}" Label="Print...">
                <FontIcon Glyph="&#xE749;" />
            </AppBarButton>

            <AppBarButton Command="{x:Bind documentViewer.Commands.ShowExportDialogCommand}" Label="Export...">
                <FontIcon Glyph="&#xEE71;" />
            </AppBarButton>

            <AppBarToggleButton Command="{x:Bind documentViewer.Commands.ToggleReportParameterPanelCommand}" Label="Parameters">
                <FontIcon Glyph="&#xF8A6;" />
            </AppBarToggleButton>

            <AppBarButton
                Command="{x:Bind documentViewer.Commands.CloseDocumentCommand}"
                Icon="Cancel"
                Label="Close Document">
                <FontIcon Glyph="&#xE8BB;" />
            </AppBarButton>
            <AppBarSeparator />
            <AppBarElementContainer Height="35">
                <HyperlinkButton Content="Documentation" NavigateUri="https://docs.devexpress.com/WinUI/DevExpress.WinUI.DocumentViewer.DocumentViewer" />
            </AppBarElementContainer>
        </CommandBar>
        <dxdv:DocumentViewer
            x:Name="documentViewer"
            Grid.Row="1"
            ShowCommandBar="False" />
    </Grid>

</Page>

```

View Example: WinUI DocumentViewer - Create a Custom Toolbar