HyperlinkButton in C# XAMARIN.FORMS

Question

I want to create Label with click possibility like in WIN phone xaml

<HyperlinkButton Content="My Text to click"/>

Is there a possibility to do it in Xamarin.Forms?

I found this but is not the same:

https://github.com/XLabs/Xamarin-Forms-Labs/wiki/HyperLinkLabel

Answer 1

I'd take a much more standard approach and use a Button . Just set the background to match your app background and remove the border. Then there's no need for extra TapGestureRecongniser code. (Pseudo Code below:)

Xaml:

<Button Text="Click Me!" Background= "YourAppBackground" BorderWidth="0" Clicked="OnButtonClicked" />

Code-Behind:

void OnButtonClicked(object sender, EventArgs args)
{
    //Open your link in here
}

Answer 2

I would suggest using GestureRecognizers and adding a Tap Gesture to a label. Ref: here

var label = new Label()
{
  Text="My Hyperlink"
};
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += (s, e) => {
    // handle the tap
};
label.GestureRecognizers.Add(tapGestureRecognizer);

GestureRecognizer is a public property on the View class which Label inherits from. See here

Answer 3

XAML code would be as follows:

<Label
    Text="My Text to click"
    HorizontalOptions="Center" >

    <Label.GestureRecognizers>
        <TapGestureRecognizer
            Tapped="OnLabelTapped"
            NumberOfTapsRequired="2" />
    </Label.GestureRecognizers>
</Label>

Note: By default, NumberOfTapsRequired is 1.

Then in your .cs file, add the method OnLabelTapped .

public void OnLabelTapped(object sender, EventArgs args)
{
    // Your code here
    // Example:
    // DisplayAlert("Message", "You clicked on the label", "OK");
}

Answer 4

Yes, you can either use Button Clicked or TapGestureRecognizer. If you want to redirect to a site you can use WebView. If you want to direct to your own Native page: If you are using NavigationPage, you can use Navigation.PushAsync(new Page()); If your not using NavigationPage and would like to change MainPage: App.Current.MainPage = new MyContentPage();

Answer 5

This is a class I use to have a label act as a link:

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

For more options, this answer about creating a hyperlink in Xamarin Forms might be useful.

Answer 6

I do this --> create the following class:

public class ButtonAsLink : Button
{
    public ButtonAsLink()
    {
        this.TextColor = Color.Blue;
        this.BackgroundColor = Color.Transparent;
        this.BorderWidth = 0;
    }
}

Then everywhere you need to create a link button use this:

SendButton = new ButtonAsLink()
        {
            Text = "Send Logs...",
            VerticalOptions = LayoutOptions.Center
        };

Answer 7

If you want stylish the button (make it like hyperlink - with underline) you would like to implement the custom renderer:

Add this to xamarin.project

using Xamarin.Forms;

namespace xamarin.Mobile.Controls
{
    public class HyperlinkButton : Button
    {
        public HyperlinkButton()
        {
        }
    }
}

And implementation the renderer to IOS project:

using System.ComponentModel;
using xamarin.Mobile.IOS;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(xamarin.Mobile.Controls.HyperlinkButton), typeof(HyperlinkButtonRenderer))]
namespace xamarin.Mobile.IOS
{
    public class HyperlinkButtonRenderer : ButtonRenderer
    {
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (Control != null)
            {
                //Set attribute for underlineing information links
                var underlineAttr = new UIStringAttributes { UnderlineStyle = NSUnderlineStyle.Single };
                Control.SetAttributedTitle(new NSAttributedString(Control.CurrentTitle, underlineAttr), UIControlState.Normal);
            }
        }
    }
}

I added renderer for iOS only. If you want to support another versions - you have to add renderers to this platforms.

And use it at xcml like this:

<ContentPage ...
xmlns:control="clr-namespace:xamarin.Mobile.Controls">

<control:HyperlinkButton Text="Cancel" Clicked="CancelClicked"/>
</ContentPage>

Answer 8

Update to KidCode answer with actual code for opening the browser link

Xaml View:

<Button Text="Go Google" Clicked="GoGoogle" />

Code behind:

    void GoGoogle(object sender, EventArgs args)
    {
       Browser.OpenAsync("https://www.google.com");
    }