Getting started with Syncfusion^® WPF RichTextBox

27 May 202624 minutes to read

Syncfusion ^® WPF RichTextBox (SfRichTextBoxAdv) enables you to create, edit, view, and print Word documents in WPF applications. This section guides you through the steps to get started and create a RichTextBox in a WPF application.

Create a RichTextBox in WPF using SfRichTextBoxAdv

In this walkthrough, you will create a WPF application that uses the SfRichTextBoxAdv control.

The steps below cover the essential tasks required to add and use the SfRichTextBoxAdv control in a WPF project.

Create a New WPF Project

1. Open Visual Studio.
2. Click Create a new project.
3. Select WPF App (.NET Framework) or WPF App (.NET Core).
4. Click Next.
5. Enter the project name and other required details.
6. Click Create.

Add SfRichTextBoxAdv dependencies

• NuGet packages
• Assemblies

Using NuGet Package Manager (UI):

1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
2. Search for Syncfusion.SfRichTextBoxAdv.Wpf and install the latest version.
3. Ensure the necessary dependencies are installed correctly, and the project is restored.

Using Package Manager Console:

Package Manager

Install-Package Syncfusion.SfRichTextBoxAdv.WPF

The following assembly references are required to use the SfRichTextBoxAdv control in your application.

• Syncfusion.SfRichTextBoxAdv.WPF
• Syncfusion.Compression.Base
• Syncfusion.OfficeChart.Base
• Syncfusion.Shared.WPF
• Syncfusion.DocIO.Base

NOTE

Starting with v16.2.0.41 (2018 Vol 2), if you reference Syncfusion® assemblies from trial setup or from the NuGet feed, you also have to add “Syncfusion.Licensing” assembly reference and include a license key in your project. Please refer to this link to know about registering Syncfusion® license key in your WPF application to use our components.

Add SfRichTextBoxAdv control

• Via Designer
• Via XAML
• Via C#

Open the Toolbox window and drag the SfRichTextBoxAdv control onto the Design view of the WPF application to add it to the user interface.

To add the control manually in XAML, follow these steps:

1. Import Syncfusion® WPF schema http://schemas.syncfusion.com/wpf or SfRichTextBoxAdv control namespace Syncfusion.Windows.Controls.RichTextBoxAdv in the XAML page.

2. Declare SfRichTextBoxAdv control in the XAML page.

MainWindow.xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
        x:Class="DocumentEditor.MainWindow"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAdv"/>
    </Grid>
</Window>

To add the control manually in C#, add the following code in *.xaml.cs

MainWindow.xaml.cs

using Syncfusion.Windows.Controls.RichTextBoxAdv;

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // Create an instance of SfRichTextBoxAdv control
        SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv();

        // Add the SfRichTextBoxAdv control to the container (Grid)
        Root_Grid.Children.Add(richTextBoxAdv);
    }
}

Run the Application

1. Press F5 or click Start in Visual Studio.
2. The application launches and displays the SfRichTextBoxAdv control.
3. Press Ctrl+O to open an existing document. The selected document will be displayed within the SfRichTextBoxAdv control, as shown below.

NOTE

View Sample in GitHub.

Add ribbon UI to SfRichTextBoxAdv

If you need a ribbon-based user interface, you can add SfRichTextRibbon with SfRichTextBoxAdv control. It enhances the user experience by organizing commands into tabs and groups, similar to Microsoft Word.

Add SfRichTextRibbon Dependencies

• NuGet packages
• Assemblies

Using NuGet Package Manager (UI)

1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
2. Search for Syncfusion.SfRichTextRibbon.Wpf and install the latest version.
3. Ensure the necessary dependencies are installed correctly, and the project is restored.

Using Package Manager Console

Package Manager

Install-Package Syncfusion.SfRichTextRibbon.WPF

NOTE

Installing the SfRichTextRibbon NuGet package will automatically install the required SfRichTextBoxAdv NuGet package as a dependency.

The following assembly references are required to use the SfRichTextRibbon control in your application.

