Using the HTML editor in WPF application

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:

<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:

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

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

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