From fe73ea5c6295d6e024ab41eec125e1f2115707bb Mon Sep 17 00:00:00 2001 From: Vijay-Nirmal Date: Sat, 14 Apr 2018 21:34:17 +0530 Subject: [PATCH 1/4] Initial commit --- .../MarkdownTextBlock.Dimensions.cs | 36 +++++++++++++++++++ .../MarkdownTextBlock.Methods.cs | 2 ++ .../Render/MarkdownRenderer.Dimensions.cs | 10 ++++++ .../Render/MarkdownRenderer.Inlines.cs | 35 +++++++++++++++++- 4 files changed, 82 insertions(+), 1 deletion(-) diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.Dimensions.cs b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.Dimensions.cs index ecb114864a7..d6378e9aff8 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.Dimensions.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.Dimensions.cs @@ -301,6 +301,42 @@ public partial class MarkdownTextBlock typeof(MarkdownTextBlock), new PropertyMetadata(null, OnPropertyChangedStatic)); + /// + /// Gets the dependency property for + /// + public static readonly DependencyProperty ImageMaxHeightProperty = DependencyProperty.Register( + nameof(ImageMaxHeight), + typeof(double), + typeof(MarkdownTextBlock), + new PropertyMetadata(0.0, OnPropertyChangedStatic)); + + /// + /// Gets the dependency property for + /// + public static readonly DependencyProperty ImageMaxWidthProperty = DependencyProperty.Register( + nameof(ImageMaxWidth), + typeof(double), + typeof(MarkdownTextBlock), + new PropertyMetadata(0.0, OnPropertyChangedStatic)); + + /// + /// Gets or sets the MaxWidth for images. + /// + public double ImageMaxWidth + { + get { return (double)GetValue(ImageMaxWidthProperty); } + set { SetValue(ImageMaxWidthProperty, value); } + } + + /// + /// Gets or sets the MaxHeight for images. + /// + public double ImageMaxHeight + { + get { return (double)GetValue(ImageMaxHeightProperty); } + set { SetValue(ImageMaxHeightProperty, value); } + } + /// /// Gets or sets the stretch used for images. /// diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.Methods.cs b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.Methods.cs index 84d2701ef82..8a1d179675a 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.Methods.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.Methods.cs @@ -146,6 +146,8 @@ private void RenderMarkdown() renderer.TextWrapping = TextWrapping; renderer.LinkForeground = LinkForeground; renderer.ImageStretch = ImageStretch; + renderer.ImageMaxHeight = ImageMaxHeight; + renderer.ImageMaxWidth = ImageMaxWidth; renderer.WrapCodeBlock = WrapCodeBlock; _rootElement.Child = renderer.Render(); diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Dimensions.cs b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Dimensions.cs index 13cff43e01e..654600d66c3 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Dimensions.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Dimensions.cs @@ -201,6 +201,16 @@ public partial class MarkdownRenderer /// public Stretch ImageStretch { get; set; } + /// + /// Gets or sets the MaxHeight for images. + /// + public double ImageMaxHeight { get; set; } + + /// + /// Gets or sets the MaxWidth for images. + /// + public double ImageMaxWidth { get; set; } + /// /// Gets or sets a value indicating whether to wrap text in the Code Block, or use Horizontal Scroll. /// diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs index e93cacbf115..3d9ba9b5365 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs @@ -250,7 +250,13 @@ protected override async void RenderImage(ImageInline element, IRenderContext co } var image = new Image(); - var imageContainer = new InlineUIContainer() { Child = image }; + var scrollViewer = new ScrollViewer(); + scrollViewer.Content = image; + scrollViewer.HorizontalScrollMode = ScrollMode.Auto; + scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto; + scrollViewer.VerticalScrollMode = ScrollMode.Disabled; + scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled; + var imageContainer = new InlineUIContainer() { Child = scrollViewer }; LinkRegister.RegisterNewHyperLink(image, element.Url); @@ -259,6 +265,33 @@ protected override async void RenderImage(ImageInline element, IRenderContext co image.VerticalAlignment = VerticalAlignment.Top; image.Stretch = ImageStretch; + var actualHeight = default(double); + var actualWidth = default(double); + + if (resolvedImage is Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage) + { + bitmapImage.ImageOpened += (s, e) => + { + actualHeight = bitmapImage.PixelHeight; + actualWidth = bitmapImage.PixelWidth; + + if (ImageMaxHeight < actualHeight || ImageMaxWidth < actualWidth) + { + image.Stretch = Stretch.UniformToFill; + } + }; + } + + if (ImageMaxHeight > 0) + { + image.MaxHeight = ImageMaxHeight; + } + + if (ImageMaxWidth > 0) + { + image.MaxWidth = ImageMaxWidth; + } + if (element.ImageWidth > 0) { image.Width = element.ImageWidth; From 02c7ee09e2872f59c4c0781b20b1461bc8d543e9 Mon Sep 17 00:00:00 2001 From: Vijay-Nirmal Date: Sun, 15 Apr 2018 15:21:49 +0530 Subject: [PATCH 2/4] Resize image when overflow --- Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml | 3 +- .../Render/MarkdownRenderer.Inlines.cs | 47 ++++++++++++++----- 2 files changed, 37 insertions(+), 13 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml b/Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml index 021759759e6..a503211617c 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml +++ b/Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml @@ -203,7 +203,8 @@ Foreground="{StaticResource Brush-Grey-01}" ImageResolving="DocumentationTextblock_ImageResolving" LinkClicked="DocumentationTextblock_OnLinkClicked" - IsFocusEngagementEnabled="False" /> + IsFocusEngagementEnabled="False" + ImageMaxWidth="500" /> diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs index 3d9ba9b5365..6314ba05c7d 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs @@ -21,6 +21,7 @@ using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Documents; using Windows.UI.Xaml.Media; +using Windows.UI.Xaml.Media.Imaging; namespace Microsoft.Toolkit.Uwp.UI.Controls.Markdown.Render { @@ -252,10 +253,6 @@ protected override async void RenderImage(ImageInline element, IRenderContext co var image = new Image(); var scrollViewer = new ScrollViewer(); scrollViewer.Content = image; - scrollViewer.HorizontalScrollMode = ScrollMode.Auto; - scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto; - scrollViewer.VerticalScrollMode = ScrollMode.Disabled; - scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled; var imageContainer = new InlineUIContainer() { Child = scrollViewer }; LinkRegister.RegisterNewHyperLink(image, element.Url); @@ -264,20 +261,32 @@ protected override async void RenderImage(ImageInline element, IRenderContext co image.HorizontalAlignment = HorizontalAlignment.Left; image.VerticalAlignment = VerticalAlignment.Top; image.Stretch = ImageStretch; + scrollViewer.VerticalScrollMode = ScrollMode.Disabled; + scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled; - var actualHeight = default(double); - var actualWidth = default(double); - - if (resolvedImage is Windows.UI.Xaml.Media.Imaging.BitmapImage bitmapImage) + // To find actual image size + if (resolvedImage is BitmapImage bitmapImage) { bitmapImage.ImageOpened += (s, e) => { - actualHeight = bitmapImage.PixelHeight; - actualWidth = bitmapImage.PixelWidth; + var actualHeight = bitmapImage.PixelHeight; + var actualWidth = bitmapImage.PixelWidth; + + if (element.ImageHeight == 0 && element.ImageWidth == 0) + { + // To resize image when it become smaller than the max size + if ((ImageMaxHeight > 0 && ImageMaxHeight < actualHeight) || (ImageMaxWidth > 0 && ImageMaxWidth < actualWidth)) + { + image.Stretch = Stretch.Uniform; + } + } - if (ImageMaxHeight < actualHeight || ImageMaxWidth < actualWidth) + // To resize image when it overflow + if (image.Stretch == Stretch.None) { - image.Stretch = Stretch.UniformToFill; + image.MaxHeight = actualHeight; + image.MaxWidth = actualWidth; + image.Stretch = Stretch.Uniform; } }; } @@ -314,6 +323,20 @@ protected override async void RenderImage(ImageInline element, IRenderContext co image.Stretch = Stretch.Fill; } + // If image size is given then scroll to view overflown part + if (element.ImageHeight > 0 || element.ImageWidth > 0) + { + scrollViewer.HorizontalScrollMode = ScrollMode.Auto; + scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Auto; + } + + // Else resize the image + else + { + scrollViewer.HorizontalScrollMode = ScrollMode.Disabled; + scrollViewer.HorizontalScrollBarVisibility = ScrollBarVisibility.Disabled; + } + ToolTipService.SetToolTip(image, element.Tooltip); // Try to add it to the current inlines From e69227d6599952f279a6e2be3475d405d17260d6 Mon Sep 17 00:00:00 2001 From: Vijay-Nirmal Date: Tue, 17 Apr 2018 18:55:25 +0530 Subject: [PATCH 3/4] Using ViewBox to resize --- Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml | 3 +- .../Render/MarkdownRenderer.Inlines.cs | 36 ++++--------------- 2 files changed, 8 insertions(+), 31 deletions(-) diff --git a/Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml b/Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml index a503211617c..1179931e5ba 100644 --- a/Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml +++ b/Microsoft.Toolkit.Uwp.SampleApp/Shell.xaml @@ -204,7 +204,8 @@ ImageResolving="DocumentationTextblock_ImageResolving" LinkClicked="DocumentationTextblock_OnLinkClicked" IsFocusEngagementEnabled="False" - ImageMaxWidth="500" /> + ImageMaxWidth="500" + ImageMaxHeight="500"/> diff --git a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs index 6314ba05c7d..c0ed84566ff 100644 --- a/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs +++ b/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render/MarkdownRenderer.Inlines.cs @@ -252,7 +252,9 @@ protected override async void RenderImage(ImageInline element, IRenderContext co var image = new Image(); var scrollViewer = new ScrollViewer(); - scrollViewer.Content = image; + var viewbox = new Viewbox(); + scrollViewer.Content = viewbox; + viewbox.Child = image; var imageContainer = new InlineUIContainer() { Child = scrollViewer }; LinkRegister.RegisterNewHyperLink(image, element.Url); @@ -263,42 +265,16 @@ protected override async void RenderImage(ImageInline element, IRenderContext co image.Stretch = ImageStretch; scrollViewer.VerticalScrollMode = ScrollMode.Disabled; scrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Disabled; - - // To find actual image size - if (resolvedImage is BitmapImage bitmapImage) - { - bitmapImage.ImageOpened += (s, e) => - { - var actualHeight = bitmapImage.PixelHeight; - var actualWidth = bitmapImage.PixelWidth; - - if (element.ImageHeight == 0 && element.ImageWidth == 0) - { - // To resize image when it become smaller than the max size - if ((ImageMaxHeight > 0 && ImageMaxHeight < actualHeight) || (ImageMaxWidth > 0 && ImageMaxWidth < actualWidth)) - { - image.Stretch = Stretch.Uniform; - } - } - - // To resize image when it overflow - if (image.Stretch == Stretch.None) - { - image.MaxHeight = actualHeight; - image.MaxWidth = actualWidth; - image.Stretch = Stretch.Uniform; - } - }; - } + viewbox.StretchDirection = StretchDirection.DownOnly; if (ImageMaxHeight > 0) { - image.MaxHeight = ImageMaxHeight; + viewbox.MaxHeight = ImageMaxHeight; } if (ImageMaxWidth > 0) { - image.MaxWidth = ImageMaxWidth; + viewbox.MaxWidth = ImageMaxWidth; } if (element.ImageWidth > 0) From 29aee31d08cca6bd5ff039322dda667d936652f0 Mon Sep 17 00:00:00 2001 From: Vijay-Nirmal Date: Tue, 17 Apr 2018 18:55:40 +0530 Subject: [PATCH 4/4] Updated doc --- docs/controls/MarkdownTextBlock.md | 147 +++++++++++++++++------------ 1 file changed, 88 insertions(+), 59 deletions(-) diff --git a/docs/controls/MarkdownTextBlock.md b/docs/controls/MarkdownTextBlock.md index f09bd58f803..245b157b7d1 100644 --- a/docs/controls/MarkdownTextBlock.md +++ b/docs/controls/MarkdownTextBlock.md @@ -7,7 +7,7 @@ keywords: windows 10, uwp, uwp community toolkit, uwp toolkit, MarkdownTextBlock # MarkdownTextBlock XAML Control -The *MarkdownTextBlock control* provides full markdown parsing and rendering for Universal Windows Apps. Originally created for the open source reddit app Baconit, the control was engineered to be simple to use and very efficient. One of the main design considerations for the control was it needed to be performant enough to provide a great user experience in virtualized lists. With the custom markdown parser and efficient XAML rendering, we were able to achieve excellent performance; providing a smooth UI experience even with complex Markdown on low end hardware. +The [MarkdownTextBlock control](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.markdowntextblock) provides full markdown parsing and rendering for Universal Windows Apps. Originally created for the open source reddit app Baconit, the control was engineered to be simple to use and very efficient. One of the main design considerations for the control was it needed to be performant enough to provide a great user experience in virtualized lists. With the custom markdown parser and efficient XAML rendering, we were able to achieve excellent performance; providing a smooth UI experience even with complex Markdown on low end hardware. Under the hood, the control uses XAML sub elements to build the visual rendering tree for the Markdown input. We chose to use full XAML elements over using the RichEditTextBlock control because the RichEditTextBlock isn’t flexible enough to correctly render all of the standard Markdown styles. @@ -30,7 +30,8 @@ Here are some limitations you may encounter: - All images are stretched with the same stretch value (defined by ImageStretch property) - Relative Links & Relative Images needs to be handled manually using `LinkClicked` event. -## Example Image +## Sample Output + Note: scrolling is smooth, the gif below is not. ![MarkdownTextBlock animation](../resources/images/Controls-MarkdownTextBlock.gif "MarkdownTextBlock") @@ -39,61 +40,85 @@ Note: scrolling is smooth, the gif below is not. The MarkdownTextBlock control is highly customizable to blend with any theme. Customizable properties include: -* IsTextSelectionEnabled -* UseSyntaxHighlighting -* CodeStyling -* CodeBackground -* CodeBorderBrush -* CodeBorderThickness -* CodeForeground -* CodeFontFamily -* CodeMargin -* CodePadding -* InlineCodeBorderThickness -* InlineCodeBackground -* InlineCodeBorderBrush -* InlineCodePadding -* InlineCodeFontFamily -* Header1FontWeight -* Header1FontSize -* Header1Margin -* Header2FontWeight -* Header2FontSize -* Header2Margin -* Header3FontWeight -* Header3FontSize -* Header3Margin -* Header4FontWeight -* Header4FontSize -* Header4Margin -* Header5FontWeight -* Header5FontSize -* Header5Margin -* Header6FontWeight -* Header6FontSize -* Header6Margin -* HorizontalRuleBrush -* HorizontalRuleMargin -* HorizontalRuleThickness -* ListMargin -* ListGutterWidth -* ListBulletSpacing -* ParagraphMargin -* QuoteBackground -* QuoteBorderBrush -* QuoteBorderThickness -* QuoteForeground -* QuoteMargin -* QuotePadding -* TableBorderBrush -* TableBorderThickness -* TableCellPadding -* TableMargin -* TextWrapping -* WrapCodeBlock +| Property | Type | Description | +| -- | -- | -- | +| CodeBackground | Brush | Gets or sets the brush used to fill the background of a code block | +| CodeBorderBrush | Brush | Gets or sets the brush used to render the border fill of a code block | +| CodeBorderThickness | Thickness | Gets or sets the thickness of the border around code blocks | +| CodeFontFamily | FontFamily | Gets or sets the font used to display code. If this is `null`, then Windows.UI.Xaml.Media.FontFamily is used | +| CodeForeground | Brush | Gets or sets the brush used to render the text inside a code block. If this is `null`, then Foreground is used | +| CodeMargin | Thickness | Gets or sets the space between the code border and the text | +| CodePadding | Thickness | Gets or sets space between the code border and the text | +| CodeStyling | StyleDictionary | Gets or sets the Default Code Styling for Code Blocks | +| EmojiFontFamily | FontFamily | Gets or sets the font used to display emojis. If this is `null`, then Segoe UI Emoji font is used | +| Header1FontSize | double | Gets or sets the font size for level 1 headers | +| Header1FontWeight | FontWeight | Gets or sets the font weight to use for level 1 headers | +| Header1Foreground | Brush | Gets or sets the foreground brush for level 1 headers | +| Header1Margin | Thickness | Gets or sets the margin for level 1 headers | +| Header2FontSize | double | Gets or sets the font size for level 2 headers | +| Header2FontWeight | FontWeight | Gets or sets the font weight to use for level 2 headers | +| Header2Foreground | Brush | Gets or sets the foreground brush for level 2 headers | +| Header2Margin | Thickness | Gets or sets the margin for level 2 headers | +| Header3FontSize | double | Gets or sets the font size for level 3 headers | +| Header3FontWeight | FontWeight | Gets or sets the font weight to use for level 3 headers | +| Header3Foreground | Brush | Gets or sets the foreground brush for level 3 headers | +| Header3Margin | Thickness | Gets or sets the margin for level 3 headers | +| Header4FontSize | double | Gets or sets the font size for level 4 headers | +| Header4FontWeight | FontWeight | Gets or sets the font weight to use for level 4 headers | +| Header4Foreground | Brush | Gets or sets the foreground brush for level 4 headers | +| Header4Margin | Thickness | Gets or sets the margin for level 4 headers | +| Header5FontSize | double | Gets or sets the font size for level 5 headers | +| Header5FontWeight | FontWeight | Gets or sets the font weight to use for level 5 headers | +| Header5Foreground | Brush | Gets or sets the foreground brush for level 5 headers | +| Header5Margin | Thickness | Gets or sets the margin for level 5 headers | +| Header6FontSize | double | Gets or sets the font size for level 6 headers | +| Header6FontWeight | FontWeight | Gets or sets the font weight to use for level 6 headers | +| Header6Foreground | Brush | Gets or sets the foreground brush for level 6 headers | +| Header6Margin | Thickness | Gets or sets the margin for level 6 headers | +| HorizontalRuleBrush | Brush | Gets or sets the brush used to render a horizontal rule. If this is `null`, then HorizontalRuleBrush is used | +| HorizontalRuleMargin | Thickness | Gets or sets the margin used for horizontal rules | +| HorizontalRuleThickness | double | Gets or sets the vertical thickness of the horizontal rule | +| ImageMaxHeight | double | Gets or sets the MaxHeight for images | +| ImageMaxWidth | double | Gets or sets the MaxWidth for images | +| ImageStretch | Stretch | Gets or sets the stretch used for images | +| InlineCodeBackground | Brush | Gets or sets the foreground brush for inline code. | +| InlineCodeBorderBrush | Brush | Gets or sets the border brush for inline code | +| InlineCodeBorderThickness | Thickness | Gets or sets the thickness of the border for inline code | +| InlineCodeFontFamily | FontFamily | Gets or sets the font used to display code. If this is `null`, then `Windows.UI.Xaml.Media.FontFamily` is used | +| InlineCodePadding | Thickness | Gets or sets the foreground brush for inline code | +| IsTextSelectionEnabled | bool | Gets or sets a value indicating whether text selection is enabled | +| LinkForeground | Brush | Gets or sets the brush used to render links. If this is `null`, then Foreground is used | +| ListBulletSpacing | double | Gets or sets the space between the list item bullets/numbers and the list item content | +| ListGutterWidth | double | Gets or sets the width of the space used by list item bullets/numbers | +| ListMargin | Thickness | Gets or sets the margin used by lists | +| ParagraphMargin | Thickness | Gets or sets the margin used for paragraphs | +| QuoteBackground | Brush | Gets or sets the brush used to fill the background of a quote block | +| QuoteBorderBrush | Brush | Gets or sets the brush used to render a quote border. If this is null, then [QuoteBorderBrush](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.markdowntextblock.quoteborderbrush#Microsoft_Toolkit_Uwp_UI_Controls_MarkdownTextBlock_QuoteBorderBrush) is used | +| QuoteBorderThickness | Thickness | Gets or sets the thickness of quote borders. | +| QuoteForeground | Brush | Gets or sets the brush used to render the text inside a quote block. If this is `null`, then Foreground is used | +| QuoteMargin | Thickness | Gets or sets the space outside of quote borders | +| QuotePadding | Thickness | Gets or sets the space between the quote border and the text | +| TableBorderBrush | boBrushol | Gets or sets the brush used to render table borders. If this is null, then [TableBorderBrush](https://docs.microsoft.com/dotnet/api/microsoft.toolkit.uwp.ui.controls.markdowntextblock.tableborderbrush#Microsoft_Toolkit_Uwp_UI_Controls_MarkdownTextBlock_TableBorderBrush) is used | +| TableBorderThickness | double | Gets or sets the thickness of any table borders | +| TableCellPadding | Thickness | Gets or sets the padding inside each cell | +| TableMargin | Thickness | Gets or sets the margin used by tables | +| Text | string | Gets or sets the markdown text to display | +| TextWrapping | TextWrapping | Gets or sets the word wrapping behavior | +| UriPrefix | string | Gets or sets the Prefix of Uri | +| UseSyntaxHighlighting | bool | Gets or sets a value indicating whether to use Syntax Highlighting on Code | +| WrapCodeBlock | bool | Gets or sets a value indicating whether to Wrap the Code Block or use a Horizontal Scroll | ## Events +| Events | Description | +| -- | -- | +| CodeBlockResolving | Fired when a Code Block is being Rendered. The default implementation is to output the CodeBlock as Plain Text. You must set `Handled` to `true` in order to process your changes | +| ImageClicked | Fired when an image element in the markdown was tapped | +| ImageResolving | +Fired when an image from the markdown document needs to be resolved. The default implementation is basically. You must set `Handled` to `true` in order to process your changes | +| LinkClicked | Fired when a link element in the markdown was tapped | +| MarkdownRendered | Fired when the text is done parsing and formatting. Fires each time the markdown is rendered | + ### LinkClicked Use this event to handle clicking on links for Markdown, by default the MarkdownTextBlock does not handle Clicking on Links. @@ -184,21 +209,25 @@ This will likely require intimate knowledge of the implementation of the `Markdo * [MarkdownRenderer and Helpers](https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/Render) * [Sample App custom markdown renderer](https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.SampleApp/Controls/SampleAppMarkdownRenderer) -## Example Code +## Sample Code -[MarkdownTextBlock Sample Page](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock) +[MarkdownTextBlock Sample Page Source](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.SampleApp/SamplePages/MarkdownTextBlock). You can see this in action in [UWP Community Toolkit Sample App](https://www.microsoft.com/store/apps/9NBLGGH4TLCQ). ## Default Template [MarkdownTextBlock XAML File](https://github.com/Microsoft/UWPCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock/MarkdownTextBlock.xaml) is the XAML template used in the toolkit for the default styling. -## Requirements (Windows 10 Device Family) +## Requirements -| [Device family](http://go.microsoft.com/fwlink/p/?LinkID=526370) | Universal, 10.0.14393.0 or higher | +| Device family | Universal, 10.0.14393.0 or higher | | --- | --- | | Namespace | Microsoft.Toolkit.Uwp.UI.Controls | +| NuGet package | [Microsoft.Toolkit.Uwp.UI.Controls](https://www.nuget.org/packages/Microsoft.Toolkit.Uwp.UI.Controls/) | ## API * [MarkdownTextBlock source code](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Uwp.UI.Controls/MarkdownTextBlock) -* [Markdown Parser source code](https://github.com/Microsoft/UWPCommunityToolkit/tree/master/Microsoft.Toolkit.Parsers/Markdown) + +## Related Topics + +* [Markdown Parser](https://docs.microsoft.com/en-us/windows/uwpcommunitytoolkit/parsers/markdownparser)