• Syncfusion.SfRichTextRibbon.WPF
• Syncfusion.SfRichTextBoxAdv.WPF
• Syncfusion.Compression.Base
• Syncfusion.OfficeChart.Base
• Syncfusion.Shared.WPF
• Syncfusion.Tools.WPF
• Syncfusion.DocIO.Base

Add SfRichTextRibbon to the application

• Via Designer
• Via XAML
• Via C#

Open the Toolbox window and drag the SfRichTextRibbon and SfRichTextBoxAdv onto the Design view. Bind the SfRichTextBoxAdv as DataContext to the SfRichTextRibbon in XAML.

To add the control manually in XAML, follow these steps:

1. Import the Syncfusion® WPF schema http://schemas.syncfusion.com/wpf or SfRichTextRibbon control namespace Syncfusion.Windows.Controls.RichTextBoxAdv in XAML page.
2. To use the SfRichTextRibbon use the Syncfusion® RibbonWindow instead of Window.
3. Declare the SfRichTextRibbon and SfRichTextBoxAdv controls in XAML page.
4. To make an interaction between SfRichTextRibbon and SfRichTextBoxAdv, bind the SfRichTextBoxAdv as DataContext to the SfRichTextRibbon.

MainWindow.xaml

<syncfusion:RibbonWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                         xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
                         x:Class="DocumentEditor.MainWindow"
                         Title="MainWindow" Height="450" Width="800">
<Grid>
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <syncfusion:SfRichTextRibbon x:Name="richTextRibbon" SnapsToDevicePixels="True"  DataContext="{Binding ElementName=richTextBoxAdv}"/>
     <syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAdv" Background="#F1F1F1" Grid.Row="1"/>
 </Grid>
</syncfusion:RibbonWindow>

To add the control manually in C#, add the below code in *.xaml.cs

MainWindow.xaml.cs

using Syncfusion.Windows.Controls.RichTextBoxAdv;
using Syncfusion.Windows.Tools.Controls;

public partial class MainWindow : RibbonWindow
{
    public MainWindow()
    {
        InitializeComponent();

        // Create the root Grid container for layout
        Grid rootGrid = new Grid();

        // Define the first row (auto-sized for ribbon)
        RowDefinition row1 = new RowDefinition();
        row1.Height = GridLength.Auto;

        // Define the second row (fills remaining space for editor)
        RowDefinition row2 = new RowDefinition();
        row2.Height = new GridLength(1, GridUnitType.Star);

        // Add row definitions to the grid
        rootGrid.RowDefinitions.Add(row1);
        rootGrid.RowDefinitions.Add(row2);

        // Instantiate the rich text editor control
        SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv();

        // Set background color for better UI appearance
        richTextBoxAdv.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#F1F1F1"));

        // Instantiate the ribbon control
        SfRichTextRibbon richTextRibbon = new SfRichTextRibbon();

        // Enable pixel snapping for sharper rendering
        richTextRibbon.SnapsToDevicePixels = true;

        // Set the DataContext of the ribbon to the editor
        // This allows the ribbon to interact with the editor (binding commands)
        richTextRibbon.DataContext = richTextBoxAdv;

        // Position the ribbon in the first row
        Grid.SetRow(richTextRibbon, 0);

        // Position the editor in the second row
        Grid.SetRow(richTextBoxAdv, 1);

        // Add controls to the grid
        rootGrid.Children.Add(richTextRibbon);
        rootGrid.Children.Add(richTextBoxAdv);

        // Set the constructed grid as the content of the UserControl
        this.Content = rootGrid;
    }
}

NOTE

Prefer using SfRichTextRibbon within RibbonWindow in your application, since the backstage of Ribbon will be opened only when the ribbon is loaded under the RibbonWindow

Run the Application with Ribbon UI

1. Press F5 or click Start in Visual Studio.
2. The application will launch with the SfRichTextRibbon and SfRichTextBoxAdv controls.
3. Press Ctrl + O or use the Open option in the SfRichTextRibbon to open a document, which will be displayed in the SfRichTextBoxAdv control, with ribbon options available for editing and formatting, as shown below

NOTE

View Sample in GitHub.

