Skip to content

Conversation

@niels9001
Copy link
Collaborator

@niels9001 niels9001 commented Sep 18, 2025

I asked Copilot to help me bridge the gap between styling properties of the former MarkdownTextblock with this version.

  • Removed the HeadingsForeground foreground in favor of H1/H2/etc. foreground properties.

To validate, add this config:

 var themes = new MarkdownThemes
 {
     // Headings
     H1FontSize = 28,
     H2FontSize = 24,
     H3FontSize = 20,
     H4FontSize = 18,
     H5FontSize = 16,
     H6FontSize = 14,

     H1FontWeight = FontWeights.Bold,
     H2FontWeight = FontWeights.SemiBold,
     H3FontWeight = FontWeights.Medium,
     H4FontWeight = FontWeights.Normal,
     H5FontWeight = FontWeights.Normal,
     H6FontWeight = FontWeights.Normal,

     H1Foreground = new SolidColorBrush(Colors.Crimson),
     H2Foreground = new SolidColorBrush(Colors.DarkOrange),
     H3Foreground = new SolidColorBrush(Colors.Goldenrod),
     H4Foreground = new SolidColorBrush(Colors.ForestGreen),
     H5Foreground = new SolidColorBrush(Colors.SteelBlue),
     H6Foreground = new SolidColorBrush(Colors.MediumPurple),

     H1Margin = new Thickness(0, 20, 0, 4),
     H2Margin = new Thickness(0, 18, 0, 4),
     H3Margin = new Thickness(0, 16, 0, 4),
     H4Margin = new Thickness(0, 14, 0, 4),
     H5Margin = new Thickness(0, 12, 0, 2),
     H6Margin = new Thickness(0, 10, 0, 2),

     // General container
     Padding = new Thickness(12),
     InternalMargin = new Thickness(6),
     CornerRadius = new CornerRadius(6),

     // Paragraph / lists
     ParagraphMargin = new Thickness(0, 10, 0, 10),
     ParagraphLineHeight = 22,
     ListGutterWidth = 28,
     ListBulletSpacing = 6,
     ListMargin = new Thickness(0, 6, 0, 6),

     // Horizontal rule
     HorizontalRuleBrush = new SolidColorBrush(Colors.Gray),
     HorizontalRuleThickness = 2,
     HorizontalRuleMargin = new Thickness(0, 18, 0, 18),

     // Links
     LinkForeground = new SolidColorBrush(Colors.DodgerBlue),

     // Inline code
     InlineCodeBackground = new SolidColorBrush(Color.FromArgb(255, 40, 44, 52)),
     InlineCodeForeground = new SolidColorBrush(Colors.White),
     InlineCodeBorderBrush = new SolidColorBrush(Color.FromArgb(255, 70, 75, 85)),
     InlineCodeBorderThickness = new Thickness(1),
     InlineCodeCornerRadius = new CornerRadius(3),
     InlineCodePadding = new Thickness(4, 0, 4, 0),
     InlineCodeFontSize = 13,
     InlineCodeFontWeight = FontWeights.SemiBold,

     // Code blocks
     CodeBlockBackground = new SolidColorBrush(Color.FromArgb(255, 30, 34, 40)),
     CodeBlockForeground = new SolidColorBrush(Colors.Gainsboro),
     CodeBlockBorderBrush = new SolidColorBrush(Color.FromArgb(255, 60, 65, 75)),
     CodeBlockBorderThickness = new Thickness(1),
     CodeBlockPadding = new Thickness(12),
     CodeBlockMargin = new Thickness(0, 14, 0, 16),
     CodeBlockFontFamily = new FontFamily("Consolas"),
     CodeBlockCornerRadius = new CornerRadius(8),

     // Quotes
     QuoteBackground = new SolidColorBrush(Color.FromArgb(30, 255, 200, 0)),
     QuoteBorderBrush = new SolidColorBrush(Colors.Orange),
     QuoteBorderThickness = new Thickness(5, 0, 0, 0),
     QuoteForeground = new SolidColorBrush(Colors.DarkSlateGray),
     QuoteMargin = new Thickness(0, 10, 0, 10),
     QuotePadding = new Thickness(10),
     QuoteCornerRadius = new CornerRadius(6),

     // Images
     ImageMaxWidth = 420,
     ImageMaxHeight = 260,
     ImageStretch = Stretch.UniformToFill,

     // Tables
     TableBorderBrush = new SolidColorBrush(Colors.DimGray),
     TableBorderThickness = 1,
     TableCellPadding = new Thickness(8, 4, 8, 4),
     TableMargin = new Thickness(0, 18, 0, 18),
     TableHeadingBackground = new SolidColorBrush(Color.FromArgb(255, 50, 70, 95)),

     // Other / border defaults
     BorderBrush = new SolidColorBrush(Colors.DarkGray),

     // (YAML placeholders if ever used)
     YamlBorderBrush = new SolidColorBrush(Colors.DarkGoldenrod),
     YamlBorderThickness = new Thickness(1)
 };
 _config = new MarkdownConfig { Themes = themes };
 _text = _markdown;
 

