Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 28 additions & 25 deletions Document-Processing/Word/Word-Processor/wpf/Getting-Started.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ description: Learn here all about getting started with Syncfusion WPF RichTextBo
platform: document-processing
control: SfRichTextBoxAdv
documentation: ug
keywords: getting started
keywords: getting started, docx editor
---

# Getting started with Syncfusion<sup>&reg;</sup> WPF RichTextBox
# Getting Started with Syncfusion<sup>&reg;</sup> WPF RichTextBox

[WPF RichTextBox](https://www.syncfusion.com/docx-editor-sdk/wpf-docx-editor) (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.

Expand All @@ -33,9 +33,11 @@ N> The **project name** is used as the default namespace (for example, in `x:Cla

- Select the **target framework**:
- For **.NET** → Click **Next** and choose the **latest supported .NET version**
- For **.NET Framework** → Select the required version in the same window
- For **.NET Framework** → Select **4.6.2 or above** in the same window
- Click **Create**

N> The control supports **.NET 8, .NET 9, .NET 10** and **.NET Framework 4.6.2 and above**.

### Add SfRichTextBoxAdv dependencies

{% tabcontents %}
Expand Down Expand Up @@ -74,7 +76,11 @@ The following assembly references are required to use the **SfRichTextBoxAdv** c

{% endtabcontents %}

N> Starting with v16.2.0.41 (2018 Vol 2), if you reference Syncfusion&reg; 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](https://help.syncfusion.com/common/essential-studio/licensing/overview) to know about registering Syncfusion&reg; license key in your WPF application to use our components.
N> A valid Syncfusion&reg; license key is required from **v16.2.0.41 (2018 Vol 2)** onwards.

- The required `Syncfusion.Licensing` assembly is installed automatically as a NuGet dependency — no separate reference is needed.
- If you are using the **Assemblies** installation, you must add a reference to `Syncfusion.Licensing.dll` in your project.
- Register the license key in the `App` constructor of `App.xaml.cs` before any Syncfusion control is initialized. For the exact `RegisterLicense` code, refer to [Register Syncfusion® License key in a WPF application](https://help.syncfusion.com/common/essential-studio/licensing/how-to-register-in-an-application#wpf).


### Add SfRichTextBoxAdv control
Expand Down Expand Up @@ -157,17 +163,19 @@ namespace DocumentEditor

### Run the Application

1. Press **F5** or click **Debug → Start Debugging** in Visual Studio.
N> Ensure you have registered the Syncfusion® license key in `App.xaml.cs` before running — see the [licensing note](#add-sfrichtextboxadv-dependencies) earlier on this page.

1. Press **F5** or click **Debug > Start Debugging** 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.
3. Press **Ctrl+O** to open an existing document. The selected document will be displayed within the SfRichTextBoxAdv control, as shown below.

![WPF SfRichTextBoxAdv Control](Getting-Started_images/wpf-sfrichtextboxadv-control.png)

N> [View Sample in GitHub](https://github.com/SyncfusionExamples/WPF-RichTextBox-Examples/tree/main/Samples/SfRichTextBoxAdv).

## 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.
If you need a ribbon-based user interface, you can add **SfRichTextRibbon** with the **SfRichTextBoxAdv** control. It enhances the user experience by organizing commands into tabs and groups, similar to Microsoft Word.

### Add SfRichTextRibbon Dependencies

Expand Down Expand Up @@ -216,19 +224,18 @@ The following assembly references are required to use the **SfRichTextRibbon** c

To use the **SfRichTextRibbon** control in a WPF application, the application must use **Syncfusion® RibbonWindow** instead of the default **Window**.

1. Import the **Syncfusion® WPF schema** `http://schemas.syncfusion.com/wpf` in the **MainWindow.xaml** file.
1. In **MainWindow.xaml**, rename the root element from `<Window>` to `<syncfusion:RibbonWindow>` and, if not already present, add the Syncfusion® WPF schema declaration `xmlns:syncfusion="http://schemas.syncfusion.com/wpf"` to the root element.

2. Replace the root element **Window** with **syncfusion:RibbonWindow** in the **MainWindow.xaml** file.

3. Additionally, in the *MainWindow.xaml.cs* file, change the base class of `MainWindow` from **Window** to **RibbonWindow** to enable full support for the **SfRichTextRibbon** control.
2. In *MainWindow.xaml.cs*, change the base class of `MainWindow` from **Window** to **RibbonWindow** to enable full support for the **SfRichTextRibbon** control.

### Add SfRichTextRibbon to the application

{% tabcontents %}

{% tabcontent Via Designer %}

Open the Toolbox window and drag the **SfRichTextRibbon** and **SfRichTextBoxAdv** onto the Design view. Bind the SfRichTextBoxAdv as DataContext to the SfRichTextRibbon in XAML.
1. Open the **Toolbox** window and drag the **SfRichTextRibbon** and **SfRichTextBoxAdv** controls onto the Design view of `MainWindow.xaml`.
2. Switch to the **XAML** view of `MainWindow.xaml` and bind the `SfRichTextBoxAdv` as the `DataContext` of the `SfRichTextRibbon`. For the exact binding syntax, see the **Via XAML** tab.

![Dragging SfRichTextRibbon Control from Toolbox](Getting-Started_images/wpf-sfrichtextribbon-dragfrom-toolbox.png)

Expand Down Expand Up @@ -314,8 +321,7 @@ namespace DocumentEditor
// 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)
// Bind the ribbon's commands to the editor instance
richTextRibbon.DataContext = richTextBoxAdv;

// Position the ribbon in the first row
Expand All @@ -328,7 +334,7 @@ namespace DocumentEditor
rootGrid.Children.Add(richTextRibbon);
rootGrid.Children.Add(richTextBoxAdv);

// Set the constructed grid as the content of the UserControl
// Set the constructed grid as the content of the RibbonWindow
this.Content = rootGrid;
}
}
Expand All @@ -340,11 +346,11 @@ namespace DocumentEditor