Use SfRichTextBoxAdv as a standard RichTextBox

Use the following code to configure the SfRichTextBoxAdv control as a standard RichTextBox with rich text formatting options.

MainWindow.xaml

<Window x:Class="Standard_RichTextBox.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Standard_RichTextBox"
        mc:Ignorable="d"
        xmlns:RichTextBoxAdv="clr-namespace:Syncfusion.Windows.Controls.RichTextBoxAdv;assembly=Syncfusion.SfRichTextBoxAdv.Wpf"
        Title="SfRichTextBoxAdv" Height="450" Width="800">
   
    <Window.Resources>
        <RichTextBoxAdv:UnderlineToggleConverter x:Key="UnderlineToggleConverter"/>
        <RichTextBoxAdv:LeftAlignmentToggleConverter x:Key="LeftAlignmentToggleConverter"/>
        <RichTextBoxAdv:CenterAlignmentToggleConverter x:Key="CenterAlignmentToggleConverter"/>
        <RichTextBoxAdv:RightAlignmentToggleConverter x:Key="RightAlignmentToggleConverter"/>
        <RichTextBoxAdv:JustifyAlignmentToggleConverter x:Key="JustifyAlignmentToggleConverter"/>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Margin" Value="12 4"/>
        </Style>
        <Style TargetType="ToggleButton">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Margin" Value="12 4"/>
        </Style>
    </Window.Resources>


    <Grid Background="#F1F1F1">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid>
            <!-- Defines the data context as RichTextBoxAdv -->
            <StackPanel Orientation="Horizontal" DataContext="{Binding ElementName=richTextBoxAdv}">
                <!-- UI option to perform Undo/Redo using command binding -->
                <StackPanel Orientation="Horizontal">
                    <Button Command="RichTextBoxAdv:SfRichTextBoxAdv.UndoCommand" CommandTarget="{Binding ElementName=richTextBoxAdv}" Focusable="False">
                        <Image Source="\Images\Undo.png" Height="40" Width="40" />
                    </Button>
                    <Button Command="RichTextBoxAdv:SfRichTextBoxAdv.RedoCommand" CommandTarget="{Binding ElementName=richTextBoxAdv}" Focusable="False">
                        <Image Source="\Images\Redo.png" Height="40" Width="40" />
                    </Button>
                </StackPanel>
                <!-- UI option to perform Clipboard operations using command binding -->
                <Border Width="2" Height="46" Background="#1F1F1F"/>
                <StackPanel Orientation="Horizontal">
                    <Button Command="RichTextBoxAdv:SfRichTextBoxAdv.CutCommand" CommandTarget="{Binding ElementName=richTextBoxAdv}" Focusable="False">
                        <Image Source="\Images\Cut.png" Height="40" Width="40" />
                    </Button>
                    <Button Command="RichTextBoxAdv:SfRichTextBoxAdv.CopyCommand" CommandTarget="{Binding ElementName=richTextBoxAdv}" Focusable="False">
                        <Image Source="\Images\Copy.png" Height="40" Width="40" />
                    </Button>
                    <Button Command="RichTextBoxAdv:SfRichTextBoxAdv.PasteCommand" CommandTarget="{Binding ElementName=richTextBoxAdv}" Focusable="False">
                        <Image Source="\Images\Paste.png" Height="40" Width="40" />
                    </Button>
                </StackPanel>
                <!-- UI option to apply character formatting using property binding -->
                <Border Width="2" Height="46" Background="#1F1F1F"/>
                <StackPanel Orientation="Horizontal">
                    <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Bold}" Focusable="False">
                        <Image Source="\Images\Bold.png" Height="40" Width="40" />
                    </ToggleButton>
                    <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Italic}" Focusable="False">
                        <Image Source="\Images\Italic.png" Height="40" Width="40" />
                    </ToggleButton>
                    <ToggleButton IsChecked="{Binding Selection.CharacterFormat.Underline, Converter={StaticResource UnderlineToggleConverter}}" Focusable="False">
                        <Image Source="\Images\Underline.png" Height="40" Width="40" />
                    </ToggleButton>
                </StackPanel>
                <Border Width="2" Height="46" Background="#1F1F1F"/>
                <!-- UI option to apply paragraph formatting using property binding -->
                <StackPanel Orientation="Horizontal">
                    <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource LeftAlignmentToggleConverter}}" Focusable="False">
                        <Image Source="\Images\Left.png" Height="40" Width="40" />
                    </ToggleButton>
                    <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource CenterAlignmentToggleConverter}}" Focusable="False">
                        <Image Source="\Images\Center.png" Height="40" Width="40" />
                    </ToggleButton>
                    <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource RightAlignmentToggleConverter}}" Focusable="False">
                        <Image Source="\Images\Right.png" Height="40" Width="40" />
                    </ToggleButton>
                    <ToggleButton IsChecked="{Binding Selection.ParagraphFormat.TextAlignment, Converter={StaticResource JustifyAlignmentToggleConverter}}" Focusable="False">
                        <Image Source="\Images\Justify.png" Height="40" Width="40" />
                    </ToggleButton>
                </StackPanel>
            </StackPanel>
        </Grid>
        <RichTextBoxAdv:SfRichTextBoxAdv x:Name="richTextBoxAdv" Grid.Row="1" LayoutType="Continuous"  />
    </Grid>
