Using the HTML editor in WPF application

SpiceLogic WinForms HTML Editor hosted in a WPF window via WindowsFormsHost, using modernized XAML namespace and assembly references.

This control is not only good for Windows Forms Applications, but also usable in WPF Applications.

First, we recommend you check our dedicated WPF HTML Editor Control - a separate product that is built natively for WPF and does not require WindowsFormsHost. If you are starting a new WPF project, that product is the recommended option.

However, if you already own this WinForms HTML Editor Control and want to reuse it inside a WPF application, you can do that by hosting the WinForms control via the WindowsFormsHost element. WindowsFormsHost is the standard WPF embedding technique for any WinForms control. A sample WPF application is included in the Sample projects folder of the downloaded package.

The XAML below shows the modern namespace and assembly name. The control type lives in the SpiceLogic.HtmlEditor.WinForms namespace, the UserOption and SpellCheckerOption types live in SpiceLogic.HtmlEditor.WinForms.Models.BOs.UserOptions, and all three ship in the SpiceLogic.HtmlEditor.WinForms assembly:

XAML editor showing the modernized SpiceLogic.HtmlEditor.WinForms namespace and assembly references required to use the WinForms HTML Editor inside a WPF application.

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:winForm="clr-namespace:SpiceLogic.HtmlEditor.WinForms;assembly=SpiceLogic.HtmlEditor.WinForms"
    xmlns:userOptions="clr-namespace:SpiceLogic.HtmlEditor.WinForms.Models.BOs.UserOptions;assembly=SpiceLogic.HtmlEditor.WinForms"
    x:Class="SpiceLogic.HtmlEditor.WPFSample.MainWindow"
    Title="MainWindow" Height="600" Width="715" Loaded="Window_Loaded">
    <Window.Resources>
        <winForm:WinFormHtmlEditor x:Key="formHTMLEditor" BodyHtml="Hello World" HtmlChanged="WinFormHtmlEditor_HtmlChanged">
            <winForm:WinFormHtmlEditor.SpellCheckOptions>
                <userOptions:SpellCheckerOption FireInlineSpellCheckingOnKeyStroke="True"/>
            </winForm:WinFormHtmlEditor.SpellCheckOptions>
            <winForm:WinFormHtmlEditor.Options>
                <userOptions:UserOption EnterKeyResponse="LineBreak" />
            </winForm:WinFormHtmlEditor.Options>
        </winForm:WinFormHtmlEditor>
    </Window.Resources>
    <StackPanel Orientation="Vertical">
        <Label Margin="20 0" Content="WinForms HTML Editor inside a WPF DockPanel" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <DockPanel Margin="20" Background="#9FBAAE" Visibility="Visible" HorizontalAlignment="Stretch">
            <WindowsFormsHost Height="400" Child="{StaticResource formHTMLEditor}" />
        </DockPanel>
        <Label Margin="10" x:Name="lblStatus" Content="Status" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Button Margin="10" Padding="4" Content="Set BodyHtml" HorizontalAlignment="Left" VerticalAlignment="Top" Width="85" Click="btnBodyHtmlSetter_Click"/>
    </StackPanel>
</Window>

In the Window Loaded event, call Focus() on the toolbar combo boxes so they do not retain the design-time pre-selection:

C# code-behind Window_Loaded event calling Focus on the FontName, FontSize, and TitleInsert toolbar combo boxes of the WinForms HTML Editor hosted in WPF.

C#VB.NET

private void Window_Loaded(object sender, System.Windows.RoutedEventArgs e)
{
    this.formHTMLEditor.ToolbarItemOverrider.ToolbarItems.FontName.Focus();
    this.formHTMLEditor.ToolbarItemOverrider.ToolbarItems.FontSize.Focus();
    this.formHTMLEditor.ToolbarItemOverrider.ToolbarItems.TitleInsert.Focus();
    this.formHTMLEditor.Focus();
}

Private Sub Window_Loaded(sender As Object, e As System.Windows.RoutedEventArgs)
    Me.formHTMLEditor.ToolbarItemOverrider.ToolbarItems.FontName.Focus()
    Me.formHTMLEditor.ToolbarItemOverrider.ToolbarItems.FontSize.Focus()
    Me.formHTMLEditor.ToolbarItemOverrider.ToolbarItems.TitleInsert.Focus()
    Me.formHTMLEditor.Focus()
End Sub

Once you use the provided XAML, the designer will show the editor as follows:

WPF XAML designer showing the SpiceLogic WinForms HTML Editor hosted through WindowsFormsHost rendered as an empty gray placeholder rectangle at design time, with a 'Set BodyHtml' button below.

Visual Studio XAML design surface previewing the SpiceLogic WinForms HTML Editor inside a WPF Window hosted by WindowsFormsHost.

and when you run the application, it will look like this:

Runtime view of a WPF application showing the SpiceLogic WinForms HTML Editor toolbar and body area rendered through WindowsFormsHost at run time.