Windows Community Toolkit

The MarkdownTextBlock control provides efficient parsing and rendering of Markdown syntax, suitable for use in virtualizing lists. Supported syntax includes:

Font Formatting

• Italics: Surround text with * or _ (e.g., *italic*).
• Bold: Surround text with ** or __ (e.g., **bold**).
• Bold & Italics: Surround text with *** or ___ (e.g., ***bold & italic***).
• Strikethrough: Surround text with ~~ (e.g., ~~strikethrough~~).
• Superscript: Precede text with ^. To include spaces in a superscript, wrap the content in parentheses: ^ (text with spaces).
• Subscript: Use HTML-style tags: <sub>sub</sub>.

Headers

Supports 6 levels of headers using the # prefix:

• # Header 1
• ## Header 2
• ...up to ###### Header 6.

Lists

• Unordered Lists: Use +, -, or * followed by a space.
• Ordered Lists: Use a number followed by a period and a space (e.g., 1. Item). The control automatically handles sequential incrementing regardless of the numbers provided.

Code Blocks

• Inline Code: Surround text with backticks (`).
• Block Code: Start lines with four spaces, or use GitHub-style triple backticks (```). You can specify a language identifier for syntax highlighting (e.g., ```csharp).

Links and Images

• Links: [Text](URL) or [Text](URL "tooltip"). Relative links are supported but must be handled manually in the LinkClicked event.
• Email Links: [Email](email@email.com) or direct email@email.com.
• Images: ![Alt Text](URL). You can specify dimensions using =width, =height, or =widthxheight (e.g., ![Alt](URL =32x64)).

The .bind files use a special @[Property Name:Type:DefaultValue:Options] syntax. This allows the Sample App to generate a property UI for users. When viewing the 'Property' tab, values are bound via {Binding}; when viewing the 'XAML' tab, raw values are shown.

Supported value types:

• String: @[Name:String:Default Value]
• Slider: @[Name:Slider:DefaultValue:Min-Max] (provides a double value)
• DoubleSlider: Same as Slider but with 0.01 precision.
• TimeSpan: @[Name:TimeSpan:DefaultValue:Min-Max] (values in milliseconds).
• Enum: @[Name:Enum:EnumType.DefaultValue]
• Brush: @[Name:Brush:Black] (color picker).
• Bool: @[Name:Bool:True]
• Thickness: @[Name:Thickness:0,20,10,0]

To enable two-way binding for a property in the template, add an extra @ at the end: @[Value:Slider:0:0-180]@.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="48" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="1"
        Foreground="Black"
        Text="@[Text:String:Hey!]"
        FontSize="@[FontSize:Slider:12:10-30]"
        VerticalAlignment="@[Vertical Alignment:Enum:VerticalAlignment.Center]">
    </TextBlock>
</Grid>

The Windows Community Toolkit — UI Controls package depends on the WinUI library. You must declare XamlControlsResources within your Application.Resources in App.xaml to ensure the controls function correctly.

If you have existing application resources, it is recommended to add them to the XamlControlsResources.MergedDictionaries collection. This allows you to use the platform's resource system to override XamlControlsResources while maintaining compatibility.

<Application
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls">
    <Application.Resources>
        <controls:XamlControlsResources>
            <controls:XamlControlsResources.MergedDictionaries>
                <!-- Other app resources here -->
            </controls:XamlControlsResources.MergedDictionaries>
        </controls:XamlControlsResources>
    </Application.Resources>
</Application>