This chapter shows you how to create a small word processor from scratch with just a few lines of code. It will be able to load and save files, use the clipboard and will have dialog boxes for character and paragraph formatting, a ruler, a status bar and full keyboard and mouse interface.
The source code for this example is contained in the following directories:
Used TX Text Control controls:
Relevant API links:
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 (.NET Framework) and confirm with Next.
Specify a project name, select .NET Framework 4.8 from the Framework drop-down list and confirm with Create.
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.
Repeat this for the RulerBar, StatusBar, a second RulerBar and finally TextControl. The XAML should look like this:
In the XAML, remove the Height and the Width properties for all added elements.
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:
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.
In the XAML, add the Loaded="textControl1_Loaded" event handler to the TextControl element as a parameter, so that the line looks like this:
<my:TextControl Name="textControl1" Loaded="textControl1_Loaded"
ButtonBar="buttonBar1" StatusBar="statusBar1" RulerBar="rulerBar1" VerticalRulerBar="rulerBar2"/>Now, right-click on textControl1_Loaded and choose Navigate to Event Handler from the opened context menu. Add the following code to the event handler:
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:
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.
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:
<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:
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 SubRepeat this step for all menu items and add the following code to the code view:
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.