3

I have below xaml code -

<Page
x:Class="MyProject1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
mc:Ignorable="d" Background="Black">
<Grid Background="White" Name="mainGrid">

    <Border  BorderBrush="Cyan" BorderThickness="0.2" Margin="3,0,3,3">
        <ListView x:Name="ListView" VerticalAlignment="Bottom" SelectionMode="None" IsItemClickEnabled="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <controls:MarkdownTextBlock Name="markdownBlock" Text="{Binding Text}" TextWrapping="Wrap" FontFamily="Segoe-UI">
                    </controls:MarkdownTextBlock>
                </DataTemplate>
            </ListView.ItemTemplate>
            <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="FontSize" Value="14" />
                    <Setter Property="Foreground" Value="Black" />
                </Style>
            </ListView.ItemContainerStyle>
        </ListView>
    </Border>
</Grid>
</Page>

I am trying to display below markdown text on windows universal application (windows 10 app).

Here is the text in markdown-

Sample Text that is represented in markdown. \n\n Please click here for more details. \n\n\n ![SQL2016]/(http://windowsitpro.com/site-files/windowsitpro.com/files/imagecache/large_img/uploads/2015/05/sql2016.jpg)/

In my windows universal application, below MarkdownTextBlock control renders only text and hyperlink but not the image :(

It is rendered as this -

enter image description here

However, the same markdown is rendered in browser fully -

enter image description here

I spent quite a lot of time on this.. but couldnt figure out the reason.. is this image rendering not possible with markdowntextblock? Not sure how the performance would be if I use webbrowser here.. What am I missing in my XAML?

Satheesh Panduga
  • 818
  • 2
  • 13
  • 32

1 Answers1

4

Yes it's not your fault. The current version (1.3.1) of the UWP Community Toolkit doesn't support images for the MarkdownTextBlock at the moment.

But the guys are working on it as we can see: https://github.com/Microsoft/UWPCommunityToolkit/issues/916 https://github.com/Microsoft/UWPCommunityToolkit/pull/958

Even they are ready with this we are only waiting the version 1.4 release date which is April 5, 2017.

If you can't wait you can build the toolkit from source and use it in your project.

Tóth Tibor
  • 1,526
  • 12
  • 21
  • Thanks a lot @tóth-tibor for the information. I see the code for rendering image is in this file https://github.com/Microsoft/UWPCommunityToolkit/blob/dev/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Display/XamlRenderer.cs Could you please guide me how can I use this to render image in markdowntextblock in my win universal application ? I am not sure if I use this along with the text rendering and text wrapping property. – Satheesh Panduga Mar 19 '17 at 06:22
  • I you can't wait you need to get all these files from this [folder](https://github.com/Microsoft/UWPCommunityToolkit/tree/dev/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock) and place them in a separate namespace. After that use this control like the originial one with the namespace fixes in the xaml. But don't forget to use the official one after relese. – Tóth Tibor Mar 19 '17 at 10:18