.NET MAUI PDF Viewer Toolbar Styling

The .NET MAUI PDF Viewer provides a flexible styling API for its toolbar items.

Style the Toolbar Items

The PDFViewerToolbar is based on the RadToolbar control, so the toolbar items in the PDF Viewer use a ToolbarItem.

Each toolbar item has a Style property and the target type of the property is the corresponding ToolbarItemView:

Toolbar Item	Style Target Type
PdfViewerFitToWidthToolbarItem	ButtonToolbarItemView
PdfViewerZoomInToolbarItem	ButtonToolbarItemView
PdfViewerZoomOutToolbarItem	ButtonToolbarItemView
PdfViewerSearchToolbarItem	ButtonToolbarItemView
PdfViewerToggleLayoutModeToolbarItem	ButtonToolbarItemView
PdfViewerNavigateToPreviousPageToolbarItem	ButtonToolbarItemView
PdfViewerNavigateToNextPageToolbarItem	ButtonToolbarItemView
PdfViewerNavigateToPageToolbarItem	ToolbarItemView
PdfViewerSearchNavigationToolbarItem	NavigationButtonToolbarItemView

All styling properties available for the target type ButtonToolbarItemView are also applicable for the PDF toolbar items that use this target type.

All properties applicable for [NavigationButtonToolbarItemView(/devtools/maui/controls/toolbar/items/navigation-button) can be used for stlying the PdfViewerSearchNavigationToolbarItem.

Example for Styling the Toolbar

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