MarkdownTextBlock: ThemeResource support, DP migration & performance fixes

components/MarkdownTextBlock/samples/MarkdownTextBlockCustomThemeSample.xaml

@@ -1,4 +1,4 @@
-<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
+<!--  Licensed to the .NET Foundation under one or more agreements. The .NET Foundation licenses this file to you under the MIT license. See the LICENSE file in the project root for more information.  -->
 <local:MarkdownTextBlockCustomThemeSampleBase x:Class="MarkdownTextBlockExperiment.Samples.MarkdownTextBlockCustomThemeSample"
                                               xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                                               xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
@@ -11,7 +11,37 @@
     <ScrollViewer>
         <controls:MarkdownTextBlock x:Name="MarkdownTextBlock"
                                     Margin="12"
-                                    Config="{x:Bind MarkdownConfig, Mode=OneWay}"
+                                    BoldFontWeight="{x:Bind GetBoldFontWeight(BoldFontWeightIndex), Mode=OneWay}"
+                                    CodeBlockBackground="{x:Bind GetCodeBackgroundBrush(CodeBlockBackgroundColorIndex), Mode=OneWay}"
+                                    CodeBlockBorderBrush="{x:Bind GetCodeBorderBrush(CodeBlockBorderColorIndex), Mode=OneWay}"
+                                    CodeBlockBorderThickness="{x:Bind GetUniformThickness(CodeBlockBorderThickness), Mode=OneWay}"
+                                    CodeBlockCornerRadius="{x:Bind GetUniformCornerRadius(CodeBlockCornerRadius), Mode=OneWay}"
+                                    CodeBlockFontFamily="{x:Bind GetCodeFont(CodeBlockFontIndex), Mode=OneWay}"
+                                    CodeBlockPadding="{x:Bind GetUniformThickness(CodeBlockPadding), Mode=OneWay}"
+                                    H1FontSize="{x:Bind H1FontSize, Mode=OneWay}"
+                                    H1Foreground="{x:Bind GetHeadingBrush(H1ColorIndex), Mode=OneWay}"
+                                    H2FontSize="{x:Bind H2FontSize, Mode=OneWay}"
+                                    H3FontSize="{x:Bind H3FontSize, Mode=OneWay}"
+                                    HorizontalRuleMargin="{x:Bind GetVerticalMargin(HorizontalRuleMargin), Mode=OneWay}"
+                                    HorizontalRuleThickness="{x:Bind HorizontalRuleThickness, Mode=OneWay}"
+                                    ImageMaxHeight="{x:Bind ImageMaxHeight, Mode=OneWay}"
+                                    ImageMaxWidth="{x:Bind ImageMaxWidth, Mode=OneWay}"
+                                    ImageStretch="{x:Bind GetImageStretch(ImageStretchIndex), Mode=OneWay}"
+                                    InlineCodeBackground="{x:Bind GetCodeBackgroundBrush(InlineCodeBackgroundColorIndex), Mode=OneWay}"
+                                    InlineCodeBorderBrush="{x:Bind GetCodeBorderBrush(InlineCodeBorderColorIndex), Mode=OneWay}"
+                                    InlineCodeBorderThickness="{x:Bind GetUniformThickness(InlineCodeBorderThickness), Mode=OneWay}"
+                                    InlineCodeCornerRadius="{x:Bind GetUniformCornerRadius(InlineCodeCornerRadius), Mode=OneWay}"
+                                    InlineCodeFontSize="{x:Bind InlineCodeFontSize, Mode=OneWay}"
+                                    InlineCodeForeground="{x:Bind GetInlineCodeBrush(InlineCodeColorIndex), Mode=OneWay}"
+                                    InlineCodePadding="{x:Bind GetHorizontalPadding(InlineCodePadding), Mode=OneWay}"
+                                    ListBulletSpacing="{x:Bind ListBulletSpacing, Mode=OneWay}"
+                                    ListGutterWidth="{x:Bind ListGutterWidth, Mode=OneWay}"
+                                    QuoteBorderBrush="{x:Bind GetQuoteBrush(QuoteColorIndex), Mode=OneWay}"
+                                    QuoteBorderThickness="{x:Bind GetLeftBorderThickness(QuoteBorderWidth), Mode=OneWay}"
+                                    QuoteCornerRadius="{x:Bind GetRightCornerRadius(QuoteCornerRadius), Mode=OneWay}"
+                                    QuotePadding="{x:Bind GetHorizontalPadding(QuotePadding), Mode=OneWay}"
+                                    TableBorderThickness="{x:Bind TableBorderThickness, Mode=OneWay}"
+                                    TableCellPadding="{x:Bind GetHorizontalPadding(TableCellPadding), Mode=OneWay}"
                                     Text="{x:Bind MarkdownText, Mode=OneWay}" />
     </ScrollViewer>
 </local:MarkdownTextBlockCustomThemeSampleBase>

