Creating a custom toolbar in UWP PDF Viewer (SfPdfViewer)
13 Jul 20261 minute to read
The SfPdfViewer control does not include a built-in toolbar by default; however, a custom toolbar can be designed at the application level, with its buttons wired to the SfPdfViewer APIs.
Creating separate UIs for desktop and mobile
Create a new UWP project (the name "PdfViewerCustomToolbar" is used here). By default, the project will contain a MainPage.xaml file and a MainPage.xaml.cs code-behind file. Create a new folder in the project with the name "DeviceFamily-Mobile", and create another XAML file named MainPage.xaml in this folder. Open this file and set the x:Class attribute to MainPage.xaml.cs.
x:Class="PdfViewerCustomToolbar.MainPage"Make sure that both XAML files are in the same namespace, "PdfViewerCustomToolbar".
xmlns:local="using:PdfViewerCustomToolbar"Two XAML files are used because the same UI design cannot be shared between desktop and mobile. One XAML file is used for the desktop UI, while the other is used for the mobile UI. The MainPage.xaml.cs file serves as the common code-behind for both XAML pages.
In the constructor of MainPage, set the DataContext to the SfPdfViewer instance.
this.DataContext = pdfViewer;The UI design of the application for desktop and mobile is illustrated in the following documentation pages. The link to the common sample can be found at the end of each documentation page.