PDF Viewer Search functionality in Telerik UI for .NET MAUI

Telerik UI for.NET MAUI has a PDF Viewer Search feature. This latest feature results from Telerik and Microsoft’s combined innovation, representing a substantial breakthrough in the .NET MAUI framework.

Telerik has worked meticulously to create this revolutionary framework, which results in smooth integration and excellent performance. This new upgrade underscores Telerik’s constant dedication to improving user experience, highlighting the company’s position as a market leader. Telerik provides unwavering assistance to users at every development process level, fostering a climate where conquering developmental hurdles becomes more achievable.

Introducing the famous DevCraft suite in this version brings up a wealth of development opportunities. The DevCraft suite is an incredible asset for developers, thanks to its extensive range of tools and solid support materials. Its single license provides access to many of Telerik’s respected development packs, including Telerik UI for ASP.NET Core, Telerik UI for Blazor, Telerik UI for React, and Telerik UI for Angular.

Telerik User Interface for.NET MAUI’s new service allows developers to embark on a transformational path toward software development excellence. The improved materials and enhanced functionality included in the DevCraft Ultimate package offer an enthralling and transforming developing journey. This release is a priceless chance for tech enthusiasts to discover and explore new aspects of creativity and project execution. Dive into this great offering right now and begin your adventure of exploration and creativity.

In this post, I demonstrate how to implement PDF Search in a new .NET MAUI project.

Let’s do it.

Creating a blank project from the Visual Studio extensions menu: Telerik -> Telerik UI for .NET MAUI -> Create New Telerik Project.

Adding code to the MainPage.xaml for this sample.

1. Start creating the Grid

<Grid RowDefinitions="{OnIdiom Desktop='Auto, *', Phone='*, Auto'}">
</Grid>

The Grid element is used to arrange child elements in a grid format. The RowDefinitions property of the Grid element defines each row’s height in the grid. The OnIdiom markup is used to specify different row heights for different device types.

Without the Grid element, arranging the child elements in a visually appealing and functional way would not be easy. The Grid element provides a flexible and powerful way to arrange child elements in a grid format.

2. Add the Toolbar

<telerik:RadPdfViewerToolbar Grid.Row="{OnIdiom Desktop=0, Phone=1}"
                             PdfViewer="{x:Reference pdfViewer}">
    <telerik:PdfViewerSearchToolbarItem IsVisible="{OnIdiom Phone=False, Desktop=True}" />
    <telerik:PdfViewerSearchNavigationToolbarItem IsVisible="{OnIdiom Phone=True, Desktop=False}" />
</telerik:RadPdfViewerToolbar>

The RadPdfViewerToolbar is the UI that provides a set of buttons and tools for interacting with the RadPdfViewer, as seen below.

In this code, the RadPdfViewerToolbar is added to the Grid control with a Grid.Row property set to Grid.Row="{OnIdiom Desktop=0, Phone=1}. This tells the toolbar to be displayed in the first row of the Grid when the application runs on a Desktop and in the second row when running on a Phone.

3. Add the RadPdfViewer

 <telerik:RadPdfViewer x:Name="pdfViewer"
                   Grid.Row="{OnIdiom Desktop=1, Phone=0}">
 </telerik:RadPdfViewer>

The RadPdfViewer is where the PDF document is displayed.

In this code, the RadPdfViewer is added to the Grid control with a Grid.Row property set to Grid.Row="{OnIdiom Desktop=1, Phone=0}. This tells the toolbar to be displayed in the second row of the Grid when the application runs on a Desktop and in the first row when running on a Phone.

4. Add the search settings

<telerik:RadPdfViewer.SearchSettings>
    <telerik:PdfViewerSearchSettings 
        MainSearchResultFill="#99FF7F7F"
        SearchResultsStringFormat="Result: {0}, Total: {2}"
        SearchResultsFill="#997FC9FF"
        TextSearchTrigger="TextChanged">
    </telerik:PdfViewerSearchSettings>
</telerik:RadPdfViewer.SearchSettings>

The RadPdfViewer.SearchSettings property is used to specify the search settings for RadPdfViewer control. It’s a class that contains properties that define the search behavior of the RadPdfViewer control.

Here, we can configure the TextSearchTrigger to search the text. Below are the options to trigger when completed, while the text is changed, or None, which fires when the ENTER key is pressed.

5. Add the PdfVieweeSearchSetttings.SearchOptions

<telerik:PdfViewerSearchSettings.SearchOptions>
    <telerikTextSearch:TextSearchOptions>
        <telerikTextSearch:TextSearchOptions.UseRegularExpression>
            <x:Boolean>True</x:Boolean>
        </telerikTextSearch:TextSearchOptions.UseRegularExpression>
    </telerikTextSearch:TextSearchOptions>
</telerik:PdfViewerSearchSettings.SearchOptions>

The PdfViewerSearchSettings.SearchOptions property is used to specify the search options for the PdfViewerSearchSettings. The TextSearchOptions.UseRegularExpression is set to true, which enables regular expressions for text search. The namespace is defined in the class Telerik.Windows.Documents.Fixed.Search, see the namespace below.

6. Add the namespace to recognize telerikTextSearch

xmlns:telerikTextSearch="clr-namespace:Telerik.Windows.Documents.Fixed.Search;assembly=Telerik.Documents.Fixed"

7. In the MainPage.xaml.cs you can load your pdf document

pdfViewer.Source = @"..\Documents\The Sweet Gesture.pdf";

After these steps, our application is ready to run, and here is the result.

Here is the full Content Page.

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
             xmlns:telerikTextSearch="clr-namespace:Telerik.Windows.Documents.Fixed.Search;assembly=Telerik.Documents.Fixed"
             x:Class="TelerikMauiAppSupportTelerikVS2022.MainPage">

    <Grid RowDefinitions="{OnIdiom Desktop='Auto, *', Phone='*, Auto'}">
        <telerik:RadPdfViewerToolbar Grid.Row="{OnIdiom Desktop=0, Phone=1}"
                                     PdfViewer="{x:Reference pdfViewer}">
            <telerik:PdfViewerSearchToolbarItem IsVisible="{OnIdiom Phone=False, Desktop=True}" />
            <telerik:PdfViewerSearchNavigationToolbarItem IsVisible="{OnIdiom Phone=True, Desktop=False}" />
        </telerik:RadPdfViewerToolbar>
        <telerik:RadPdfViewer x:Name="pdfViewer"
                              Grid.Row="{OnIdiom Desktop=1, Phone=0}">
            <telerik:RadPdfViewer.SearchSettings>
                <telerik:PdfViewerSearchSettings MainSearchResultFill="#99FF7F7F"
                                                 SearchResultsStringFormat="Result: {0}, Total: {2}"
                                                 SearchResultsFill="#997FC9FF"
                                                 TextSearchTrigger="TextChanged">
                    <telerik:PdfViewerSearchSettings.SearchOptions>
                        <telerikTextSearch:TextSearchOptions>
                            <telerikTextSearch:TextSearchOptions.UseRegularExpression>
                                <x:Boolean>True</x:Boolean>
                            </telerikTextSearch:TextSearchOptions.UseRegularExpression>
                        </telerikTextSearch:TextSearchOptions>
                    </telerik:PdfViewerSearchSettings.SearchOptions>
                </telerik:PdfViewerSearchSettings>
            </telerik:RadPdfViewer.SearchSettings>
        </telerik:RadPdfViewer>
    </Grid>
</ContentPage>

Conclusion

PDF Text Search for .NET MAUI is a welcome feature that adds value to our products. This project is available on my GitHub for download: https://github.com/jssmotta/TelerikPdfSearch23.