.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:

See Also

• RadPdfProcessing library