.Net MAUI 如何在 Label 中包含链接

Question

Using Visual Studio Community edition 2022.

New to.Net MAUI and am trying to follow the examples provided in the documentation found at https://docs.microsoft.com/en-us/dotnet/maui/user-interface/controls/label

The XAML code below (from the docs) is used to create a "link" using a tap recognizer:

     <Label>
        <Label.FormattedText>
           <FormattedString>
              <Span 
                 Text="Link: " 
              />
              <Span 
                 Text="click here to open the docs"
                 TextColor="Blue"
                 TextDecorations="Underline">
                 <Span.GestureRecognizers>
                    <TapGestureRecognizer
                       Command="{Binding OpenUrlCommand}"
                       CommandParameter="https://docs.microsoft.com/dotnet/maui/" 
                    />
                 </Span.GestureRecognizers>
              </Span>
           </FormattedString>
        </Label.FormattedText>
     </Label>

However, the command (OpenUrlCommand) is never called - tested using the Windows and Andriod emulators.

In my ViewModel, I define the OpenUrlCommand as follows:

public ICommand OpenUrlCommand => new Command<string>( async ( url ) => await Launcher.OpenAsync( url ) );

... but nothing works, I also tried the following -- no go...

public ICommand OpenUrlCommand => new Command<string>( async ( url ) => await Browser.OpenAsync( url ) );

... and then tried the following -- again, no luck...

public IRelayCommand OpenUrlCommand => new RelayCommand<string>( async ( url ) => await Launcher.OpenAsync( url ) );

I then replaced the call to open the url with a Debug.WriteLine( url ), and it seems that the OpenUrlCommand is never being called. Also, one would expect the cursor to change when hovering over the "link" text, but it never does -- it is as though the TapGesterRecognizer is not being created or registered.

As a last ditch effort, I also tried the following (again, copying from the docs):

<Label TextType="Html">
    <![CDATA[
       This is <a href="https://docs.microsoft.com/dotnet/maui/" target="_blank">a link to another site</a>.
    ]]>
 </Label>

... no luck -- the link appears underlined, but when clicked on, nothing happens (cursor does not change, browser does not open).

Any advice, or even better, a working example would be appreciated.

UPDATE: Found this post as well: https://github.com/dotnet/maui/issues/4734 - which looks like this was a known bug back in February!

As per @Jessie Zhang -MSFT, I ended up doing the following - which underlines the link, but with the caveat that the WHOLE label is tapable...

     <!-- 
     
     This works - HOWEVER, the WHOLE label is tappable.  We cannot use
     Span.GestureRecognizers because of the following issue:
     
     https://github.com/dotnet/maui/issues/4734
     
     -->

     <Label>
        <Label.GestureRecognizers>
           <TapGestureRecognizer 
              Command="{Binding OpenUrlCommand}"
              CommandParameter="https://docs.microsoft.com/en-us/dotnet/maui/" 
           />
        </Label.GestureRecognizers>
        <Label.FormattedText>
           <FormattedString>
              <Span 
                 Text="To learn more, " 
              />
              <Span 
                 Text="check the documentation"
                 TextColor="Blue"
                 TextDecorations="Underline">
              </Span>
              <Span 
                 Text="." 
              />
           </FormattedString>
        </Label.FormattedText>
     </Label>

... and in my ViewModel:

  public IRelayCommand OpenUrlCommand => new RelayCommand<String>( launch_browser );


  private async void launch_browser( String url )
  {

     Debug.WriteLine( $"*** Tap: {url}" );

     await Browser.OpenAsync( url );

  }

... the above works (for me) in the Windows and Andriod simulators.

Answer 1

Yes, it is a known issue about this problem.

You can follow it here: https://github.com/dotnet/maui/issues/4734 .

But as a workaround, you can use Label.GestureRecognizers instead of Span.GestureRecognizers .

For example:

       <Label 
        Text="click here"
        VerticalOptions="Center" 
        HorizontalOptions="Center" >

        <Label.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding TapCommand}"
                                      CommandParameter="https://docs.microsoft.com/dotnet/maui/" />
        </Label.GestureRecognizers>

    </Label>