Create a hyperlink using Xamarin.Forms (xaml and c

Question

I am a relatively inexperienced professional programmer (I'm only 20 years old). Therefore, I apologize in advance as there may be some larger concepts that I do not fully grasp yet. I hope this is an appropriate question to ask, as an hour of googling could not help me.

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

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

var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
    Device.OpenUri( new Uri((Label)s).Text);
};
label.GestureRecognizers.Add(tapGestureRecognizer);

Answer 2

If you want to do this in Xaml, 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);
    }

});

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

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 a HyperLinkLabel too.