1. 程式人生 > 其它 >.NET MAUI Preview 13 中建立超連結 UI

.NET MAUI Preview 13 中建立超連結 UI

在此預覽版中,.NET MAUI 支援帶標籤控制元件的格式化文字。

標籤中的格式化文字

標籤是顯示帶或不帶文字環繞的文字的檢視。使用格式化文字功能(現在位於單個標籤中),您可以使用不同的 span 元素為每個設定選擇多個選項。
例如,您可以對單個標籤中的單詞應用單獨的顏色。這將使標籤更具裝飾性。
Span 元素支援以下選項:

  • CharacterSpacing
  • FontAttributes
  • FontFamily
  • FontSize
  • TextColor
  • TextTransform.Lowercase
  • TextTransform.Uppercase
  • TextDecorations.Underline
  • TextDecorations.Strikethrough
<Label Margin="10" LineHeight="2">
 <Label.FormattedText>
  <FormattedString>
   <Span Text=".NET MAUI Label with Text Formatting in Preview 13 " FontSize="20" />
   <Span Text="Character Spacing - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" CharacterSpacing="12" />
   <Span Text="Font Attributes - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" FontAttributes="Bold"/>
   <Span Text="Font Size - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="18"/>
   <Span Text="Font Family - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" FontFamily="Matura MT Script Capitals" />
   <Span Text="Text Color - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" TextColor="Red"/>
   <Span Text="Lowercase - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" TextTransform="Lowercase"/>
   <Span Text="Uppercase - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" TextTransform="Uppercase" />
   <Span Text="Strikethrough - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" TextDecorations="Strikethrough"/>
   <Span Text="Underline - " FontSize="14" TextColor="Black"/>
   <Span Text=" Hello World! " FontSize="14" TextDecorations="Underline" />
  </FormattedString>
 </Label.FormattedText>
</Label>

使用標籤的格式化文字功能建立超連結 UI

我將使用兩個選項,TextColor和TextDecorations.Undercomings.Undercoming,建立一個具有超連結UI的標籤。

建立可重用超連結類

建立了一個名為 HyperlinkUI 的類,該類派生自 span,並在其中添加了一個名為 LinkUrl 的可繫結屬性。
由於 span 繼承了 GestureElement,因此您可以新增 Gesture 識別器以使用 LinkUrl 屬性進行導航。
請參閱下面的程式碼示例。

public class HyperlinkUI : Span
{
  public static readonly BindableProperty LinkUrlProperty =
   BindableProperty.Create(nameof(LinkUrl), typeof(string), typeof(HyperlinkUI), null);
  
  public string LinkUrl
  {
    get
    {
      return (string)GetValue(LinkUrlProperty);
    }
    set
    {
      SetValue(LinkUrlProperty, value);
    }
  }

   public HyperlinkUI()
   {
      ApplyHyperlinkAppearance();
   }

   void ApplyHyperlinkAppearance()
   {
      this.TextColor = Color.FromArgb("#0000EE");
      this.TextDecorations = TextDecorations.Underline;
   }

   void CreateNavgigationCommand()
   {
      // 由於 Span 繼承了 GestureElement,因此您可以新增 Gesture Recognizer 以使用 LinkUrl 進行導航
   }
}

現在,您可以將此超連結UI用作標籤中的跨度元素。我們可以將整個文字或部分文字顯示為超連結文字。請參閱下面的程式碼示例。

<Label Margin="10" LineHeight="2" InputTransparent="False" TextColor="Black">
 <Label.FormattedText>
  <FormattedString>
   <Span Text="Click "/>
   <local:HyperlinkUI Text="here" LinkUrl="https://docs.microsoft.com/xamarin/"/>
   <Span Text=" to learn more about Syncfusion .NET MAUI Controls."/>
  </FormattedString>
 </Label.FormattedText>
</Label>