Create a Hyperlink UI in .NET MAUI Preview 13 | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Create a Hyperlink UI in .NET MAUI Preview 13

Create a Hyperlink UI in .NET MAUI Preview 13

On Feb. 15, 2022, Microsoft released .NET MAUI Preview 13. In this preview release, .NET MAUI supports formatted text with label control. I enjoyed working with this feature in .NET MAUI apps.

In this blog, let’s see how the formatted text feature helps create labels with a hyperlink UI in .NET MAUI Preview 13 apps.

Formatted Text in Labels

As you know, a label is a view that displays text with or without text wrapping. With the formatted text feature, now in a single label, you can choose multiple options for each setting using different span elements. For example, you can apply separate colors to the words in a single label. This will make the label even more decorative.

The span element supports the following options:

  • CharacterSpacing: Applies spacing between characters to the belonging span of the label.
  • FontAttributes: Applies font attributes to the text in the span of the label.
  • FontFamily: Applies font family to the text in the span of the label.
  • FontSize: Applies the font size to the text in the span.
  • TextColor: Applies color to the text of the span.
  • TextTransform.Lowercase: Transforms all uppercase characters of the text into lowercase.
  • TextTransform.Uppercase: Transforms all lowercase characters of the text into uppercase.
  • TextDecorations.Underline: Underlines the text in the span of the label.
  • TextDecorations.Strikethrough: Strikes through the text in the span of the label.

Refer to the following code example.

<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>
Labels—Formatted Text in .NET MAUI Preview 13
Labels—Formatted Text in .NET MAUI Preview 13

Create a Hyperlink UI Using the Formatted Text Feature of Labels

I am going to use two options, TextColor and TextDecorations.Underline, to create a label with a hyperlink UI.

Create reusable hyperlink class

I have created a class named HyperlinkUI that is derived from span, where I have added a bindable property named LinkUrl.

Since span inherits the GestureElement, you can add the Gesture Recognizer to navigate using the LinkUrl property.

Refer to the following code example.

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()
   {
      //... Since Span inherits GestureElement, you can add Gesture Recognizer to navigate using LinkUrl
   }
}

Now, you can use this HyperlinkUI as a span element in the labels. We can show the whole text or part of the text as hyperlink text.

Refer to the following code example.

<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>
Label with Hyperlink UI in .NET MAUI Preview 13
Label with Hyperlink UI in .NET MAUI Preview 13

Syncfusion .NET MAUI Controls Are Compatible with .NET MAUI Preview 13

Syncfusion .NET MAUI controls are compatible with .NET MAUI Preview 13. You can install our control package (latest version: 19.4.53-preview) from NuGet Gallery and use it in your application.

Currently, Syncfusion offers nine controls: Cartesian ChartsCircular Charts, Scheduler, ListView, Tab View, Radial Gauge, Slider, Range Slider, Badge View, and Effects View. The suite also supports file-format libraries for Excel, PDF, Word, and PowerPoint files.

Check out our .NET MAUI controls road map for plans for our upcoming 2022 Volume 1 release and find more on our controls in their documentation.

GitHub reference

For more details, refer to the example for Creating a Hyperlink UI in .NET MAUI Preview 13.

Conclusion

I hope you enjoyed this blog and thanks for reading! For more details, refer to the article, .NET MAUI Preview 13. Also, check out the .NET MAUI Preview 13 release notes.

As I said, our Syncfusion .NET MAUI controls are compatible with the Preview 13 version, so you can easily use them in your app.

If you have any feedback, special requirements, or controls that you’d like to see in our .NET MAUI suite, please let us know in the comments section below.

Also, you can contact us through our support forumsupport portal, or feedback portal. We are always happy to assist you!

Test Flight
App Center Badge
Google Play Store Badge
Microsoft Badge
Github Store Badge

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed
Scroll To Top