components/MarkdownTextBlock/samples/MarkdownTextBlockCustomThemeSample.xaml.cs

@@ -2,8 +2,6 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
-using CommunityToolkit.WinUI.Controls;
-
 namespace MarkdownTextBlockExperiment.Samples;
 
 /// <summary>
@@ -12,8 +10,6 @@ namespace MarkdownTextBlockExperiment.Samples;
 [ToolkitSample(id: nameof(MarkdownTextBlockCustomThemeSample), "Custom Theme", description: "A sample showcasing custom theming options with live editing for headings, code blocks, quotes, tables, and more.")]
 public sealed partial class MarkdownTextBlockCustomThemeSample : MarkdownTextBlockCustomThemeSampleBase
 {
-    public MarkdownConfig MarkdownConfig { get; private set; }
-
     public string MarkdownText { get; } = @"
 # Custom Theme Demo
 
@@ -96,7 +92,7 @@ Try adjusting the **Bullet Spacing** and **Gutter Width** settings to see how li
 - Adjust the theme settings in the options panel
   - The gutter width controls how much each level is indented
   - The bullet spacing controls space after the bullet character
-- Click **Apply Changes** to see updates
+- Changes apply live via bindings
 - Use **Reset to Defaults** to start over
 
 Numbered lists work too:
@@ -109,20 +105,24 @@ 1. Deep nesting works
 3. Third item
 ";
 
+    // Converter methods for x:Bind function bindings (must be on the x:Class type, not the base)
+    public Brush GetHeadingBrush(int index) => HeadingColors[Math.Clamp(index, 0, HeadingColors.Length - 1)];
+    public Brush GetInlineCodeBrush(int index) => InlineCodeColors[Math.Clamp(index, 0, InlineCodeColors.Length - 1)];
+    public Brush GetCodeBackgroundBrush(int index) => CodeBackgroundColors[Math.Clamp(index, 0, CodeBackgroundColors.Length - 1)];
+    public Brush GetCodeBorderBrush(int index) => CodeBorderColors[Math.Clamp(index, 0, CodeBorderColors.Length - 1)];
+    public Brush GetQuoteBrush(int index) => QuoteColors[Math.Clamp(index, 0, QuoteColors.Length - 1)];
+    public FontFamily GetCodeFont(int index) => CodeFonts[Math.Clamp(index, 0, CodeFonts.Length - 1)];
+    public Stretch GetImageStretch(int index) => ImageStretchOptions[Math.Clamp(index, 0, ImageStretchOptions.Length - 1)];
+    public Windows.UI.Text.FontWeight GetBoldFontWeight(int index) => BoldFontWeights[Math.Clamp(index, 0, BoldFontWeights.Length - 1)];
+    public Thickness GetUniformThickness(double value) => new Thickness(value);
+    public CornerRadius GetUniformCornerRadius(double value) => new CornerRadius(value);
+    public Thickness GetHorizontalPadding(double value) => new Thickness(value, value / 2, value, value / 2);
+    public Thickness GetLeftBorderThickness(double value) => new Thickness(value, 0, 0, 0);
+    public CornerRadius GetRightCornerRadius(double value) => new CornerRadius(0, value, value, 0);
+    public Thickness GetVerticalMargin(double value) => new Thickness(0, value, 0, value);
+
     public MarkdownTextBlockCustomThemeSample()
     {
-        MarkdownConfig = new MarkdownConfig { Themes = CreateThemes() };
         this.InitializeComponent();
     }
-
-    public override void ApplyTheme()
-    {
-        MarkdownConfig = new MarkdownConfig { Themes = CreateThemes() };
-
-        // Force re-render by toggling text
-        MarkdownTextBlock.Config = MarkdownConfig;
-        var text = MarkdownTextBlock.Text;
-        MarkdownTextBlock.Text = "";
-        MarkdownTextBlock.Text = text;
-    }
 }

