title: Clickable HTML hyperlink within Label Xamarin.Forms
body: <p>I'm trying to make HTML hyperlinks within a xaml label clickable. I have created classes which take a string containing HTML from an API, and renderer it correctly as HTML inside of a custom label renderer in both Android and iOS. To understand my dilemma better, its necessary to explain the extent of my use.</p>
  
  <p>Inside my app, I have a messaging component that simply uses an API to post and get conversations from a website which is used primarily for better helping our users since our office is closed due to the coronavirus. The messaging center on the site allows for complex text formatting like a web forums post may, such as bold, italics, hyperlinks, etc. </p>
  
  <p>In order to display this correctly on mobile, I had to create a custom label renderer that will take the string with HTML tags and display it correctly as the body of the message. This was a simple enough task.</p>
  
  <p>The issue becomes that the messages may sometimes have hyperlinks, which currently display correct as links, but when a user tries to click on a link the list item is what registers the tap, not the label, nor the html link within the label. </p>
  
  <p>The expected result is that when a user clicks on the hyperlink within the label, within the list, it will open that hyperlink in the devices default browser. </p>
  
  <p>I understand that one solution may be to parse the body of the message for any links, create a list of links, and then dynamically add spans to a label that each have their own gesture recognizers, but this won't be possible for me due to the hyperlinks being at times midway through a conversation. An example of a messages body may be:</p>
  
  <p>'Hello <strong>user</strong>, please go to <a href="http://google.com" rel="noreferrer">this link</a> to login to your account.'</p>
  
  <p>I understand there are better ways to create a messaging app than this, but the primary purpose of the mobile side is for users to get easier access to responses from staff, and for simple chat responses to staff messages. Staff will use the site exclusively to respond to users, and may utilize the complex editor to better assist users. </p>
  
  <p>Thank you. 
  EDIT:
  <img src="https://i.stack.imgur.com/jh9P9.jpg" alt="conversation example"></p>
  
  <p>In the above example, the link at the end is not clickable. When i click on the link, the whole list view item highlights as if that ui element is higher priority than the label within. </p>
  
  <p>Code associated:</p>
  
  <pre><code>&lt;ListView.ItemTemplate&gt;
              &lt;DataTemplate&gt;
                  &lt;ViewCell&gt;
                      &lt;Frame
                          Margin="5"
                          Padding="0"
                          BorderColor="LightGray"
                          CornerRadius="15"
                          HasShadow="False"&gt;
                          &lt;StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"&gt;
                              &lt;StackLayout
                                  Padding="5"
                                  BackgroundColor="#f5f5f5"
                                  Orientation="Horizontal"&gt;
                                  &lt;Label
                                      Margin="5,2.5,5,2.5"
                                      BackgroundColor="Transparent"
                                      FontAttributes="Bold"
                                      FontSize="Small"
                                      HorizontalOptions="FillAndExpand"
                                      HorizontalTextAlignment="Start"
                                      Text="{Binding SentBy}"
                                      TextColor="Black"
                                      VerticalOptions="FillAndExpand" /&gt;
                                  &lt;Label
                                      Margin="5,2.5,5,2.5"
                                      BackgroundColor="Transparent"
                                      FontAttributes="Bold"
                                      FontSize="Small"
                                      HorizontalOptions="FillAndExpand"
                                      HorizontalTextAlignment="End"
                                      Text="{Binding Sent}"
                                      TextColor="Black"
                                      VerticalOptions="FillAndExpand" /&gt;
                              &lt;/StackLayout&gt;
                              &lt;StackLayout Padding="5" Orientation="Horizontal"&gt;
                                  &lt;Label
                                      Margin="2.5"
                                      BackgroundColor="Transparent"
                                      FontSize="Small"
                                      HorizontalOptions="FillAndExpand"
                                      HorizontalTextAlignment="Start"
                                      Text="{Binding Body}"
                                      TextColor="Black"
                                      TextType="Html"
                                      VerticalOptions="FillAndExpand" /&gt;
                              &lt;/StackLayout&gt;
                          &lt;/StackLayout&gt;
                      &lt;/Frame&gt;
                  &lt;/ViewCell&gt;
              &lt;/DataTemplate&gt;
          &lt;/ListView.ItemTemplate&gt;
  </code></pre>