.NET MAUI PDF Viewer Search Styling

Updated over 6 months ago

The .NET MAUI PDF Viewer provides a flexible styling API for its search 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.

Styling the Toolbar's Search Item on Mobile

The default search toolbar item displayed on mobile devices is the PdfViewerSearchNavigationToolbarItem (Style property with target type NavigationButtonToolbarItemView). The

The table below lists all toolbar items related to the PdfViewerSearchNavigationToolbarItem and their target types:

Toolbar Item	Target Type
PdfViewerNavigateToPreviousSearchResultToolbarItem	Style property with target type PdfViewerNavigateToPreviousSearchResultToolbarItemView
PdfViewerNavigateToNextSearchResultToolbarItem	Style property with target type PdfViewerNavigateToNextSearchResultToolbarItemView
PdfViewerSearchEntryToolbarItem	Style property with target type PdfViewerSearchEntryToolbarItemView
PdfViewerSearchBusyIndicatorToolbarItem	Style property with target type PdfViewerSearchBusyIndicatorToolbarItemView
BackNavigationButtonToolbarItemView	Style property with target type ButtonToolbarItemView

Styling the Toolbar's Search Item on Desktop

The default search toolbar item displayed on desktop devices is the PdfViewerSearchToolbarItem. The toolbar item exposes the following properties:

• Style (target type ButtonToolbarItemView)—Specfies the style applied to the toolbar button that opens the search popup on desktop.
• SearchContentViewStyle (Style with a target type of PdfViewerSearchContentView)—Specifies the style applied to the search popup.

The table below lists all styling properties available in the SearchContentViewStyle:

Toolbar Item	Target Type
CloseButtonToolbarItemStyle	Style property with target type ButtonToolbarItemView
PreviousSearchResultToolbarItemStyle	Style property with target type PdfViewerNavigateToPreviousSearchResultToolbarItemView
NextSearchResultToolbarItemStyle	Style property with target type PdfViewerNavigateToNextSearchResultToolbarItemView
SearchEntryToolbarItemStyle	Style property with target type PdfViewerSearchEntryToolbarItemView
BusyIndicatorToolbarItemStyle	Style property with target type PdfViewerSearchBusyIndicatorToolbarItemView
SearchResultsLabelToolbarItemStyle	Style property with target type LabelToolbarItemView

The next table lists the inheritance of the target types:

Target Type	Inherits from
PdfViewerSearchBusyIndicatorToolbarItemView	BusyIndicatorToolbarItemView
PdfViewerSearchEntryToolbarItemView	EntryToolbarItemView
PdfViewerNavigateToPreviousSearchResultToolbarItemView	ButtonToolbarItemView
PdfViewerNavigateToNextSearchResultToolbarItemView	ButtonToolbarItemView
NavigationButtonToolbarItemView	ButtonToolbarItemView

Styling the Search Toast Message on Mobile

The PdfViewerSearchNavigationToolbarItem has a ToastStyle property which allows you to style the toast message with search results on mobile. The target type of the ToastStyle is the PdfViewerSearchToast.

Here is an example how to define the ToastStyle

xaml

<Style x:Key="ToastStyle" TargetType="telerik:PdfViewerSearchToast">
    <Setter Property="Fill" Value="#FF7F7F" />
    <Setter Property="TextColor" Value="White" />
</Style>

And the PdfViewerSearchNavigationToolbarItem:

xaml

<telerik:PdfViewerSearchNavigationToolbarItem ToastStyle="{StaticResource ToastStyle}" IsVisible="{OnIdiom Phone=True, Desktop=False}" />

Styling the Search Settings

The search results are highlighted by using the following properties:

• MainSearchResultFill (Color)—Specifies the fill of the main search result.
• SearchResultsFill (Color)—Specifies the fill of all search results, except the main result.

Here is an example with styling the MainSearchResultFill and SearchResultsFill:

XAML

<telerik:RadPdfViewer x:Name="pdfViewer">
    <telerik:RadPdfViewer.SearchSettings>
        <telerik:PdfViewerSearchSettings MainSearchResultFill="#99FF7F7F"
                                         SearchResultsFill="#997FC9FF"/>
    </telerik:RadPdfViewer.SearchSettings>
</telerik:RadPdfViewer>

See Also

• .NET MAUI PDF Viewer Forum Page
• Telerik .NET MAUI Blogs
• Telerik .NET MAUI Roadmap