question

Angelru-4290 avatar image
0 Votes"
Angelru-4290 asked Angelru-4290 commented

Label hyperlink

I get a long string with text and it may contain some URl in that text, how can I make that url clickable? I don't get any html, just string.

dotnet-xamarinforms
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Borisoprit-6789 avatar image
0 Votes"
Borisoprit-6789 answered Angelru-4290 commented

Something like This ?

134716-img-3446.jpg




Make a Class with the name LinksLabel

public class LinksLabel : Label

{
public static BindableProperty LinksTextProperty = BindableProperty.Create(nameof(LinksText), typeof(string), typeof(LinksLabel), propertyChanged: OnLinksTextPropertyChanged);
[Obsolete]
private readonly ICommand _linkTapGesture = new Command<string>((url) => Device.OpenUri(new Uri(url)));

public string LinksText
{
get => GetValue(LinksTextProperty) as string;
set => SetValue(LinksTextProperty, value);
}

private void SetFormattedText()
{
var formattedString = new FormattedString();

if (!string.IsNullOrEmpty(LinksText))
{
var splitText = LinksText.Split(' ');

foreach (string textPart in splitText)
{
var span = new Span { Text = $"{textPart} " };

if (IsUrl(textPart)) // a link
{
span.TextColor = Color.DeepSkyBlue;
span.GestureRecognizers.Add(new TapGestureRecognizer
{
Command = _linkTapGesture,
CommandParameter = textPart
});
}

formattedString.Spans.Add(span);
}
}

this.FormattedText = formattedString;
}

private bool IsUrl(string input)
{
return Uri.TryCreate(input, UriKind.Absolute, out var uriResult) &&
(uriResult.Scheme == Uri.UriSchemeHttp || uriResult.Scheme == Uri.UriSchemeHttps);
}

private static void OnLinksTextPropertyChanged(BindableObject bindable, object oldValue, object newValue)
{
var linksLabel = bindable as LinksLabel;
linksLabel.SetFormattedText();
}
}

Add to the Class

using System.Windows.Input;

using Xamarin.Forms;

Then in Xaml

<StackLayout>

<custom:LinksLabel
HorizontalTextAlignment="Center"
LinksText="This Xamarin.Forms Forums question can be visited at https://forums.xamarin.com/discussion/161082/make-multiple-links-in-labels-clickable#latest but Google only at https://www.google.com/"
TextColor="DarkGray" />

</StackLayout>








img-3446.jpg (76.9 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

wowwwww! many thanks!!!!

0 Votes 0 ·
JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered Angelru-4290 commented

Hello Angelru-4290,​

Welcome to our Microsoft Q&A platform!

how can I make that url clickable? I don't get any html, just string.

To display the Hyperlinks as string, try using Formatted text to display the url separately and adding tap gesture to the 'link' to achieve the loading function. Here is the sample code, you could refer to it.

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Alternatively, click " />
            <Span Text="this link"
                          TextColor="Blue"
                          TextDecorations="Underline">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
                                          CommandParameter="https://docs.microsoft.com/xamarin/" />
                </Span.GestureRecognizers>
            </Span>
            <Span Text=" to view Xamarin documentation." />
        </FormattedString>
    </Label.FormattedText>
</Label>


private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
    var url = (e as TappedEventArgs).Parameter as string;
    await Launcher.OpenAsync(url);
}

//you can also use tap command as below:
 public ICommand TapCommand => new Command<string>(async (url) => await Launcher.OpenAsync(url));

For more details, please refer to the docs:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/label#hyperlinks
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/label#formatted-text

Best Regards,

Jarvan Zhang


If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

thanks!!

0 Votes 0 ·