.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.
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 typeButtonToolbarItemView)—Specfies the style applied to the toolbar button that opens the search popup on desktop. -
SearchContentViewStyle(Stylewith a target type ofPdfViewerSearchContentView)—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
<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>