Fixing bulletspacing

Author: niels9001

components/MarkdownTextBlock/samples/MarkdownTextBlockCustomThemeSampleBase.cs

@@ -104,6 +104,12 @@ public abstract partial class MarkdownTextBlockCustomThemeSampleBase : Page
     public static readonly DependencyProperty BoldFontWeightIndexProperty =
         DependencyProperty.Register(nameof(BoldFontWeightIndex), typeof(int), typeof(MarkdownTextBlockCustomThemeSampleBase), new PropertyMetadata(0));
 
+    public static readonly DependencyProperty ListBulletSpacingProperty =
+        DependencyProperty.Register(nameof(ListBulletSpacing), typeof(double), typeof(MarkdownTextBlockCustomThemeSampleBase), new PropertyMetadata(4d));
+
+    public static readonly DependencyProperty ListGutterWidthProperty =
+        DependencyProperty.Register(nameof(ListGutterWidth), typeof(double), typeof(MarkdownTextBlockCustomThemeSampleBase), new PropertyMetadata(30d));
+
     public MarkdownTextBlockCustomThemeSampleBase()
     {
     }
@@ -283,6 +289,18 @@ public int BoldFontWeightIndex
         set => SetValue(BoldFontWeightIndexProperty, value);
     }
 
+    public double ListBulletSpacing
+    {
+        get => (double)GetValue(ListBulletSpacingProperty);
+        set => SetValue(ListBulletSpacingProperty, value);
+    }
+
+    public double ListGutterWidth
+    {
+        get => (double)GetValue(ListGutterWidthProperty);
+        set => SetValue(ListGutterWidthProperty, value);
+    }
+
     // Static lookup arrays
     public static Brush[] HeadingColors { get; } = new Brush[]
     {
@@ -410,6 +428,9 @@ public MarkdownThemes CreateThemes()
             ImageStretch = ImageStretchOptions[ImageStretchIndex],
 
             BoldFontWeight = BoldFontWeights[BoldFontWeightIndex],
+
+            ListBulletSpacing = ListBulletSpacing,
+            ListGutterWidth = ListGutterWidth,
         };
     }
 
@@ -451,6 +472,9 @@ public void ResetToDefaults()
         ImageStretchIndex = 0;
 
         BoldFontWeightIndex = 0;
+
+        ListBulletSpacing = 4;
+        ListGutterWidth = 30;
     }
 
     public abstract void ApplyTheme();

components/MarkdownTextBlock/samples/ThemeOptionsPane.xaml

@@ -243,6 +243,29 @@
                 </StackPanel>
             </muxc:Expander>
 
+            <!--  Lists Section  -->
+            <muxc:Expander HorizontalAlignment="Stretch"
+                           HorizontalContentAlignment="Stretch">
+                <muxc:Expander.Header>
+                    <TextBlock FontWeight="SemiBold"
+                               Text="Lists" />
+                </muxc:Expander.Header>
+                <StackPanel Spacing="8">
+                    <muxc:NumberBox x:Name="ListBulletSpacingBox"
+                                    Header="Bullet Spacing"
+                                    Maximum="20"
+                                    Minimum="0"
+                                    SpinButtonPlacementMode="Compact"
+                                    ValueChanged="OnValueChanged" />
+                    <muxc:NumberBox x:Name="ListGutterWidthBox"
+                                    Header="Gutter Width (Indent)"
+                                    Maximum="60"
+                                    Minimum="10"
+                                    SpinButtonPlacementMode="Compact"
+                                    ValueChanged="OnValueChanged" />
+                </StackPanel>
+            </muxc:Expander>
+
             <!--  Table Section  -->
             <muxc:Expander HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch">

components/MarkdownTextBlock/samples/ThemeOptionsPane.xaml.cs

@@ -60,6 +60,10 @@ private void LoadValuesFromSample()
         TableCellPaddingBox.Value = _sample.TableCellPadding;
         TableBorderThicknessBox.Value = _sample.TableBorderThickness;
 
+        // Lists
+        ListBulletSpacingBox.Value = _sample.ListBulletSpacing;
+        ListGutterWidthBox.Value = _sample.ListGutterWidth;
+
         // Horizontal Rule
         HorizontalRuleThicknessBox.Value = _sample.HorizontalRuleThickness;
         HorizontalRuleMarginBox.Value = _sample.HorizontalRuleMargin;
@@ -108,6 +112,10 @@ private void SyncValuesToSample()
         _sample.TableCellPadding = TableCellPaddingBox.Value;
         _sample.TableBorderThickness = TableBorderThicknessBox.Value;
 
+        // Lists
+        _sample.ListBulletSpacing = ListBulletSpacingBox.Value;
+        _sample.ListGutterWidth = ListGutterWidthBox.Value;
+
         // Horizontal Rule
         _sample.HorizontalRuleThickness = HorizontalRuleThicknessBox.Value;
         _sample.HorizontalRuleMargin = HorizontalRuleMarginBox.Value;

components/MarkdownTextBlock/src/TextElements/MyParagraph.cs

@@ -39,7 +39,9 @@ public MyParagraph(ParagraphBlock paragraphBlock, WinUIRenderer renderer)
         if (bulletCount != 0)
         {
             string bullet = renderer.PeekListBullet();
-            Run bulletRun = new Run { Text = bullet + "\t" };
+            // Use spaces to create spacing between bullet and text based on ListBulletSpacing
+            string spacing = new string(' ', (int)themes.ListBulletSpacing);
+            Run bulletRun = new Run { Text = bullet + spacing };
 
             _paragraph.Inlines.Add(bulletRun);
             _paragraph.TextIndent = -themes.ListGutterWidth;