Please star this project if you find it useful. Thank you!
Wouldn't it be cool if the Xamarin Label control supported Markdown?
And how cool would it be if it was possible to include bindable properties inside a Markdown text like this:
There are {{1}} apples in the basket.
Where {{1}}
represent a variable place-holder for the value of a bindable property.
Well, these are all scenarios introduced by this very light weigth plugin which extends the existing Xamarin Forms Label control.
I hope others will find it useful too.
The plugin works on all platforms supported by Xamarin Forms and .NET Standard 2.0.
Markdown supported:
Note: The emoji's supported depend on the font used as far as I can tell. Emoji Cheat Sheet
Other features:
IsParagraphSpacing="false"
.The easied way to introduce the features introduced by this plugin is by looking at a simple example:
This screenshot above is generated using the XAML below. As you read through the XAML please notice the following:
<space><space>\n
.\r\n
.TargetType = "Span"
. These three styles is here used to specifically set the styles of each of the headings.Variable1
and Variable3
are used in the Markdown string. These are just two of the total of six Bindable Properties that can be utilized. By adding the placeholders {{1}}
... {{6}}
in the Markdown text, each placeholder will be replaced by the value of the bindable property at run time. The bindable property is name Variable1
... Variable6
accordingly.UrlLinkColor
specifies the color of a hyper link. Default is Blue.<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:markDown="clr-namespace:Plugin.Label.MarkDown;assembly=Plugin.Label.MarkDown"
mc:Ignorable="d"
x:Name="This"
x:Class="Sample.LabelMarkdown.MainPage">
<ContentPage.Resources>
<ResourceDictionary>
<Style TargetType="Span" x:Key="Header1SpanStyle">
<Setter Property="FontSize" Value="32"></Setter>
<Setter Property="ForegroundColor" Value="Purple"></Setter>
</Style>
<Style TargetType="Span" x:Key="Header2SpanStyle">
<Setter Property="FontSize" Value="16"></Setter>
<Setter Property="FontAttributes" Value="Italic"></Setter>
</Style>
<Style TargetType="Span" x:Key="Header3SpanStyle">
<Setter Property="FontSize" Value="12"></Setter>
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout>
<markDown:LabelMd x:Name="LabelMarkdownTest1"
UrlLinkColor="Purple"
Variable1="Var1"
Variable3="Var3"
TextMarkdown="#Header A 
##Header B 
###Header C _with italic_ 
First Line with some _italic text_. 
New Line with Variable 1 in bold: **{{1}}** 
New line with variable 3: {{3}} 
[Link to Google](https://www.google.com) 
"
Header1Style="{DynamicResource Header1SpanStyle}"
Header2Style="{DynamicResource Header2SpanStyle}"
Header3Style="{DynamicResource Header3SpanStyle}"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
</markDown:LabelMd>
<markDown:LabelMd x:Name="Emoji"
TextMarkdown="You rock! :thumbsup:"
LineHeight="2"
HorizontalOptions="Center"
VerticalOptions="Start"></markDown:LabelMd>
</StackLayout>
</ContentPage>