Tutorial: Starting with Microsoft Visual Studio

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.

Image

The source code for this example is contained in the following directories:

  • %USERPROFILE%\My Documents\TX Text Control 29.0.NET for WPF\Samples\WPF\VB.NET\Simple
  • %USERPROFILE%\My Documents\TX Text Control 29.0.NET for WPF\Samples\WPF\CSharp\Simple

Used TX Text Control controls:

  • TXTextControl.WPF.TextControl
  • TXTextControl.WPF.ButtonBar
  • TXTextControl.WPF.RulerBar
  • TXTextControl.WPF.StatusBar

Relevant API Links

Creating the Project

Assuming that you have already run the TX Text Control installation program, start Visual Studio .NET and create a new project. Select either Visual Basic or Visual C# as the project type and WPF Application as the template.

Image

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

Image

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

Double-click the ButtonBar in the toolbox to add it to the Window. Repeat this for the RulerBar, StatusBar, a second RulerBar and finally TextControl. The XAML should look like this:

Image

Visual Studio 2008 users: 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.

Image

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

Image

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

Image

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:

Adding a Menu Bar

The last step is to add a menu strip to the Window. Switch back to the Design/XAML view. In the toolbox, look for the Menu control in the Controls category and double-click the icon 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:

Image

Instead of adding the menu entries using the Properties window, the entries 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 Navigate to Event Handler from the opened context menu. This opens the code view of the Window.

Image

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 Sub

Repeat 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.