Customize the Document Viewer Toolbar in the WinUI Application

• Oct 24, 2024
• 2 minutes to read

Important

The DevExpress WinUI product suite has been discontinued and is no longer available to new customers. We continue to monitor market-demands and the viability of WinUI as a desktop development platform. Should demand increase and market conditions change, we will reconsider our decision.

Existing Users: The DevExpress WinUI product line was available as part of a free product offer that expired on June 1, 2024. If you registered for the free offer before June 1, 2024 you can download the DevExpress WinUI product suite by visiting the DevExpress Client Center. The latest available version is v23.2.

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