@Arlodotexe Arlodotexe moved this to 👀 In review in Toolkit 8.x Sep 19, 2025
Copy link
Member

@Arlodotexe Arlodotexe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @niels9001! This is great to see, massively helpful.

To give us a clear picture on the coverage here, I've taken source code inventories and comparisons (all manually triple checked) using Copilot locally to evaluate feature parity between the 7x and 8x versions of MarkdownTextBlock before and after your PR.

Here follows a brief summary of my findings, what it means for 7x/8x feature parity progress in your PR, and what feature parity work still remains on this component.

Summary

  • Restores the majority of 7x styling capabilities to Labs 8x.
  • Adds per-heading foregrounds, robust code/quote/table/list/hr/image/link styling, and IsTextSelectionEnabled.
  • Removes shared HeadingForeground in favor of H1–H6 foregrounds; tweaks some defaults (H1 weight, H1–H4 margins).
  • Approximately 33 of 48 previously missing properties are covered; ~15 remain (non-blocking for this PR).

What this PR adds

  • Headings: H1ForegroundH6Foreground (replaces HeadingForeground).
  • Code blocks: background, border brush/thickness, padding, margin, font family, foreground, corner radius.
  • Quotes: background, border brush/thickness, foreground, margin, padding, corner radius.
  • Tables: border brush/thickness, cell padding, table margin.
  • Paragraph/List: paragraph margin, line height, list bullet spacing, gutter width, list margin.
  • Horizontal rule: brush, thickness, margin.
  • Links: foreground applied across Markdown/HTML/hyperlink button paths.
  • Images: max width/height constraints, stretch mode.
  • YAML: border brush/thickness placeholders.
  • Control: IsTextSelectionEnabled dependency property.

Validation performed

  • Comprehensive property inventory: Catalogued all 71 properties from the original 7x control across 12 categories (headers, code blocks, inline code, quotes, tables, lists, paragraphs, horizontal rules, images, links, YAML, and general functionality).
  • Baseline 8x assessment: Documented the 43 properties available in Labs before this PR (32 theme properties + 11 dependency properties), identifying a 48-property gap representing 78% missing functionality.
  • PR delta analysis: Extracted and categorized all 35 new properties from the patch/diff, mapping each to specific 7x equivalents and noting architectural changes (e.g., HeadingForeground → per-level foregrounds).
  • Implementation verification: Confirmed through diff inspection that properties are actively wired into renderers and components:
    • Headings (MyHeading), code blocks (MyCodeBlock), quotes (MyQuote), tables (MyTable, MyTableCell, MyTableUIElement), thematic breaks (MyThematicBreak), links (MyHyperlink, MyHyperlinkButton, HtmlWriter), paragraphs/lists (MyParagraph), images (MyImage).
  • Gap closure calculation: Determined that 33 of the original 48 missing properties are now covered (~69% gap closure), with remaining gaps primarily in advanced scenarios (syntax highlighting, URI customization, etc.).
  • Sample configuration validation: The provided comprehensive MarkdownThemes config exercises the new styling surface across all element types, demonstrating practical usage patterns.

Non-blocking follow-ups (parity gaps)

  • Syntax highlighting: bring back 7x-level support (UseSyntaxHighlighting, token style surface / CodeStyling).
  • Layout toggles: expose TextWrapping and code-block wrap control (WrapCodeBlock).
  • URI customization: UriPrefix, SchemeList equivalents for app navigation.
  • Emoji font: EmojiFontFamily or equivalent.
  • Live updates: consider DP-ifying theme props or adding a change-notification/refresh hook.

Notes on defaults/breaks

  • HeadingForeground removed in favor of per-level foregrounds (clearer, more flexible).
  • Defaults adjusted: H1FontWeight → SemiBold; H1–H4 top margins 14 → 16.

Approval

  • LGTM — this is a substantial step toward styling parity and a clear improvement for consumers. Approving PR #729.

Suggested tracking checklist

  • Design/implement syntax highlighting surface and behavior
  • Consider TextWrapping and code-wrap options
  • Evaluate UriPrefix / SchemeList equivalents
  • Consider DP or refresh mechanism for MarkdownThemes
  • Optional: Emoji font handling

@niels9001 niels9001 enabled auto-merge September 25, 2025 07:30
@niels9001 niels9001 merged commit 8b6abbc into main Sep 25, 2025
23 of 24 checks passed
@github-project-automation github-project-automation bot moved this from 👀 In review to ✅ Done in Toolkit 8.x Sep 25, 2025
@Arlodotexe Arlodotexe deleted the niels9001/per-heading-foreground branch September 29, 2025 17:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants