如何在 Xamarin Forms 中超链接部分标签文本？

Question

In HTML5 I could accomplish this by doing something like:

lblTxt.Text = "For more info <a href='http://url.com1'>click here</a>, for contact <a href='mailto:contact@domain.com'>send an email</a>";

Tks

Answer 1

Links are no first class citizen in Xamarin.Forms, due to its structure which is fundamentally different to HTML.

You could - if you insisted on links - create a StackLayout containing each one label for the text before and after the link and one for the link

<ContentPage ...>
   <ContentPage.Resources>
       <ResourceDictionary>
           <Style x:Key="LinkLabel" TargetType="Label">
                <Setter Property="TextColor" Value="Blue" />
            </Style>
       </ResourceDictionary>
   </ContentPage.Resources>
   <StackLayout Orientation="Horizontal">
       <Label Text="For more info" />
       <Label Text="click here" Style="{StaticResource LinkLabel}">
           <Label.GestureRecognizers>
               <!-- Add TapGestureRecognizer that invokes an action on your viewmodel -->
           </Label.GestureRecognizers>
       </Label>
       <Label Text=", for contact">
       <!-- and so on, I think you#ve got the gist -->
   </StackLayout>
</ContentPage>

Admittedly this does not scale very well, but it's conceivable to create a custom view based on a ContentView with a Text property that decomposes the text and adds the labels dynamically. This would work - technically.

But : Please don't do it, if you can avoid it at any rate. Texts with hypeterlinks are no native UI idiom. For the best UX you should stick to proven native UI idioms. Links may be hard to hit if the text is not large enough and - honestly - are most likely not the most beautiful option to do what you want.

Answer 2

XAML Approach:

<Label
    x:Name="LDescription"
    HorizontalOptions="FillAndExpand"
    TextColor="#000000">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="We have so much to offer."/>
            <Span Text=" "/>
            <Span Text="Learn More." TextColor="#CF9F24">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding Command}" NumberOfTapsRequired="1"/>
                </Span.GestureRecognizers>
            </Span>
        </FormattedString>
    </Label.FormattedText>
 </Label>

Code Behind Approach:

XAML

<Label
    x:Name="LDescription"
    HorizontalOptions="FillAndExpand"
    TextColor="#000000">
    <Label.FormattedText>
        <FormattedString>
            <Span Text="We have so much to offer."/>
            <Span Text=" "/>
            <Span x:Name="SLearnMore" Text="Learn More." TextColor="#CF9F24"/>
        </FormattedString>
    </Label.FormattedText>
 </Label>

Code Behind

YourPage() //constructor
{
    Appearing += YourPage_Appearing;
    Disappearing += YourPage_Disappearing;
}

void YourPage_Appearing(object sender, EventArgs e)
{
    var learnMore = new TapGestureRecognizer();
    learnMore.Tapped += LearnMore_Tapped;
    SLearnMore.GestureRecognizers.Add(learnMore);
}

void YourPage_Disappearing(object sender EventArgs e)
{
    SLearnMore.GestureRecognizers.Clear();
}

void LearnMore_Tapped(object sender, EventArgs e)
{
    // Your click logic    
}

Answer 3

With your ideas I ended up with this code:

<Label>
<Label.FormattedText>
    <FormattedString>
        <Span Text="long bla bla bla..., "/>
        <Span Text="click here" ForegroundColor="Blue"/>
        <Span Text=" and more bla bla"/>
    </FormattedString>
</Label.FormattedText>
<Label.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ClickHereCommand}" NumberOfTapsRequired="1" />
</Label.GestureRecognizers>
</Label>