Select Content

• Nov 14, 2023
• 2 minutes to read

The HTML Edit control includes the following members that allow you to select HTML content:

SetSelectionRangeAsync(HtmlSelectionRange)

Asynchronously selects HTML markup with the specified HtmlSelectionRange object properties.

SetSelectionRangeAsync(Int32, Int32)

Asynchronously selects HTML markup with the specified start character index and selection length settings.

SelectionRange

Gets or sets the HtmlSelectionRange object that stores the selection’s start character index and selection length. This is a bindable property.

Select Content (Synchronous)

The following code snippet defines HTML content and selects its first 15 characters:

C#

public partial class MainPage : ContentPage {
    public MainPage() {
        InitializeComponent();
        Init();
    }
    async void Init() {
        string text = "<h2>Search Input Field</h2><p>When it comes to locating text-based items quickly, a simple search input field proves to be remarkably effective.</p>";
        await htmledit.SetHtmlSourceAsync(text);
        htmledit.SelectionRange = new SelectionRange(0,18);
    }
}

XAML

<ContentPage ...
             xmlns:dxhtml="clr-namespace:DevExpress.Maui.HtmlEditor;assembly=DevExpress.Maui.HtmlEditor"
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
    <dx:SafeKeyboardAreaView>
        <dxhtml:HtmlEdit x:Name="htmledit"/>
    </dx:SafeKeyboardAreaView>
</ContentPage>

Select Content (Asynchronous)

If you perform a subsequent action after the selection operation, the selection must be performed asynchronously.

The following code sample loads HTML content from a string and calls the HtmlEdit.SetSelectionRangeAsync method to select the first 18 characters:

C#

public partial class MainPage : ContentPage {
    public MainPage() {
        InitializeComponent();
        Init();
    }
    async void Init() {
        string text = "<h2>Search Input Field</h2><p>When it comes to locating text-based items quickly, a simple search input field proves to be remarkably effective.</p>";
        await htmledit.SetHtmlSourceAsync(text);
        await htmledit.SetSelectionRangeAsync(0,18);
        // subsequent operations
        // htmledit.SelectedTextDecorations = TextDecorations.Underline;
    }
}

Retrieve Selected Text

Use the SelectedText property to obtain the selected text. The following code sample obtains 10 characters starting from the 123rd character:

C#

public partial class MainPage : ContentPage {
    public MainPage() {
        InitializeComponent();
        Init();
    }
    async void Init() {
        await htmledit.SetSelectionRangeAsync(123,10);
        string selectedtext = htmledit.SelectedText;
    }
}

Next Steps

Modify Content

This topic describes how to customize the displayed content.

Create a Custom Toolbar

This topic describes how to create a custom DXToolbar.