HTML 内的可点击超链接 Label Xamarin.Forms

Question

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.

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.

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.

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.

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.

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:

'Hello user , please go to this link to login to your account.'

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.

Thank you. EDIT:

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.

Code associated:

<ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Frame
                        Margin="5"
                        Padding="0"
                        BorderColor="LightGray"
                        CornerRadius="15"
                        HasShadow="False">
                        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                            <StackLayout
                                Padding="5"
                                BackgroundColor="#f5f5f5"
                                Orientation="Horizontal">
                                <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" />
                                <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" />
                            </StackLayout>
                            <StackLayout Padding="5" Orientation="Horizontal">
                                <Label
                                    Margin="2.5"
                                    BackgroundColor="Transparent"
                                    FontSize="Small"
                                    HorizontalOptions="FillAndExpand"
                                    HorizontalTextAlignment="Start"
                                    Text="{Binding Body}"
                                    TextColor="Black"
                                    TextType="Html"
                                    VerticalOptions="FillAndExpand" />
                            </StackLayout>
                        </StackLayout>
                    </Frame>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>

Answer 1

Reposting/edit my previous answer as it got removed for incompleteness.

This should be of some help:

Showing part of a label as a clickable link, has been a long desired feature of Xamarin.Forms. With the release of 3.2.0, this is now possible.

Tappable Span

Create a Label, with a FormattedText property and spans as shown below. For those not familar, labels, have a property called FormattedText. It allows you to split text into separate sections, so you can format each of them differently.

<Label HorizontalOptions="Center"
       VerticalOptions="CenterAndExpand">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Hello " />
            <Span Text="Click Me!"
                  TextColor="Blue"
                  TextDecorations="Underline">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding ClickCommand}"
                                          CommandParameter="https://xamarin.com" />
                </Span.GestureRecognizers>
            </Span>
            <Span Text=" Some more text." />
        </FormattedString>
    </Label.FormattedText>
</Label>

In your ViewModel, add the following Command.

public ICommand ClickCommand => new Command<string>((url) =>
{
    Device.OpenUri(new System.Uri(url));
});

This will result in a label, with Click Me. text highlighted, Tapping the text. will result in the browser opening and going to xamarin.com.

Reference: https://xamarinhelp.com/hyperlink-in-xamarin.forms-label/

Answer 2

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.

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.

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.

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.

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.

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:

'Hello user , please go to this link to login to your account.'

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.

Thank you. EDIT:

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.

Code associated:

<ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Frame
                        Margin="5"
                        Padding="0"
                        BorderColor="LightGray"
                        CornerRadius="15"
                        HasShadow="False">
                        <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                            <StackLayout
                                Padding="5"
                                BackgroundColor="#f5f5f5"
                                Orientation="Horizontal">
                                <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" />
                                <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" />
                            </StackLayout>
                            <StackLayout Padding="5" Orientation="Horizontal">
                                <Label
                                    Margin="2.5"
                                    BackgroundColor="Transparent"
                                    FontSize="Small"
                                    HorizontalOptions="FillAndExpand"
                                    HorizontalTextAlignment="Start"
                                    Text="{Binding Body}"
                                    TextColor="Black"
                                    TextType="Html"
                                    VerticalOptions="FillAndExpand" />
                            </StackLayout>
                        </StackLayout>
                    </Frame>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>