.NET MAUI PDF Viewer Toolbar Styling

The .NET MAUI PDF Viewer 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}" OverflowMode="Scroll" ScrollButtonsVisibility="Hidden"
                                 PdfViewer="{Binding Source={x:Reference pdfViewer}}">
        <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:PdfViewerSearchToolbarItem IsVisible="{OnIdiom Phone=False, Desktop=True}" 
                                            Style="{StaticResource CommonToolbarItemViewStyle}"
                                            SearchContentViewStyle="{StaticResource SearchPopupStyle}" />
        <telerik:PdfViewerSearchNavigationToolbarItem IsVisible="{OnIdiom Phone=True, Desktop=False}"
                                                      ToastStyle="{StaticResource ToastStyle}"
                                                      Style="{StaticResource SearchNavigationButtonStyle}" />
    </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:

<Color x:Key="ToolbarItemTextColor">White</Color>
<Color x:Key="ToolbarItemPlaceholderTextColor">#99FFFFFF</Color>
<Color x:Key="ToolbarButtonTextColor">WhiteSmoke</Color>
<Color x:Key="ToolbarItemInvertedTextColor">Black</Color>
<Color x:Key="ToolbarItemInvertedPlaceholderTextColor">#99000000</Color>
<Color x:Key="ToolbarItemPointerOverColor">#FABB5C</Color>
<Color x:Key="ToolbarAccentColor">#F9AA34</Color>
<Color x:Key="ToolbarAccentColorAlpha50">#80F9AA34</Color>
<Color x:Key="ToolbarDisabledColor">#61FFFFFF</Color>

<Style x:Key="CommonToolbarItemViewStyle" TargetType="telerik:ButtonToolbarItemView">
    <Setter Property="TextColor" Value="{StaticResource ToolbarItemTextColor}" />
    <Setter Property="BackgroundColor" Value="Transparent" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup Name="CommonStates">
                <VisualState Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{StaticResource ToolbarItemTextColor}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="PointerOver">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="{StaticResource ToolbarItemPointerOverColor}" />
                        <Setter Property="TextColor" Value="{StaticResource ToolbarItemInvertedTextColor}" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{StaticResource ToolbarDisabledColor}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>
<Style x:Key="ZoomToolbarItemViewStyle" TargetType="telerik:ButtonToolbarItemView" BasedOn="{StaticResource CommonToolbarItemViewStyle}">
    <Setter Property="TextColor" Value="{StaticResource ToolbarAccentColor}" />
</Style>
<Style TargetType="telerik:RadPdfViewerToolbar">
    <Setter Property="BackgroundColor" Value="#344955" />
    <Setter Property="BorderThickness" Value="0" />
</Style>

<!-- Applicable for Desktop -->
<Style x:Key="CommonSearchButtonStyle" TargetType="telerik:ButtonToolbarItemView" BasedOn="{StaticResource CommonToolbarItemViewStyle}">
    <Setter Property="TextColor" Value="{StaticResource ToolbarItemTextColor}" />
</Style>
<Style x:Key="SearchEntryStyle" TargetType="telerik:PdfViewerSearchEntryToolbarItemView">
    <Setter Property="EntryStyle">
        <Style TargetType="telerik:RadEntry">
            <Setter Property="TextColor" Value="{StaticResource ToolbarItemInvertedTextColor}" />
        </Style>
    </Setter>
</Style>
<Style x:Key="SearchResultsStyle" TargetType="telerik:LabelToolbarItemView">
    <Setter Property="TextColor" Value="{StaticResource ToolbarItemTextColor}" />
</Style>
<Style x:Key="BusyIndicatorStyle" TargetType="telerik:PdfViewerSearchBusyIndicatorToolbarItemView">
    <Setter Property="BusyIndicatorStyle">
        <Style TargetType="telerik:RadBusyIndicator">
            <Setter Property="AnimationContentColor" Value="{StaticResource ToolbarItemPointerOverColor}" />
        </Style>
    </Setter>
</Style>
<Style x:Key="SearchPopupStyle" TargetType="telerik:PdfViewerSearchContentView">
    <Setter Property="BackgroundColor" Value="#344955" />
    <Setter Property="SearchEntryToolbarItemStyle" Value="{StaticResource SearchEntryStyle}" />
    <Setter Property="SearchResultsLabelToolbarItemStyle" Value="{StaticResource SearchResultsStyle}" />
    <Setter Property="CloseButtonToolbarItemStyle" Value="{StaticResource CommonSearchButtonStyle}" />
    <Setter Property="PreviousSearchResultToolbarItemStyle" Value="{StaticResource CommonSearchButtonStyle}" />
    <Setter Property="NextSearchResultToolbarItemStyle" Value="{StaticResource CommonSearchButtonStyle}" />
    <Setter Property="BusyIndicatorToolbarItemStyle" Value="{StaticResource BusyIndicatorStyle}" />
</Style>

<!-- Applicable for mobile devices -->
<Style x:Key="ToastStyle" TargetType="telerik:PdfViewerSearchToast">
    <Setter Property="Fill" Value="{StaticResource ToolbarItemPointerOverColor}" />
    <Setter Property="TextColor" Value="#344955" />
</Style>
<Style TargetType="telerik:BackNavigationButtonToolbarItemView">
    <Setter Property="TextColor" Value="{StaticResource ToolbarButtonTextColor}" />
</Style>
<Style TargetType="telerik:PdfViewerSearchBusyIndicatorToolbarItemView">
    <Setter Property="BusyIndicatorStyle">
        <Style TargetType="telerik:RadBusyIndicator">
            <Setter Property="AnimationContentColor" Value="{StaticResource ToolbarItemPointerOverColor}" />
        </Style>
    </Setter>
</Style>
<Style TargetType="telerik:PdfViewerSearchEntryToolbarItemView">
    <Setter Property="EntryStyle">
        <Style TargetType="telerik:RadEntry">
            <Setter Property="Placeholder" Value="Search in document" />
            <Setter Property="PlaceholderColor" Value="{OnPlatform Default={StaticResource ToolbarItemPlaceholderTextColor}, iOS={StaticResource ToolbarItemInvertedPlaceholderTextColor}}" />
            <Setter Property="TextColor" Value="{OnPlatform Default={StaticResource ToolbarButtonTextColor}, iOS={StaticResource ToolbarItemInvertedTextColor}}" />
        </Style>
    </Setter>
</Style>
<Style x:Key="SearchNavigationButtonStyle" TargetType="telerik:ButtonToolbarItemView">
    <Setter Property="TextColor" Value="{StaticResource ToolbarAccentColor}" />
</Style>
<Style TargetType="telerik:PdfViewerNavigateToPreviousSearchResultToolbarItemView" BasedOn="{StaticResource CommonSearchButtonStyle}" />
<Style TargetType="telerik:PdfViewerNavigateToNextSearchResultToolbarItemView" BasedOn="{StaticResource CommonSearchButtonStyle}" />

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