MarkdownTextBlock: Tables style improvements

Author: Juan Osorio

components/MarkdownTextBlock/src/Extensions.cs

@@ -710,13 +710,13 @@ public static Size GetMarkdownImageSize(LinkInline link)
         return new(0, 0);
     }
 
-    public static SolidColorBrush GetAccentColorBrush()
+    public static SolidColorBrush GetAccentColorBrush(UIColorType colorType = UIColorType.Accent)
     {
         // Create a UISettings object to get the accent color
         var uiSettings = new UISettings();
 
         // Get the accent color as a Color value
-        var accentColor = uiSettings.GetColorValue(UIColorType.Accent);
+        var accentColor = uiSettings.GetColorValue(colorType);
 
         // Create a SolidColorBrush from the accent color
         var accentBrush = new SolidColorBrush(accentColor);

components/MarkdownTextBlock/src/MarkdownThemes.cs

@@ -56,6 +56,10 @@ public sealed class MarkdownThemes : DependencyObject
     public Thickness H5Margin { get; set; } = new(left: 0, top: 8, right: 0, bottom: 0);
     public Thickness H6Margin { get; set; } = new(left: 0, top: 8, right: 0, bottom: 0);
 
+    public Brush BorderBrush { get; set; } = new SolidColorBrush(Colors.Gray);
+
+    public Brush TableHeadingBackground { get; set; } = Extensions.GetAccentColorBrush(Windows.UI.ViewManagement.UIColorType.AccentLight3);
+
     public Brush InlineCodeBackground { get; set; } = (Brush)Application.Current.Resources["ExpanderHeaderBackground"];
     public Brush InlineCodeForeground { get; set; } = (Brush)Application.Current.Resources["TextFillColorPrimaryBrush"];
 

components/MarkdownTextBlock/src/Renderers/ObjectRenderers/Extensions/TableRenderer.cs

@@ -14,7 +14,7 @@ protected override void Write(WinUIRenderer renderer, Table table)
         if (renderer == null) throw new ArgumentNullException(nameof(renderer));
         if (table == null) throw new ArgumentNullException(nameof(table));
 
-        var myTable = new MyTable(table);
+        var myTable = new MyTable(table, renderer.Config.Themes);
 
         renderer.Push(myTable);
 

components/MarkdownTextBlock/src/Renderers/ObjectRenderers/ThematicBreakRenderer.cs

@@ -14,7 +14,7 @@ protected override void Write(WinUIRenderer renderer, ThematicBreakBlock obj)
         if (renderer == null) throw new ArgumentNullException(nameof(renderer));
         if (obj == null) throw new ArgumentNullException(nameof(obj));
 
-        var thematicBreak = new MyThematicBreak(obj);
+        var thematicBreak = new MyThematicBreak(obj, renderer.Config.Themes);
 
         renderer.WriteBlock(thematicBreak);
     }

components/MarkdownTextBlock/src/TextElements/MyTable.cs

@@ -2,6 +2,7 @@
 // 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.MarkdownTextBlockRns;
 using Markdig.Extensions.Tables;
 
 namespace CommunityToolkit.Labs.WinUI.MarkdownTextBlock.TextElements;
@@ -17,7 +18,7 @@ public TextElement TextElement
         get => _paragraph;
     }
 