components/MarkdownTextBlock/samples/MarkdownTextBlockCustomThemeSampleBase.cs

@@ -2,7 +2,6 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
-using CommunityToolkit.WinUI.Controls;
 using Microsoft.UI;
 using Windows.UI;
 
@@ -14,7 +13,7 @@
 
 namespace MarkdownTextBlockExperiment.Samples;
 
-public abstract partial class MarkdownTextBlockCustomThemeSampleBase : Page
+public partial class MarkdownTextBlockCustomThemeSampleBase : Page
 {
     // Dependency properties for theme customization
     public static readonly DependencyProperty H1FontSizeProperty =
@@ -372,67 +371,7 @@ public double ListGutterWidth
         FontWeights.ExtraBold
     };
 
-    public MarkdownThemes CreateThemes()
-    {
-        return new MarkdownThemes
-        {
-            H1FontSize = H1FontSize,
-            H1FontWeight = FontWeights.Bold,
-            H1Foreground = HeadingColors[H1ColorIndex],
-            H1Margin = new Thickness(0, 20, 0, 10),
-
-            H2FontSize = H2FontSize,
-            H2FontWeight = FontWeights.SemiBold,
-            H2Foreground = new SolidColorBrush(Colors.MediumSlateBlue),
-
-            H3FontSize = H3FontSize,
-            H3FontWeight = FontWeights.SemiBold,
-            H3Foreground = new SolidColorBrush(Colors.MediumPurple),
-
-            InlineCodeFontSize = InlineCodeFontSize,
-            InlineCodePadding = new Thickness(InlineCodePadding, InlineCodePadding / 2, InlineCodePadding, InlineCodePadding / 2),
-            InlineCodeCornerRadius = new CornerRadius(InlineCodeCornerRadius),
-            InlineCodeBorderThickness = new Thickness(InlineCodeBorderThickness),
-            InlineCodeForeground = InlineCodeColors[InlineCodeColorIndex],
-            InlineCodeBackground = CodeBackgroundColors[InlineCodeBackgroundColorIndex],
-            InlineCodeBorderBrush = CodeBorderColors[InlineCodeBorderColorIndex],
-
-            CodeBlockPadding = new Thickness(CodeBlockPadding),
-            CodeBlockCornerRadius = new CornerRadius(CodeBlockCornerRadius),
-            CodeBlockBorderThickness = new Thickness(CodeBlockBorderThickness),
-            CodeBlockFontFamily = CodeFonts[CodeBlockFontIndex],
-            CodeBlockBackground = CodeBackgroundColors[CodeBlockBackgroundColorIndex],
-            CodeBlockForeground = new SolidColorBrush(Colors.LightGreen),
-            CodeBlockBorderBrush = CodeBorderColors[CodeBlockBorderColorIndex],
-
-            QuoteBorderThickness = new Thickness(QuoteBorderWidth, 0, 0, 0),
-            QuotePadding = new Thickness(QuotePadding, QuotePadding / 2, QuotePadding, QuotePadding / 2),
-            QuoteCornerRadius = new CornerRadius(0, QuoteCornerRadius, QuoteCornerRadius, 0),
-            QuoteBorderBrush = QuoteColors[QuoteColorIndex],
-            QuoteBackground = new SolidColorBrush(Color.FromArgb(20, 100, 149, 237)),
-            QuoteForeground = new SolidColorBrush(Colors.CornflowerBlue),
-
-            TableCellPadding = new Thickness(TableCellPadding, TableCellPadding / 2, TableCellPadding, TableCellPadding / 2),
-            TableBorderThickness = TableBorderThickness,
-            TableBorderBrush = new SolidColorBrush(Colors.SlateGray),
-            TableHeadingBackground = new SolidColorBrush(Color.FromArgb(40, 100, 149, 237)),
 
-            HorizontalRuleThickness = HorizontalRuleThickness,
-            HorizontalRuleMargin = new Thickness(0, HorizontalRuleMargin, 0, HorizontalRuleMargin),
-            HorizontalRuleBrush = new SolidColorBrush(Colors.MediumSlateBlue),
-
-            LinkForeground = new SolidColorBrush(Colors.DeepSkyBlue),
-
-            ImageMaxWidth = ImageMaxWidth,
-            ImageMaxHeight = ImageMaxHeight,
-            ImageStretch = ImageStretchOptions[ImageStretchIndex],
-
-            BoldFontWeight = BoldFontWeights[BoldFontWeightIndex],
-
-            ListBulletSpacing = ListBulletSpacing,
-            ListGutterWidth = ListGutterWidth,
-        };
-    }
 
     public void ResetToDefaults()
     {
@@ -476,6 +415,4 @@ public void ResetToDefaults()
         ListBulletSpacing = 4;
         ListGutterWidth = 30;
     }
