.NET MAUI Preview 13 中建立超連結 UI
阿新 • • 發佈:2022-03-11
在此預覽版中,.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>