Driving the WPF HTML Editor from Your Own UI Controls

The WPF HTML Editor ships with built-in toolbars, but they carry their own visual style, and that style will not always match the rest of your application - a MahApps.Metro AppBar with flat circular buttons, a ribbon, or any other custom toolbar design instead of the editor's built-in toolbars. Rather than fight the built-in look, you can hide the built-in toolbars completely and wire your own buttons to the same underlying actions, so the editor's formatting commands respond to controls that already match your UI. This page shows how to drive bold, italic, and the rest of the editor's actions from your own controls, and confirms that the built-in dialogs (image picker, hyperlink, color picker, symbol picker, table insert) keep working since only the toolbar buttons are replaced, not the underlying commands.

Hide both built-in toolbars in the editor's Loaded event. The editing surface, footer, context menus, and dialogs remain fully functional; only the toolbar strips disappear.

private void KbEditor_OnLoaded(object sender, RoutedEventArgs e)
{
    KbEditor.Toolbar1.Visibility = Visibility.Collapsed;
    KbEditor.Toolbar2.Visibility = Visibility.Collapsed;
}

Private Sub KbEditor_OnLoaded(sender As Object, e As RoutedEventArgs)
    KbEditor.Toolbar1.Visibility = Visibility.Collapsed
    KbEditor.Toolbar2.Visibility = Visibility.Collapsed
End Sub

For simple commands you can call the formatting and content services directly, such as Formatting.Bold() or Content.InsertHtml(...). Commands like Insert Image, Insert Hyperlink, or Symbol are different: the factory click handler opens a dialog, listens for its events, and writes the result back into the document. You do not need to reimplement that logic.

ToolbarItemOverrider exposes a public On...ButtonClicked method for every command. Calling one of these methods runs the exact same code path as clicking the built-in button, so route each custom button through the matching method.

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);

Clicking a custom button opens the same dialog the factory button would have opened, just triggered from your own control. The image picker still validates the URL, still respects the editor's BaseUrl for relative paths, and still fires the HtmlChanged event when the image is inserted.

The full set of overrider methods: 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.