</Window>

When the application is executed, the standard RichTextBox control is displayed as illustrated below.

NOTE

View Sample in GitHub.

Theme

In this walkthrough, you will apply a theme to the Syncfusion® WPF SfRichTextBoxAdv and SfRichTextRibbon controls.

The steps below outline the essential tasks required to configure and apply themes in a WPF application.

Add Theme Dependencies

• NuGet packages
• Assemblies

Using NuGet Package Manager (UI)

1. In Solution Explorer, right-click the project and choose Manage NuGet Packages.
2. In the Browse tab, search for and install the latest version of the following packages:
   • Syncfusion.SfRichTextBoxAdv.Wpf – Rich text editor control
   • Syncfusion.SfRichTextRibbon.Wpf – Ribbon UI for the editor
   • Syncfusion.Themes.Windows11Light.WPF – Windows 11 Light theme
3. Ensure all dependencies are installed successfully and the project is restored without errors.

Using Package Manager Console

Package Manager

Install-Package Syncfusion.SfRichTextBoxAdv.WPF
Install-Package Syncfusion.SfRichTextRibbon.WPF
Install-Package Syncfusion.Themes.Windows11Light.WPF

The following assemblies are required to enable theme support:

• Syncfusion.SfRichTextBoxAdv.WPF
• Syncfusion.SfRichTextRibbon.WPF
• Syncfusion.Compression.Base
• Syncfusion.OfficeChart.Base
• Syncfusion.Shared.WPF
• Syncfusion.Tools.WPF
• Syncfusion.DocIO.Base
• Syncfusion.Themes.Windows11Light.WPF
• Syncfusion.SfSkinManager.WPF

Available Themes

Syncfusion provides multiple built-in themes that can be applied based on application requirements.

In this section, the Windows 11 Light theme is used as an example to demonstrate how to apply a theme to the SfRichTextBoxAdv and SfRichTextRibbon controls.

To explore the complete list of available themes and learn how to create custom themes, refer to:

• Apply theme using SfSkinManager

• Create a custom theme using ThemeStudio

Apply Themes to SfRichTextBoxAdv and SfRichTextRibbon

• Via XAML
• Via C#

To add the controls and apply a theme manually in XAML, follow these steps:

Add SfRichTextBoxAdv and SfRichTextRibbon in XAML

1. Import the Syncfusion® WPF schema http://schemas.syncfusion.com/wpf or SfRichTextBoxAdv control namespace Syncfusion.Windows.Controls.RichTextBoxAdv in XAML page.
2. To use the SfRichTextRibbon use the Syncfusion® RibbonWindow instead of Window.
3. Declare the SfRichTextRibbon and SfRichTextBoxAdv controls in XAML page.
4. To make an interaction between SfRichTextRibbon and SfRichTextBoxAdv, bind the SfRichTextBoxAdv as DataContext to SfRichTextRibbon.

