Various Styling Options

The WPF HTML Editor exposes document-level styling as a focused set of properties on the document body (not the editor chrome) - the properties you reach for when a template has to match a specific brand, for example an invoice with fixed margins, an offer letter in a corporate font, or a report with a watermark background. Setting them correctly matters because the editor's on-screen rendering only matches the published output when the body is styled through these properties rather than loose CSS layered on afterward. This page walks through the properties that control body style, background, and default typography.

Body-level properties:

BodyStyle - inline style applied to the document's <body> (for example "margin:20px; line-height:1.6;").
BodyCSSClassName - a class name on the <body>, for targeting from an external stylesheet.
BodyColor - background color of the document body (System.Windows.Media.Color).
BackgroundImagePath - file or URL whose image becomes the body background.

Typography defaults:

DefaultFontFamily - default body font, for example "Merriweather" or "Inter".
DefaultFontSizeInPt - pass with the "pt" suffix (for example "11pt"); without a unit the editor treats the number as pixels and converts.
DefaultForeColor - default text color (System.Windows.Media.Color).

The same WPF HTML Editor instance shown styled for three different brands (law-firm serif, lifestyle pastel sans, engineering monospace), driven by the same view model.

Set DocumentCSSFilePath to the path of a published stylesheet. The editor injects a matching <link rel="stylesheet"> into the document head, so the editor's rendering matches what end users will see.

editor.DocumentCSSFilePath = $@"C:\BrandCache\{brandId}\brand.css";

For style tweaks that don't belong in the published stylesheet, use the inline-stylesheet pair: HeaderStyleContentElementID names the <style> block; HeaderStyleContent sets its body. The ID lets you replace the block later without leaving stale style declarations behind:

editor.HeaderStyleContentElementID = "custom-overrides";

editor.HeaderStyleContent          = "p { line-height: 1.7; } h1 { color: #003366; }";

Each of these properties is a WPF dependency property, so you can bind them declaratively in XAML. When a bound value changes, the editor reflows automatically:

<wpf:WpfHtmlEditor x:Name="editor"

                   BodyStyle="{Binding DocBodyStyle}"

                   BodyCSSClassName="{Binding DocBodyClass}"

                   DocumentCSSFilePath="{Binding DocCssPath}"

                   DefaultFontFamily="{Binding DocFontFamily}"

                   DefaultFontSizeInPt="{Binding DocFontSize}"

                   DefaultForeColor="{Binding DocForeColor}"

                   BodyColor="{Binding DocBodyColor}"

                   BackgroundImagePath="{Binding DocBackgroundPath}" />

For one-off setups where binding is unnecessary, set the same properties imperatively from code-behind:

C#VB.NET

using System.Windows.Media;

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    editor.DefaultFontFamily = "Merriweather";
    editor.DefaultFontSizeInPt = "11pt";
    editor.DefaultForeColor = Color.FromRgb(0x22, 0x22, 0x22);
    editor.BodyColor = Colors.WhiteSmoke;
    editor.BodyStyle = "padding:24px; line-height:1.6;";
}

Imports System.Windows.Media

End Sub

Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
    editor.DefaultFontFamily = "Merriweather"
    editor.DefaultFontSizeInPt = "11pt"
    editor.DefaultForeColor = Color.FromRgb(&H22, &H22, &H22)
    editor.BodyColor = Colors.WhiteSmoke
    editor.BodyStyle = "padding:24px; line-height:1.6;"

WPF HTML Editor rendering a draft blog post using the brand's production CSS file via the DocumentCSSFilePath property, so the editor preview matches the live site.