Building a Custom Toolbar for the WPF HTML Editor

The WPF HTML Editor ships with a full WYSIWYG toolbar out of the box, but not every embedded scenario needs all of it. Some embedded scenarios, for example a small notes field inside a form, call for a minimal toolbar rather than the full WYSIWYG toolbar: a handful of commands (for example Bold, Italic, Bullet List, and Hyperlink), styled to match the height and accent color of the surrounding form, with everything else hidden. This page shows how to build that toolbar yourself in code, choosing exactly which commands appear and how they are styled.

WpfHtmlEditor exposes its built-in toolbars through the public Toolbar1 and Toolbar2 properties, so you can collapse them, and every individual factory button through editor.ToolbarItemOverrider.ToolbarItems, so you can re-parent just the ones you need into your own toolbar.

Define your own ToolBar directly above the editing surface, sized to your own design:

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition Height="Auto" />

        <RowDefinition Height="*" />

    </Grid.RowDefinitions>

    <ToolBar x:Name="CompactToolbar" Grid.Row="0" Height="28"

             Background="{StaticResource Form.Accent}" />

    <wpfHtmlEditor:WpfHtmlEditor x:Name="NotesEditor" Grid.Row="1"

                                 Loaded="NotesEditor_OnLoaded" />

</Grid>

In the Loaded handler, collapse both built-in toolbars, then move only the buttons you need into your custom toolbar:

private void NotesEditor_OnLoaded(object sender, RoutedEventArgs e)
{
    NotesEditor.Toolbar1.Visibility = Visibility.Collapsed;
    NotesEditor.Toolbar2.Visibility = Visibility.Collapsed;
    var items = NotesEditor.ToolbarItemOverrider.ToolbarItems;
    Adopt(items.Bold);
    Adopt(items.Italic);
    Adopt(items.UnOrderedList);
    Adopt(items.Hyperlink);
}

private void Adopt(Control factoryControl)
{
    if (factoryControl.Parent is ItemsControl previousHost)
        previousHost.Items.Remove(factoryControl);
    CompactToolbar.Items.Add(factoryControl);
}

Private Sub NotesEditor_OnLoaded(sender As Object, e As RoutedEventArgs)
    NotesEditor.Toolbar1.Visibility = Visibility.Collapsed
    NotesEditor.Toolbar2.Visibility = Visibility.Collapsed
    Dim items = NotesEditor.ToolbarItemOverrider.ToolbarItems
    Adopt(items.Bold)
    Adopt(items.Italic)
    Adopt(items.UnOrderedList)
    Adopt(items.Hyperlink)
End Sub

Private Sub Adopt(factoryControl As Control)
    Dim previousHost As ItemsControl = Nothing
    If CSharpImpl.__Assign(previousHost, TryCast(factoryControl.Parent, ItemsControl)) IsNot Nothing Then previousHost.Items.Remove(factoryControl)
    CompactToolbar.Items.Add(factoryControl)
End Sub

Private Class CSharpImpl
    <System.Obsolete("Please refactor calling code to use normal Visual Basic assignment")>
    Shared Function __Assign(Of T)(ByRef target As T, value As T) As T
        target = value
        Return value
    End Function

The moved controls are the actual factory ToggleButton and Button instances, not copies. Every click handler, tooltip, and context-sensitive state indicator the editor maintains internally keeps working: when the caret sits inside bold text, the re-parented Bold toggle still lights up. Only the visual container changes; the wiring does not.

This pattern works for any embedded-toolbar scenario, no matter how many commands you keep. Summary:

• editor.Toolbar1.Visibility and editor.Toolbar2.Visibility hide the built-in toolbar strips.
• editor.ToolbarItemOverrider.ToolbarItems exposes every factory button so you can re-parent it into your own ToolBar.
• Re-parented factory buttons keep their click handling and context-sensitive state intact.