Create a Hyperlink UI in .NET MAUI Preview 13
Tags: csharp, dotnet, maui, mobile
Published: 2022-02-25 12:39:44

---
title: Create a Hyperlink UI in .NET MAUI Preview 13
published: true
date: 2022-02-25 11:51:30 UTC
tags: csharp, dotnet, maui, mobile
canonical_url: https://www.syncfusion.com/blogs/post/create-a-hyperlink-ui-in-net-maui-preview-13.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Create-a-Hyperlink-UI-in-.NET-MAUI-Preview-13-672x372.png
---

On Feb. 15, 2022, [Microsoft released .NET MAUI Preview 13](https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-13/ "Announcing .NET MAUI Preview 13 blog"). 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.

**Note: ** Syncfusion is releasing .NET MAUI Preview updates for its controls in the middle of every month.

## 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.

```html
<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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Labels%E2%80%94Formatted-Text-in-.NET-MAUI-Preview-13.png)
<figcaption>Labels—Formatted Text in .NET MAUI Preview 13</figcaption>

## 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.

```csharp
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.

```html
<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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/02/Label-with-Hyperlink-UI-in-.NET-MAUI-Preview-13-1.png)
<figcaption>Label with Hyperlink UI in .NET MAUI Preview 13</figcaption>

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

Syncfusion [.NET MAUI controls](https://www.syncfusion.com/maui-controls ".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](https://www.nuget.org/packages?q=Syncfusion.maui "Syncfusion .NET MAUI controls in NuGet Gallery") and use it in your application.

Currently, Syncfusion offers nine controls: [Cartesian Charts](https://help.syncfusion.com/maui/cartesian-charts/getting-started ".NET MAUI Cartesian Charts documentation"), [Circular Charts](https://help.syncfusion.com/maui/circular-charts/getting-started ".NET MAUI Circular Charts documentation"), [Scheduler](https://www.syncfusion.com/maui-controls/maui-scheduler ".NET MAUI Scheduler"), [ListView](https://www.syncfusion.com/maui-controls/maui-listview ".NET MAUI ListView"), [Tab View](https://www.syncfusion.com/maui-controls/maui-tab-view ".NET MAUI Tab View"), [Radial Gauge](https://www.syncfusion.com/maui-controls/maui-radial-gauge ".NET MAUI Radial Gauge"), [Slider](https://www.syncfusion.com/maui-controls/maui-slider ".NET MAUI Slider"), [Range Slider](https://www.syncfusion.com/maui-controls/maui-range-slider ".NET MAUI Range Slider"), [Badge View](https://www.syncfusion.com/maui-controls/maui-badge-view ".NET MAUI Badge View"), and [Effects View](https://www.syncfusion.com/maui-controls/maui-effects-view ".NET MAUI Effects View"). The suite also supports file-format libraries for [Excel](https://www.syncfusion.com/excel-framework/maui/excel-library ".NET MAUI Excel Library"), [PDF](https://www.syncfusion.com/pdf-framework/maui/pdf-library ".NET MAUI PDF Library"), [Word](https://www.syncfusion.com/word-framework/maui/word-library ".NET MAUI Word Library"), and [PowerPoint](https://www.syncfusion.com/powerpoint-framework/maui/powerpoint-library ".NET MAUI PowerPoint Library") files.

Check out our [.NET MAUI controls road map](https://www.syncfusion.com/products/roadmap/maui-controls "Road Map for Essential Studio 2022 Volume 1 for .NET MAUI") for plans for our upcoming 2022 Volume 1 release and find more on our controls in their [documentation](https://help.syncfusion.com/maui/introduction/overview "Syncfusion .NET MAUI controls documentation").

## GitHub reference

For more details, refer to the [example for Creating a Hyperlink UI in .NET MAUI Preview 13](https://github.com/SyncfusionExamples/maui-general-samples/tree/main/FormattedText "Creating Hyperlink UI in .NET MAUI GitHub demo").

## Conclusion

I hope you enjoyed this blog and thanks for reading! For more details, refer to the article, [.NET MAUI Preview 13](https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-13/ "Announcing .NET MAUI Preview 13 blog"). Also, check out the [.NET MAUI Preview 13 release notes](https://github.com/dotnet/maui/releases/tag/6.0.200-preview.13.2 ".NET MAUI Preview 13 release notes on GitHub").

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 forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/xamarin-forms "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Reuse Xamarin.Forms Custom Renderers in .NET MAUI](https://www.syncfusion.com/blogs/post/how-to-reuse-xamarin-forms-custom-renderers-in-net-maui.aspx "How to Reuse Xamarin.Forms Custom Renderers in .NET MAUI blog")
- [5 Advantages of .NET MAUI Over Xamarin](https://www.syncfusion.com/blogs/post/advantages-net-maui-over-xamarin.aspx "5 Advantages of .NET MAUI Over Xamarin blog")
- [Learn How to Use Dependency Injection in .NET MAUI](https://www.syncfusion.com/blogs/post/learn-how-to-use-dependency-injection-in-net-maui.aspx "Learn How to Use Dependency Injection in .NET MAUI blog")
- [Create Your First .NET MAUI App with Microsoft MVP Codrina Merigo [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/create-your-first-net-maui-app-with-microsoft-mvp-codrina-merigo-webinar-show-notes.aspx "Create Your First .NET MAUI App with Microsoft MVP Codrina Merigo [Webinar Show Notes]")