.NET MAUI PDF Viewer Toolbar Styling
The PDF Viewer for .NET MAUI provides a flexible styling API for its toolbar items.
As the PDFViewerToolbar
is based on the RadToolbar
control, all toolbar items in the PDF Viewer inherit from ButtonToolbarItem
. All styling properties available for the ButtonToolbarItem
are also applicable for the PDF toolbar items.
Here is an example:
1. PDF Viewer and Toolbar definitions in XAML:
<Grid RowDefinitions="{OnIdiom Desktop='Auto, *', Phone='*, Auto'}">
<telerik:RadPdfViewerToolbar Grid.Row="{OnIdiom Desktop=0, Phone=1}"
PdfViewer="{Binding Source={x:Reference pdfViewer}}"
Style="{StaticResource PdfViewerToolbarStyle}">
<telerik:PdfViewerFitToWidthToolbarItem Style="{StaticResource CommonToolbarItemViewStyle}"/>
<telerik:PdfViewerZoomInToolbarItem Style="{StaticResource ZoomToolbarItemViewStyle}"/>
<telerik:PdfViewerZoomOutToolbarItem Style="{StaticResource ZoomToolbarItemViewStyle}"/>
<telerik:PdfViewerNavigateToPreviousPageToolbarItem Style="{StaticResource CommonToolbarItemViewStyle}"/>
<telerik:PdfViewerNavigateToNextPageToolbarItem Style="{StaticResource CommonToolbarItemViewStyle}"/>
</telerik:RadPdfViewerToolbar>
<telerik:RadPdfViewer x:Name="pdfViewer"
Grid.Row="{OnIdiom Desktop=1, Phone=0}" />
</Grid>
2. Add the following namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3.: Define the style in the page's resources:
<Style TargetType="telerik:ButtonToolbarItemView" x:Key="commonStyle">
<Setter Property="MinimumWidthRequest" Value="40"/>
<Setter Property="BackgroundColor" Value="#608660C5"/>
</Style>
<Style TargetType="telerik:ButtonToolbarItemView" x:Key="zoomToolbarStyle" BasedOn="{StaticResource commonStyle}">
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="CornerRadius" Value="5"/>
<Setter Property="BorderThickness" Value="2"/>
</Style>
4.: Pass the document to the PdfViewer.Source
:
Func<CancellationToken, Task<Stream>> streamFunc = ct => Task.Run(() =>
{
Assembly assembly = typeof(Toolbar).Assembly;
string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("pdf-overview.pdf"));
Stream stream = assembly.GetManifestResourceStream(fileName);
return stream;
});
this.pdfViewer.Source = streamFunc;
Here is the result on the image below: