Setting editor border

Patrik writes the service-bay application for a chain of European automotive workshops. Mechanics use it on rugged tablets in the bay -- gloves on, fluorescent lighting, often a noisy environment -- to record what they found on each vehicle and what they did about it.

Most of those notes are routine: oil changed, brake pads above wear limit, wipers replaced. But some are not routine. When a mechanic discovers a brake-line leak, a cracked subframe, or anything that means the car cannot leave the bay until a senior tech signs off, the entry needs to be screamingly obvious to the foreman walking by. His UX lead asked for a thick red border around the editor when -- and only when -- the entry is flagged "critical fault".

The WpfHtmlEditor exposes exactly the two properties Patrik needed, both real dependency properties:

  • EditorBorderColor -- type System.Windows.Media.Color. The color of the border around the editing surface.
  • EditorBorderWidth -- type System.Windows.Thickness. The per-side width of the border, exactly like a WPF Margin.
The service-bay WPF application showing the HTML editor with a 4-pixel red border around the editing surface for a critical-fault entry

For a fixed style at design time he could have written it as XAML literals -- EditorBorderColor="Red" and EditorBorderWidth="4". But the whole point was that the border had to change. So he bound both properties to view-model state that flips with the IsCriticalFault flag:

<wpf:WpfHtmlEditor x:Name="editor"
                   EditorBorderColor="{Binding EntryBorderColor}"
                   EditorBorderWidth="{Binding EntryBorderThickness}" />

In the view model, two computed properties watch the flag:

public Color EntryBorderColor =>
    IsCriticalFault ? Color.FromRgb(0xCC, 0x00, 0x00)   // bay-warning red
                    : Color.FromRgb(0xCC, 0xCC, 0xCC);  // neutral grey

public Thickness EntryBorderThickness =>
    IsCriticalFault ? new Thickness(4)                  // shout
                    : new Thickness(1);                 // quiet

When the mechanic ticks the critical-fault checkbox, PropertyChanged fires for both border properties and the editor redraws. No code-behind glue.

One of his foremen also asked for a "borderless" look on a read-only summary panel where the editor was embedded inside an already-bordered card. To hide the border entirely, he set the width to a zero Thickness:

<wpf:WpfHtmlEditor x:Name="summaryEditor" EditorBorderWidth="0" />

From code-behind that's:

summaryEditor.EditorBorderWidth = new Thickness(0);

For the rare imperative case -- a one-shot diagnostic dialog where Patrik wanted to highlight an editor only after a backend check returned bad news -- he set both properties directly:

using System.Windows;
using System.Windows.Media;

private void OnDiagnosticFailed()
{
    editor.EditorBorderColor = Color.FromRgb(0xCC, 0x00, 0x00);
    editor.EditorBorderWidth = new Thickness(4);
}

The foremen stopped missing critical-fault entries. The border did the work.

The same WPF HTML Editor with EditorBorderWidth set to Thickness(0), embedded as a borderless summary view inside an already-bordered card
Last updated on May 12, 2026