.NET MAUI PDF Viewer Search Styling
The PDF Viewer for .NET MAUI 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.
The table below lists all toolbar items related to the search feature and their target type:
| Toolbar Item | Target Type |
|---|---|
PdfViewerSearchNavigationToolbarItem |
Style property with target type NavigationButtonToolbarItemView
|
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
|
The PdfViewerSearchBusyIndicatorToolbarItemView inherits from the BusyIndicatorToolbarItemView.
The PdfViewerSearchEntryToolbarItemView inherits from the EntryToolbarItemView.
The PdfViewerNavigateToPreviousSearchResultToolbarItemView, PdfViewerNavigateToNextSearchResultToolbarItemView, and NavigationButtonToolbarItemView inherit from 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
<Style x:Key="ToastStyle" TargetType="telerik:PdfViewerSearchToast">
<Setter Property="Fill" Value="#FF7F7F" />
<Setter Property="TextColor" Value="White" />
</Style>
And the PdfViewerSearchNavigationToolbarItem:
<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:
<telerik:RadPdfViewer x:Name="pdfViewer">
<telerik:RadPdfViewer.SearchSettings>
<telerik:PdfViewerSearchSettings MainSearchResultFill="#99FF7F7F"
SearchResultsFill="#997FC9FF"/>
</telerik:RadPdfViewer.SearchSettings>
</telerik:RadPdfViewer>