Driving the WPF HTML Editor from Your Own UI Controls

Femi is rebuilding an internal knowledge-base authoring app at a Lagos fintech. The old WinForms version is being retired, and his replacement is a WPF app skinned with MahApps.Metro - dark theme, AppBar buttons, the works. Every other panel in his app already follows the AppBar convention: flat circular icons across the top, no traditional toolbars anywhere. The HTML editor at the centre of the screen needs to fit in. A second toolbar floating above the editing surface would scream out of place.

Femi's goal is straightforward: hide both built-in editor toolbars completely, then wire his own AppBar buttons to the same actions. He still wants the full set of dialogs - image picker, hyperlink, color, symbol, table - because his content authors rely on them. He just doesn't want the factory buttons themselves.

The first part is easy. In the editor's Loaded event, Femi collapses both built-in toolbars. The editing surface, footer, context menus, and dialogs remain fully functional - only the top strips disappear.

private void KbEditor_OnLoaded(object sender, RoutedEventArgs e)

{

    KbEditor.Toolbar1.Visibility = Visibility.Collapsed;

    KbEditor.Toolbar2.Visibility = Visibility.Collapsed;

}

Now for the second part. Femi could call into the editor's formatting and content services directly - Formatting.Bold(), Content.InsertHtml(...) - but for commands like Insert Image, Insert Hyperlink, or Symbol, the factory click handler does a lot more than just call a service: it opens a dialog, listens for the dialog's events, and writes the result back into the document. He doesn't want to recreate that plumbing.

Reading the API reference he finds that ToolbarItemOverrider exposes a public On...ButtonClicked method for every command. Calling those methods runs exactly the same code path as the built-in click. He routes each of his AppBar buttons straight through them.

private void Bold_Click(object sender, RoutedEventArgs e) =

    KbEditor.ToolbarItemOverrider.OnBoldButtonClicked(sender, e);



private void Italic_Click(object sender, RoutedEventArgs e) =

    KbEditor.ToolbarItemOverrider.OnItalicButtonClicked(sender, e);



private void InsertImage_Click(object sender, RoutedEventArgs e) =

    KbEditor.ToolbarItemOverrider.OnImageButtonClicked(sender, e);



private void InsertHyperlink_Click(object sender, RoutedEventArgs e) =

    KbEditor.ToolbarItemOverrider.OnHyperLinkButtonClicked(sender, e);



private void InsertTable_Click(object sender, RoutedEventArgs e) =

    KbEditor.ToolbarItemOverrider.OnTableInsertButtonClicked(sender, e);



private void InsertSymbol_Click(object sender, RoutedEventArgs e) =

    KbEditor.ToolbarItemOverrider.OnSymbolInsertButtonClicked(sender, e);

When the content author clicks his AppBar image icon, the editor's usual image dialog appears, the same one that would appear if she had clicked the factory button - just driven from a MahApps Metro button instead. The image picker still validates the URL, still respects the editor's BaseUrl for relative paths, still fires the HtmlChanged event when the image lands.

The overrider methods are deliberately broad. Femi has the full set at his disposal: OnNewButtonClicked, OnOpenButtonClicked, OnSaveButtonClicked, OnCutButtonClicked, OnCopyButtonClicked, OnPasteButtonClicked, OnPasteFromMsWordButtonClicked, OnUndoButtonClicked, OnRedoButtonClicked, OnPrintButtonClicked, OnBoldButtonClicked, OnItalicButtonClicked, OnUnderlineButtonClicked, OnStrikeThroughButtonClicked, OnSuperScriptButtonClicked, OnSubscriptButtonClicked, OnAlignLeftButtonClicked, OnAlignCenterButtonClicked, OnAlignRightButtonClicked, OnOutdentButtonClicked, OnIndentButtonClicked, OnOrderedListButtonClicked, OnUnOrderedListButtonClicked, OnHyperLinkButtonClicked, OnImageButtonClicked, OnYouTubeVideoInsertButtonClicked, OnTableInsertButtonClicked, OnSymbolInsertButtonClicked, OnHorizontalRuleButtonClicked, OnFormatResetButtonClicked, OnBodyStyleButtonClicked, OnFontForeColorButtonClicked, OnTextHighlightColorButtonClicked, OnSearchButtonClicked, and OnCheckSpellingButtonClicked.

The first content author Femi hands the build to has no idea the editor used to come with its own toolbar. To her, the dialogs feel like they have always belonged to his AppBar.