Create a hyperlink using Xamarin.Forms (xaml and c#)

Question

I basically want to create a hyperlink in Xamarin.Forms using the label class. Basically, I want to following link to take the user to google.com in a web browser:

<Label Text="http://www.google.com/" />

I can't find anything in the Xamarin Forms API about this and the internet has vague and limited information on this topic in Xamarin.Forms.

Is this possible? If so, could someone please point me in the right direction? Thanks in advance to anyone who answers.

Answer 1

You can't really do this because Labels by default don't respond to user input, but you can achieve something similar with gestures

using Xamarin.Forms;
using Xamarin.Essentials;

Label label = new Label();
label.Text = "http://www.google.com/";

var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += async (s, e) => {
    // Depreciated - Device.OpenUri( new Uri((Label)s).Text); 
    await Launcher.OpenAsync(new Uri(((Label)s).Text));
};
label.GestureRecognizers.Add(tapGestureRecognizer);

Answer 2

I made this little class to handle it:

public class SimpleLinkLabel : Label
{
    public SimpleLinkLabel(Uri uri, string labelText = null)
    {
        Text = labelText ?? uri.ToString();
        TextColor = Color.Blue;
        GestureRecognizers.Add(new TapGestureRecognizer { Command = new Command(() => Device.OpenUri(uri)) });
    }
}

And a bit more involved if you want to underline it too:

public class LinkLabel : StackLayout
{
    private SimpleLinkLabel label;

    public LinkLabel(Uri uri, string labelText = null, bool underlined = true)
    {
        // Remove bottom padding
        Padding = new Thickness(Padding.Left, Padding.Top, Padding.Right, 0);
        VerticalOptions = LayoutOptions.Center;

        Children.Add(label = new SimpleLinkLabel(uri, labelText));

        if (underlined)
            Children.Add(new BoxView { BackgroundColor = Color.Blue, HeightRequest = 1, Margin = new Thickness(0, -8, 0, 0) });
    }

    public TextAlignment HorizontalTextAlignment { get { return label.HorizontalTextAlignment; } set { label.HorizontalTextAlignment = value; } }
}

The latter class inspired by this post: how to underline in xamarin forms

---

Edit: XLabs have aHyperLinkLabel too.

Answer 3

use a button and a xamarin.forms.theme nuget

<Button StyleClass = "Link"/>

https://developer.xamarin.com/guides/xamarin-forms/user-interface/themes/light/

Answer 4

<Label LineBreakMode="WordWrap">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Google">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Handle_Tapped" />
                </Span.GestureRecognizers>
            </Span>
        </FormattedString>
    </Label.FormattedText>
</Label>

public async void Handle_Tapped(object sender, EventArgs e)
{
    await Browser.OpenAsync(new Uri(url), BrowserLaunchMode.SystemPreferred);
}

Answer 5

If you want to do this with MVVM, you can create a Label with a blue text colour and a GestureRecognizers to hook it up to a Command:

<Label TextColor="Blue" Text="{Binding Model.LinkDescription}">
    <Label.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding ClickCommand}" CommandParameter="{Binding Model.LinkURL}"/>
    </Label.GestureRecognizers>
</Label>

In your ViewModel you can launch the default Browser using the Xamarin Essentials Nuget Package:

private Boolean IsValidUri(String uri)
{
    try
    {
        new Uri(uri);
        return true;
    }
    catch
    {
        return false;
    }
}

public ICommand ClickCommand => new Command<string>(async (url) =>
{
    try
    {
        if (!string.IsNullOrEmpty(url))
        {
            if (!url.Trim().StartsWith("http", StringComparison.OrdinalIgnoreCase))
            {
                url = "http://" + url;
            }
            if (IsValidUri(url))
            {
                await Browser.OpenAsync(new Uri(url), BrowserLaunchMode.SystemPreferred);
            }
        }
    }
    catch(Exception ex)
    {
        Debug.WriteLine(ex.Message);
    }

});