{% endtabcontents %}

N> 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`
N> Prefer using `SfRichTextRibbon` within `RibbonWindow` — the ribbon's **backstage view** (File tab options like New, Open, Save, Print) is only available when the ribbon is hosted in a `RibbonWindow`.

### Run the Application with Ribbon UI

1. Press **F5** or click **Debug Start Debugging** in Visual Studio.
1. Press **F5** or click **Debug > Start Debugging** 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

Expand Down Expand Up @@ -414,7 +420,7 @@ In this section, the **Windows 11 Light** theme is used as an example to demonst
To explore the complete list of available themes and learn how to create custom themes, refer to:

* [Apply theme using SfSkinManager](https://help.syncfusion.com/wpf/themes/skin-manager)

* [Create a custom theme using ThemeStudio](https://help.syncfusion.com/wpf/themes/theme-studio#creating-custom-theme)

### Apply Themes to SfRichTextBoxAdv and SfRichTextRibbon
Expand All @@ -427,9 +433,7 @@ To add the controls and apply a theme manually in XAML, follow these steps:

**Add SfRichTextBoxAdv and SfRichTextRibbon in XAML**

Refer to the following link for detailed instructions:

[Add SfRichTextBoxAdv and SfRichTextRibbon in XAML](https://help.syncfusion.com/document-processing/word/word-processor/wpf/getting-started?tabcontent=via-xaml#add-ribbon-ui-to-sfrichtextboxadv)
The XAML snippet below assumes both `SfRichTextBoxAdv` and `SfRichTextRibbon` are already declared in `MainWindow.xaml`, with the `SfRichTextBoxAdv` set as the ribbon's `DataContext`. For the full declaration, see the **Add SfRichTextRibbon to the application → Via XAML** section of this page.

**Apply Theme in XAML**

Expand Down Expand Up @@ -515,8 +519,7 @@ namespace DocumentEditor
// 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)
// Bind the ribbon's commands to the editor instance
richTextRibbon.DataContext = richTextBoxAdv;

// Position the ribbon in the first row
Expand All @@ -529,7 +532,7 @@ namespace DocumentEditor
rootGrid.Children.Add(richTextRibbon);
rootGrid.Children.Add(richTextBoxAdv);

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

// Applies the Windows 11 Light theme to the window
Expand All @@ -546,7 +549,7 @@ namespace DocumentEditor

### Run the Application with Theme Applied

1. Press **F5** or click **Debug Start Debugging** in Visual Studio.
1. Press **F5** or click **Debug > Start Debugging** 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.
Expand Down