-
-    public abstract void ApplyTheme();
 }

components/MarkdownTextBlock/samples/MarkdownTextBlockExampleSample.xaml

@@ -11,7 +11,6 @@
     <ScrollViewer>
         <controls:MarkdownTextBlock x:Name="MarkdownTextBlock"
                                     Margin="12"
-                                    Config="{x:Bind MarkdownConfig, Mode=OneTime}"
                                     DisableHtml="{x:Bind DisableHtml, Mode=OneWay}"
                                     Text="{x:Bind Text, Mode=OneTime}"
                                     UseAutoLinks="{x:Bind UseAutoLinks, Mode=OneWay}"

components/MarkdownTextBlock/samples/MarkdownTextBlockExampleSample.xaml.cs

@@ -20,7 +20,6 @@ namespace MarkdownTextBlockExperiment.Samples;
 [ToolkitSample(id: nameof(MarkdownTextBlockExampleSample), "Full Example", description: $"A comprehensive example showcasing all the features and capabilities of the {nameof(CommunityToolkit.WinUI.Controls.MarkdownTextBlock)} control with various markdown syntax.")]
 public sealed partial class MarkdownTextBlockExampleSample : Page
 {
-    private MarkdownConfig _config;
     private string _text;
     private const string _markdown = @"
 This control was originally written by [Nero Cui](https://github.com/nerocui) for [JitHub](https://github.com/JitHubApp/JitHubV2). The control is powered by the popular [Markdig](https://github.com/xoofx/markdig) markdown parsing library and *almost* supports the full markdown syntax, with a focus on super-efficient parsing and rendering.
@@ -585,12 +584,6 @@ results in
 Source: https://www.reddit.com/r/reddit.com/comments/6ewgt/reddit_markdown_primer_or_how_do_you_do_all_that/c03nik6
 ";
 
-    public MarkdownConfig MarkdownConfig
-    {
-        get => _config;
-        set => _config = value;
-    }
-
     public string Text
     {
         get => _text;
@@ -600,7 +593,6 @@ public string Text
     public MarkdownTextBlockExampleSample()
     {
         this.InitializeComponent();
-        _config = new MarkdownConfig();
         _text = _markdown;
         MarkdownTextBlock.OnLinkClicked += MarkdownTextBlock_OnLinkClicked;
     }

components/MarkdownTextBlock/samples/ThemeOptionsPane.xaml

@@ -15,9 +15,6 @@
                         Spacing="8">
                 <Button Click="ResetTheme_Click"
                         Content="Reset to Defaults" />
-                <Button Click="ApplyTheme_Click"
-                        Content="Apply Changes"
-                        Style="{ThemeResource AccentButtonStyle}" />
             </StackPanel>
 
             <!--  Headings Section  -->

components/MarkdownTextBlock/samples/ThemeOptionsPane.xaml.cs

@@ -140,20 +140,12 @@ private void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
         SyncValuesToSample();
     }
 
-    private void ApplyTheme_Click(object sender, RoutedEventArgs e)
-    {
-        SyncValuesToSample();
-        _sample.ApplyTheme();
-    }
-
     private void ResetTheme_Click(object sender, RoutedEventArgs e)
     {
         _sample.ResetToDefaults();
 
         _isInitializing = true;
         LoadValuesFromSample();
         _isInitializing = false;
-
-        _sample.ApplyTheme();
     }
 }

components/MarkdownTextBlock/src/HtmlWriter.cs

@@ -33,7 +33,7 @@ public static void WriteHtml(WinUIRenderer renderer, HtmlNodeCollection nodes)
                     IAddChild hyperLink;
                     if (node.ChildNodes.Any(n => n.Name != "#text"))
                     {
-                        var myHyperlinkButton = new MyHyperlinkButton(node, renderer.Config.BaseUrl, renderer.Config.Themes);
+                        var myHyperlinkButton = new MyHyperlinkButton(node, renderer.MarkdownTextBlock);
                         myHyperlinkButton.ClickEvent += (sender, e) =>
                         {
                             var button = (HyperlinkButton)sender;
@@ -48,7 +48,7 @@ public static void WriteHtml(WinUIRenderer renderer, HtmlNodeCollection nodes)
                     }
                     else
                     {
-                        var myHyperlink = new MyHyperlink(node, renderer.Config.BaseUrl, renderer.Config.Themes);
+                        var myHyperlink = new MyHyperlink(node, renderer.MarkdownTextBlock);
                         myHyperlink.ClickEvent += (sender, e) =>
                         {
                             var uri = sender.NavigateUri;
@@ -66,7 +66,7 @@ public static void WriteHtml(WinUIRenderer renderer, HtmlNodeCollection nodes)
                 }
                 else if (inlineTagName == "img")
                 {
-                    var image = new MyImage(node, renderer.Config);
+                    var image = new MyImage(node, renderer.MarkdownTextBlock);
                     renderer.WriteInline(image);
                 }
                 else
@@ -84,13 +84,17 @@ public static void WriteHtml(WinUIRenderer renderer, HtmlNodeCollection nodes)
                 if (tag == "details")
                 {
                     block = new MyDetails(node);
-                    node.ChildNodes.Remove(node.ChildNodes.FirstOrDefault(x => x.Name == "summary" || x.Name == "header"));
+                    var summaryNode = node.ChildNodes.FirstOrDefault(x => x.Name == "summary" || x.Name == "header");
+                    if (summaryNode != null)
+                    {
+                        node.ChildNodes.Remove(summaryNode);
+                    }
                     renderer.Push(block);
                     WriteHtml(renderer, node.ChildNodes);
                 }
                 else if (tag.IsHeading())
                 {
-                    var heading = new MyHeading(node, renderer.Config);
+                    var heading = new MyHeading(node, renderer.MarkdownTextBlock);
                     renderer.Push(heading);
                     WriteHtml(renderer, node.ChildNodes);
                 }