Apply Theme in XAML

1. Import Syncfusion® WPF schema http://schemas.syncfusion.com/wpf or the SfSkinManager namespace Syncfusion.SfSkinManager into a XAML page.
2. Define the theme using the SfSkinManager.Theme property.
3. Set the ThemeName value to Windows11Light or any preferred theme.
4. Ensure the theme is applied at the Window level so that it is inherited by all child controls.

MainWindow.xaml

<syncfusion:RibbonWindow xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                         xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
                         x:Class="Theme.MainWindow"
                         Title="MainWindow" Height="450" Width="800"
                         xmlns:syncfusionskin ="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
                         syncfusionskin:SfSkinManager.Theme="{syncfusionskin:SkinManagerExtension ThemeName=Windows11Light}">
<Grid>
     <Grid.RowDefinitions>
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="*"/>
     </Grid.RowDefinitions>
     <syncfusion:SfRichTextRibbon x:Name="richTextRibbon" SnapsToDevicePixels="True"  DataContext="{Binding ElementName=richTextBoxAdv}"/>
     <syncfusion:SfRichTextBoxAdv x:Name="richTextBoxAdv" Background="#F1F1F1" Grid.Row="1"/>
 </Grid>
</syncfusion:RibbonWindow>

NOTE

• The Windows 11 Light theme is used as the default theme. You can change the ThemeName based on your requirements.
• The applied theme is automatically inherited by all child controls.

To apply a theme programmatically in C#, add the below code in *.xaml.cs

MainWindow.xaml.cs

using Syncfusion.Windows.Controls.RichTextBoxAdv;
using Syncfusion.Windows.Tools.Controls;
using Syncfusion.SfSkinManager;

public partial class MainWindow : RibbonWindow
{
    public MainWindow()
    {
        InitializeComponent();

        // Create the root Grid container for layout
        Grid rootGrid = new Grid();

        // Define the first row (auto-sized for ribbon)
        RowDefinition row1 = new RowDefinition();
        row1.Height = GridLength.Auto;

        // Define the second row (fills remaining space for editor)
        RowDefinition row2 = new RowDefinition();
        row2.Height = new GridLength(1, GridUnitType.Star);

        // Add row definitions to the grid
        rootGrid.RowDefinitions.Add(row1);
        rootGrid.RowDefinitions.Add(row2);

        // Instantiate the rich text editor control
        SfRichTextBoxAdv richTextBoxAdv = new SfRichTextBoxAdv();

        // Set background color for better UI appearance
        richTextBoxAdv.Background = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#F1F1F1"));

        // Instantiate the ribbon control
        SfRichTextRibbon richTextRibbon = new SfRichTextRibbon();

        // Enable pixel snapping for sharper rendering
        richTextRibbon.SnapsToDevicePixels = true;

        // Set the DataContext of the ribbon to the editor
        // This allows the ribbon to interact with the editor (binding commands)
        richTextRibbon.DataContext = richTextBoxAdv;

        // Position the ribbon in the first row
        Grid.SetRow(richTextRibbon, 0);

        // Position the editor in the second row
        Grid.SetRow(richTextBoxAdv, 1);

        // Add controls to the grid
        rootGrid.Children.Add(richTextRibbon);
        rootGrid.Children.Add(richTextBoxAdv);

        // Set the constructed grid as the content of the UserControl
        this.Content = rootGrid;

        // Applies the Windows 11 Light theme to the window
        SfSkinManager.SetTheme(this, new Theme() { ThemeName = "Windows11Light" });
    }
}

Run the Application with Theme Applied

1. Press F5 or click Start in Visual Studio.
2. The application will launch with the SfRichTextRibbon and SfRichTextBoxAdv controls using the Windows 11 Light theme.
3. Press Ctrl + O or use the Open option in the SfRichTextRibbon to open a document.
4. The document is displayed in the editor, along with the themed ribbon and editor interface, as shown below.

NOTE

View Sample in GitHub.

See also

• Import and Export
• Selection
• Commands