Monday, 22 October 2018

Creating a Hyperlink in Xamarin.Forms

Creating a hyperlink in a Xamarin.Forms app has traditionally involved writing an effect or custom renderer, and having to provide platforms implementations as required.

Xamarin.Forms 3.2 introduced the ability to add a gesture recognizer to a Span, and Xamarin.Forms 3.3 introduced the ability to add a text decoration (such as underline) to a Span. Therefore, it’s now possible to easily add a tappable hyperlink to a Xamarin.Forms page. While this blog post focuses on achieving this with a Span, it’s equally directly applicable to a Label.

The sample this code comes from can be found on GitHub.

Creating a Hyperlink

The following XAML shows a Label that comprises three Span objects:

<Label> <Label.FormattedText> <FormattedString> <Span Text="Deliver native Android, iOS, and Windows apps with a single shared .NET code base. For more information, see " /> <Span Text="Xamarin documentation" TextColor="Blue" TextDecorations="Underline"> <Span.GestureRecognizers> <TapGestureRecognizer Command="{Binding TapCommand}" CommandParameter="https://docs.microsoft.com/xamarin/" /> </Span.GestureRecognizers> </Span> <Span Text="." /> </FormattedString> </Label.FormattedText> </Label>

The first and last Span objects simply comprise text, with the second Span object representing a tappable hyperlink. It has its colour set to blue, and has an underline text decoration. This creates the appearance of a hyperlink, as shown in the following screenshot:

Simulator Screen Shot - iPhone 8 - 2018-10-22 at 12.25.51

More importantly, the second Span has a TapGestureRecognizer in its GestureRecognizer collection. Therefore, when this Span is tapped the TapGestureRecognizer will respond by executing the ICommand defined by the Command property. In addition, the URI specified by the CommandParameter property will be passed to the ICommand as a parameter.

The code-behind for the page contains the TapCommand implementation:

public partial class MainPage : ContentPage { public ICommand TapCommand => new Command<string>(OpenBrowser); public MainPage() { InitializeComponent(); BindingContext = this; } void OpenBrowser(string url) { Device.OpenUri(new Uri(url)); } }

The TapCommand simply executes the OpenBrowser method, passing the CommandParameter property value as a parameter. In turn, this method calls the Device.OpenUri method, that’s included in Xamarin.Forms, to open the URI in a web browser. Therefore, the overall effect is that when the hyperlink is tapped on the page, a web browser appears and the URI associated with the hyperlink is navigated to:

Simulator Screen Shot - iPhone 8 - 2018-10-22 at 12.27.34

Summary

Xamarin.Forms 3.2 introduced the ability to add a gesture recognizer to a Span, and Xamarin.Forms 3.3 introduced the ability to add a text decoration (such as underline) to a Span. Therefore, it’s now possible to easily add a tappable hyperlink to a Xamarin.Forms page.

The sample this code comes from can be found on GitHub.

No comments:

Post a Comment