.NET MAUI Span and FormattedString

.NET MAUI, Span and FormattedString

In .NET MAUI, Span and FormattedString are used together within a Label control to display text with multiple styles—such as different colors, fonts, or sizes—within a single string.

Span and FormattedString in .NET MAUI — they’re what you use when you want rich text formatting inside a single Label.

📄 What Are Span & FormattedString?

Span: Represents a segment of text with its own style (font, color, attributes).

FormattedString: A collection of Span objects that together form the text displayed in a Label.

This allows you to mix different styles (bold, italic, colors, sizes) in one label without needing multiple labels.

🔑 Key Features

• Multiple Styles in One Label: Different fonts, colors, and attributes applied to parts of text.
• Inline Formatting: Bold keywords, highlight phrases, or change colors inline.
• Dynamic Binding: Each Span can bind to different properties in your ViewModel.
• Lightweight: No need for multiple labels or complex layouts.

📘 Example Code

Basic FormattedString

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="Hello " FontSize="20" TextColor="Black"/>
            <Span Text="Shivshanker" FontAttributes="Bold" TextColor="DarkRed"/>
            <Span Text=", welcome to MAUI!" FontSize="20" TextColor="DarkBlue"/>
        </FormattedString>
    </Label.FormattedText>
</Label>

👉 Output:

• “Hello” in black, normal font.
• “Shivshanker” in bold, dark red.
• “, welcome to MAUI!” in blue.

Binding Example

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="{Binding FirstName}" FontAttributes="Bold"/>
            <Span Text=" "/>
            <Span Text="{Binding LastName}" TextColor="Gray"/>
        </FormattedString>
    </Label.FormattedText>
</Label>

👉 Useful for showing names with different styles dynamically.

✅ Why Choose Span/FormattedString?

• Rich Text: Highlight or emphasize parts of text.
• Compact UI: Avoid multiple labels for styled text.
• Dynamic Styling: Bind different spans to different data.
• Professional Look: Great for apps needing polished typography.

📌 Common Use Cases

• Highlight Keywords: Bold or color important words in instructions.
• Dynamic Names/Values: Show user names, scores, or statuses with emphasis.
• Inline Styling: Different colors for different parts of a sentence.
• Legal/Disclaimer Texts: Mix normal and emphasized text.
• Chat Apps: Different styles for usernames vs. messages.

⚠️ Considerations

• Only for Labels: Works inside Label, not Entry or Editor.
• No Hyperlinks: For interactive text, use Span.GestureRecognizers (tap gestures).
• Complex Styling: For very advanced text layouts, consider Editor or custom controls.

✨ In short:

Span + FormattedString let you create rich, styled text inside a single Label — perfect for highlighting, mixing styles, and binding dynamic values.

Key Components

FormattedString: A container class that holds a collection of Span objects. It is assigned to the FormattedText property of a Label.

Span: An individual segment of text that carries its own unique styling. By using multiple spans, you can create complex strings like "This is bold and italic" without using multiple Label controls.

Customizable Span Properties

Each Span can be independently styled using properties similar to a standard Label:

• Text: The specific string for that segment.
• TextColor & BackgroundColor: Custom colors for text and its background.
• FontAttributes: Support for Bold, Italic, or both.
• FontFamily & FontSize: Specific font types and sizes for just that segment.
• TextDecorations: Options for Underline and Strikethrough.
• TextTransform: Automatic casing, such as Uppercase or Lowercase.

Interactive Gestures

A significant advantage of using Span is that it supports GestureRecognizers. This allows you to add specific actions—like a TapGestureRecognizer—to just one part of the text, effectively creating inline hyperlinks within a paragraph.

Usage Example (XAML)

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="By clicking, you agree to our " />
            <Span Text="Terms of Service" 
                  TextColor="Blue" 
                  TextDecorations="Underline">
                <Span.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding OpenTermsCommand}" />
                </Span.GestureRecognizers>
            </Span>
        </FormattedString>
    </Label.FormattedText>
</Label>

Use code with caution.

Performance & Limitations

• Performance: Using FormattedString reduces the nesting of UI elements (like putting multiple labels in a HorizontalStackLayout), which can improve memory usage and rendering speed.
• Styling Caveat: Spans do not always inherit certain styles from their parent Label (such as FontFamily) if those styles are applied via global CSS or style classes.
• No HTML: Unlike the main Label.Text property (which can render simple HTML if TextType="Html" is set), Span objects do not support HTML rendering.