-    public MyTable(Table table)
+    public MyTable(Table table, MarkdownThemes themes)
     {
         _table = table;
         _paragraph = new Paragraph();
@@ -28,8 +29,10 @@ public MyTable(Table table)
         (
             column,
             table.Count,
-            1,
-            new SolidColorBrush(Colors.Gray)
+            borderThickness: 1,
+            themes.BorderBrush,
+            themes.TableHeadingBackground,
+            themes.CornerRadius
         );
 
         var inlineUIContainer = new InlineUIContainer();

components/MarkdownTextBlock/src/TextElements/MyTableUIElement.cs

@@ -6,23 +6,44 @@ namespace CommunityToolkit.Labs.WinUI.MarkdownTextBlock.TextElements;
 
 internal partial class MyTableUIElement : Panel
 {
+    // Children[0] = Border
+    // Children[1] = Header Background
+    // Children[2..columnCount] = Vertical lines
+    // Children[columnCount+1..columnCount + rowCount - 1] = Horizontal lines
+    // Children[columnCount + rowCount..] = Content
+
     private readonly int _columnCount;
     private readonly int _rowCount;
     private readonly double _borderThickness;
     private double[]? _columnWidths;
     private double[]? _rowHeights;
 
-    public MyTableUIElement(int columnCount, int rowCount, double borderThickness, Brush borderBrush)
+    public MyTableUIElement(int columnCount, int rowCount, double borderThickness, Brush borderBrush, Brush headingBrush, CornerRadius cornerRadius)
     {
         _columnCount = columnCount;
         _rowCount = rowCount;
         _borderThickness = borderThickness;
-        for (int col = 0; col < columnCount + 1; col++)
+
+        Margin = new Thickness(left: 0, top: 10, right: 0, bottom: 10);
+
+        Children.Add(new Border
+        {
+            Background = headingBrush,
+            CornerRadius = new CornerRadius(topLeft: cornerRadius.TopLeft, topRight: cornerRadius.TopRight, 0, 0)
+        });
+        Children.Add(new Border
+        {
+            BorderThickness = new Thickness(_borderThickness),
+            CornerRadius = cornerRadius,
+            BorderBrush = borderBrush
+        });
+
+        for (int col = 1; col < columnCount; col++)
         {
             Children.Add(new Rectangle { Fill = borderBrush });
         }
 
-        for (int row = 0; row < rowCount + 1; row++)
+        for (int row = 1; row < rowCount; row++)
         {
             Children.Add(new Rectangle { Fill = borderBrush });
         }
@@ -33,7 +54,7 @@ private IEnumerable<FrameworkElement> ContentChildren
     {
         get
         {
-            for (int i = _columnCount + _rowCount + 2; i < Children.Count; i++)
+            for (int i = _columnCount + _rowCount; i < Children.Count; i++)
             {
                 yield return (FrameworkElement)Children[i];
             }
@@ -45,7 +66,7 @@ private IEnumerable<Rectangle> VerticalLines
     {
         get
         {
-            for (int i = 0; i < _columnCount + 1; i++)
+            for (int i = 2; i < _columnCount + 1; i++)
             {
                 yield return (Rectangle)Children[i];
             }
@@ -57,7 +78,7 @@ private IEnumerable<Rectangle> HorizontalLines
     {
         get
         {
-            for (int i = _columnCount + 1; i < _columnCount + _rowCount + 2; i++)
+            for (int i = _columnCount + 1; i < _columnCount + _rowCount; i++)
             {
                 yield return (Rectangle)Children[i];
             }
@@ -167,30 +188,32 @@ protected override Size ArrangeOverride(Size finalSize)
             double x = 0;
             foreach (var borderLine in VerticalLines)
             {
+                x += _borderThickness + _columnWidths[colIndex];
                 borderLine.Arrange(new Rect(x, 0, _borderThickness, finalSize.Height));
                 if (colIndex >= _columnWidths.Length)
                 {
                     break;
                 }
 
-                x += _borderThickness + _columnWidths[colIndex];
                 colIndex++;
             }
         }
 
         // Arrange horizontal border elements.
         {
+            Children[0].Arrange(new Rect(0, 0, finalSize.Width, _rowHeights[0] + (_borderThickness * 2)));
+            Children[1].Arrange(new Rect(0, 0, finalSize.Width, finalSize.Height));
             int rowIndex = 0;
             double y = 0;
             foreach (var borderLine in HorizontalLines)
             {
+                y += _borderThickness + _rowHeights[rowIndex];
                 borderLine.Arrange(new Rect(0, y, finalSize.Width, _borderThickness));
                 if (rowIndex >= _rowHeights.Length)
                 {
                     break;
                 }
 
-                y += _borderThickness + _rowHeights[rowIndex];
                 rowIndex++;
             }
         }

components/MarkdownTextBlock/src/TextElements/MyThematicBreak.cs

@@ -2,6 +2,7 @@
 // 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.MarkdownTextBlockRns;
 using Markdig.Syntax;
 
 namespace CommunityToolkit.Labs.WinUI.MarkdownTextBlock.TextElements;
@@ -16,7 +17,7 @@ public TextElement TextElement
         get => _paragraph;
     }
 
-    public MyThematicBreak(ThematicBreakBlock thematicBreakBlock)
+    public MyThematicBreak(ThematicBreakBlock thematicBreakBlock, MarkdownThemes themes)
     {
         _thematicBreakBlock = thematicBreakBlock;
         _paragraph = new Paragraph();
@@ -25,7 +26,7 @@ public MyThematicBreak(ThematicBreakBlock thematicBreakBlock)
         Line line = new Line
         {
             Stretch = Stretch.Fill,
-            Stroke = new SolidColorBrush(Colors.Gray),
+            Stroke = themes.BorderBrush,
             X2 = 1,
             Margin = new Thickness(0, 12, 0, 12)
         };