Tutorial: Getting Started with WPF (.NET 5 and better)

TX Text Control is a royalty-free, fully programmable rich edit control that offers developers a broad range of word and document processing features in a reusable component designed for Visual Studio. It provides comprehensive text formatting, powerful mail merge features and all word processing key concepts such as table support, images, headers and footers and page sections.

Creating the Project

1. Open Visual Studio 2022 and create a new project. Select C# or Visual Basic from the Languages drop-down list, Windows from the Platform list and Desktop as the Project Type. Find the project template WPF App and confirm with Next.

2. Specify a project name confirm with Next.

3. Select your preferred Framework version such as .NET 6 (Long-term support) and confirm with Create.

Adding Text Control

1. Select the project in the Solution Explorer and click Project -> Manage NuGet Packages... from the main menu.

2. Select Text Control Offline Packages as the Package source and click Browse.

3. Select TXTextControl.TextControl.WPF.SDK and click Install.

4. In the XAML view, replace the Grid with a DockPanel control as shown in the below screenshot:

In the next steps, the order in which the controls are added to the Window is important.

Double-click the ButtonBarin the toolbox to add it to the Window. For the first element, you will receive a warning to restart the designer. Click OK to confirm.

Select Build Solution from the Build main menu.

Make sure that the Window is selected and not the inserted ButtonBar before adding the following elements.

5. Repeat this for the RulerBar, StatusBar, a second RulerBar and finally TextControl.

6. In the XAML, remove the Height and the Width properties for all added elements.

7. Name all elements according to the following screenshot: buttonBar1, rulerBar1, statusBar, rulerBar2 and textControl1.

8. Select the secondly added Ruler Bar rulerBar2 using the mouse in the Design view to change the properties in the Properties window.Browse for the DockPanel.Dock property and change it to Left.

Additionally, set the HorizontalAlignment to Left and theVerticalAlignment to Stretch. The Design view should look like this:

9. Now, the controls must be connected. Therefore, select textControl1 to open it'sproperties in the Properties window of Visual Studio. First, look for the ButtonBarproperty and type in the name of the added Button Bar: buttonBar1.

Set the RulerBar property to rulerBar1, StatusBar to statusBar1 and VerticalRulerBar to rulerBar2.

10. In the XAML, add the Loaded="textControl1_Loaded" event handler to the TextControl element as a parameter, so that the line looks like this:

• XAML

​<WPF:TextControl Name="textControl1" Loaded="textControl1_Loaded"
    ButtonBar="buttonBar1" StatusBar="statusBar1" RulerBar="rulerBar1" VerticalRulerBar="rulerBar2"/>

Right-click on textControl1_Loaded and choose Go To Definition from the opened context menu. Add the following code to the event handler:

• C#
• VB.NET

​private void textControl1_Loaded(object sender, RoutedEventArgs e)
{
    textControl1.Focus();
}

​private void textControl1_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
{
    TextControl1.Focus
}

Now, press F5 to compile and start the application.

Adding a Menu Bar

1. The last step is to add a menu strip to the Window. Switch back to the Design/XAML view. In the toolbox, look for theMenu control in the Controls category and double-click theicon to insert it to the current Window. In the Properties window, change the DockPanel.Dock property to Top.

2. In the XAML, re-arrange the elements, so that the menu is the first element in the DockPanel and remove the Width and Height properties:

Instead of adding the menu entries using the Properties window, theentries are added in the XAML directly which is much faster. Replace the menu element with the following XAML code:

• XAML

​<Menu Name="menu1" DockPanel.Dock="Top">
 <MenuItem Header="_File">
  <MenuItem Header="Load..." Click="MenuItemLoad_Click" />
  <MenuItem Header="Save..." Click="MenuItemSave_Click" />
  <Separator />
  <MenuItem Header="Exit" Click="MenuItemExit_Click" />
 </MenuItem>
 <MenuItem Header="_Edit">
  <MenuItem Header="Cut" Click="MenuItemCut_Click" />
  <MenuItem Header="Copy" Click="MenuItemCopy_Click" />
  <MenuItem Header="Paste" Click="MenuItemPaste_Click" />
 </MenuItem>
 <MenuItem Header="_Format">
  <MenuItem Header="Character..." Click="MenuItemCharacter_Click" />
  <MenuItem Header="Paragraph..." Click="MenuItemParagraph_Click" />
 </MenuItem>
</Menu>

In the first XAML menu element Load..., right-click MenuItemLoad_Click and choose Go To Definition from the opened context menu. This opens the code view of the Window.

Add the following code, so that the complete method looks like this:

• C#
• VB.NET

​private void MenuItemLoad_Click(object sender, RoutedEventArgs e)
{
    textControl1.Load();
}

​Private Sub MenuItemLoad_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    TextControl1.Load
End Sub

Repeat this step for all menu items and add the following code to the code view:

• C#
• VB.NET

​private void MenuItemSave_Click(object sender, RoutedEventArgs e)
{
    textControl1.Save();
}

private void MenuItemExit_Click(object sender, RoutedEventArgs e)
{
    this.Close();
}

private void MenuItemCut_Click(object sender, RoutedEventArgs e)
{
    textControl1.Cut();
}

private void MenuItemCopy_Click(object sender, RoutedEventArgs e)
{
    textControl1.Copy();
}

private void MenuItemPaste_Click(object sender, RoutedEventArgs e)
{
    textControl1.Paste();
}

private void MenuItemCharacter_Click(object sender, RoutedEventArgs e)
{
    textControl1.FontDialog();
}

private void MenuItemParagraph_Click(object sender, RoutedEventArgs e)
{
    textControl1.ParagraphFormatDialog();
}

​Private Sub MenuItemSave_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
{
    TextControl1.Save
}

Private Sub MenuItemExit_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
{
    Me.Close
}

Private Sub MenuItemCut_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
{
    TextControl1.Cut
}

Private Sub MenuItemCopy_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
{
    TextControl1.Copy
}

Private Sub MenuItemPaste_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
{
    TextControl1.Paste
}

Private Sub MenuItemCharacter_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
{
    TextControl1.FontDialog
}

Private Sub MenuItemParagraph_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
{
    TextControl1.ParagraphFormatDialog
}

Press F5 to start the project.