In the late 80s, physicist Tim Berners-Lee created the first prototype of HTML - a unified format designed to share documents between researchers.
Since then, HTML adoption has grown exponentially, and is now used in browsers, email clients, and CMS systems. Needless to say, rich content stored in HTML format is used across the web and within applications able to render HTML. Thanks to its versatility, HTML is now ubiquitous.
If HTML editing is important to your mobile development strategy, the DevExpress .NET MAUI HTML Edit Control can help you incorporate HTML editing within your mobile solution and address a variety of usage scenarios, including:
- introduce rich text notes
- write comments/messages
- compose email messages
- create content for a CMS system.
In this blog post, I'll use the DevExpress .NET MAUI HTML Edit to display and edit descriptions of homes within a simple mobile application (using a CRUD editing form).
The application showcased in this post is available on GitHub: Edit HTML in DataGridView CRUD Views.
You can also watch a tutorial video on YouTube if you expect to integrate our .NET MAUI HTML Edit Control in your next .NET MAUI project.
The primary goal of our HTML Edit Control is to create/edit rich text content to be displayed in other components/applications. It doesn't support all HTML tags, such as interactive buttons, borders, etc.
To use the DevExpress .NET MAUI HTML Edit control in a project, you must purchase a DevExpress Universal Subscription. If you are new to our .NET MAUI product line and are considering it for an upcoming project, you can start a 30-day trial using NuGet as described in this help topic.
Display HTML Content in Read-Only Mode
Since mobile applications don't have much screen space, its good practice to separate item detail info/editing views.
In this particular example, our .NET MAUI HTML Edit displays rich text in read-only mode on the detail view page (HTML Edit includes an IsReadOnly property that restricts/permits content editing).
To display content in XAML, specify the HtmlEdit.HtmlSource property. For this example, this property is bound to a ViewModel property.
Related GitHub Repository Files
Switch to Edit Mode and Modify Descriptions on a Separate Page
When editing rich text, you will often need more space to display elements such as toolbars. You will also need to reduce excessive scrolling. It's for these reasons we recommend the use of a separate screen to edit content.
If you choose to display our HTML Edit Control in a separate view, you can leverage our built-in adaptive toolbar and use the following content editing actions:
- font attributes
- colors
- lists
- headers
- and many more.
Set the
HtmlEdit.ShowToolbar property to
true to display the toolbar.
Editing HTML content with the DevExpress HTML Edit works best if you place the control in a SafeKeyboardAreaView container. This container allows you to manage the following:
- Prevent HTML content from keyboard overlap.
- Decrease the height of HTML Edit when you open the device keyboard (to maintain toolbar visibility).
- Display custom content in the keyboard region to add more space for UI elements. The built-in toolbar uses this feature to display action panels.
Once you modify the HTML, call the HtmlEdit.GetHtmlAsync method to obtain HTML content and save it to a ViewModel property.
Related GitHub Repository Files
Free DevExpress Products - Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We'll be happy to follow-up.