Issue with Label in ListView: Unable to Navigate to URLs in HTML Text with Dynamic Data

Question

'm currently working on a Microsoft Maui application where I have a ListView containing labels. These labels display dynamically generated HTML-formatted text obtained from data, and within this text, there could be multiple hyperlinks to external URLs.   Despite correctly highlighting the URLs within the Label component, I'm encountering difficulties implementing functionality that allows users to navigate to these URLs in an external web browser.   Could you please provide guidance on how to implement this feature effectively for dynamically generated HTML text containing multiple URLs? Specifically, I need assistance on enabling hyperlink navigation within the Label component in a ListView, allowing users to open any URL in an external web browser when clicked.

  Thank you for your assistance!

** --update

To provide some context, here's a snippet of the code I'm currently using for the Label component within my ListView: C#Copy

                <Label TextType="Html">
                    <![CDATA[
 <p>Hi Google -&nbsp;<a class="e-rte-anchor" href="https://www.google.com/" title="Google" >Google Link</a></p><p>Please check the above URL.</p><p>Please check&nbsp;<a class="e-rte-anchor" href="https://help.syncfusion.com/maui/carousel-view/populating-data?cs-save-lang=1&cs-lang=xaml" title="Syncfusion Maui" target="_blank">Syncfusion</a>&nbsp;Maui.</p>
]]>
                </Label>

In this implementation, I'm able to display HTML-formatted text containing multiple URLs within the Label component. However, I'm struggling to capture click events on these URLs and retrieve the URL that was clicked. Could you please provide guidance on how I can capture click events for each individual URL within the HTML text and retrieve the specific URL that was clicked? Any assistance you can provide would be greatly appreciated. Thank you,

Answer 1

see docs:

https://learn.microsoft.com/en-us/dotnet/maui/platform-integration/appmodel/open-browser?view=net-maui-8.0&tabs=android

Answer 2

Thank you for your attention to my inquiry. To provide some context, here's a snippet of the code I'm currently using for the Label component within my ListView: C#Copy

                <Label TextType="Html">
                    <![CDATA[
 <p>Hi Google -&nbsp;<a class="e-rte-anchor" href="https://www.google.com/" title="Google" >Google Link</a></p><p>Please check the above URL.</p><p>Please check&nbsp;<a class="e-rte-anchor" href="https://help.syncfusion.com/maui/carousel-view/populating-data?cs-save-lang=1&cs-lang=xaml" title="Syncfusion Maui" target="_blank">Syncfusion</a>&nbsp;Maui.</p>
]]>
                </Label>

In this implementation, I'm able to display HTML-formatted text containing multiple URLs within the Label component. However, I'm struggling to capture click events on these URLs and retrieve the URL that was clicked. Could you please provide guidance on how I can capture click events for each individual URL within the HTML text and retrieve the specific URL that was clicked? Any assistance you can provide would be greatly appreciated. Thank you,

Answer 3

Hello, You could turn the text into hyperlinks and add a TapGestureRecognizer, then open the url in web browser.

Please see the Create a hyperlink section in the Label doc:

The TapCommand executes the Launcher.OpenAsync method, passing the TapGestureRecognizer.CommandParameter property value as a parameter. The Launcher.OpenAsync method opens the URL in a web browser. Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.