Creating a custom toolbar in UWP PDF Viewer (SfPdfViewer)
18 Aug 20211 minute to read
PdfViewer does not have a toolbar by default. But a custom toolbar can be designed at the sample with its buttons wired to the PdfViewer APIs.
Creating separate UIs for desktop and mobile
Create a new UWP project (the name "PdfViewerCustomToolbar" is used here). It will by default have a MainPage.xaml file, a MainPage.xaml.cs file. Create a new folder in the project with name "DeviceFamily-Mobile" and create another XAML file with the same name MainPage.xaml in this folder. Open this file and set the class property to MainPage.xaml.cs.
x:Class="PdfViewerCustomToolbar.MainPage";Make sure that both the xaml files are in the same namespace "PdfViewerCustomToolbar"
xmlns:local="using:PdfViewerCustomToolbar";The reason for two XAML files is that same UI design cannot be used for both desktop and mobile. So, one XAML file is used for desktop UI and the other is for mobile UI. The MainPage.xaml.cs file serve as the common code behind for both XAML pages.
In the constructor of MainPage set the DataContext to PdfViewer.
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 ends of both the documentation pages.