TX Text Control .NET for WPF

Add TextControl in XAML

Topic

You don't need the toolbox to put TX Text Control into a window: a namespace declaration and one element in the XAML are enough. Written by hand, the XAML also shows what the designer does for you, and it is where you set the editor's properties, connect its events and bind other WPF controls to it. The examples use the project of Create Your First WPF Application, with the package TXTextControl.TextControl.WPF.SDK installed.

Declare the Namespace

XAML maps element names to .NET classes through XML namespaces. The controls of TX Text Control are in the namespace TXTextControl.WPF of the assembly TXTextControl.WPF, so the Window element declares a prefix for them:

xmlns:WPF="clr-namespace:TXTextControl.WPF;assembly=TXTextControl.WPF"
  • clr-namespace names the .NET namespace, and assembly the assembly that contains it.
  • The prefix is your choice. This documentation and the samples of Text Control use WPF; the Simple sample uses my. Every element of TX Text Control in the window carries the prefix it declares, such as <WPF:TextControl />.

When you add a control from the toolbox, Visual Studio writes this declaration. Assemblies and XAML Namespaces lists the namespaces and assemblies of the product.

Add the Editor

The following MainWindow.xaml contains nothing but the editor. It fills the Grid of the window:

<Window x:Class="MyWPFApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:WPF="clr-namespace:TXTextControl.WPF;assembly=TXTextControl.WPF"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <WPF:TextControl x:Name="textControl1" />
    </Grid>
</Window>

x:Name creates the field textControl1 in the window class, so that the code-behind in MainWindow.xaml.cs can use the control. Name="textControl1" has the same effect for the TextControl, and the samples of Text Control use both forms. Build the project once after you edit the XAML: the XAML Designer then shows the editor.

The bars and ribbon tabs are declared the same way, as WPF:ButtonBar, WPF:RulerBar, WPF:StatusBar, WPF:Sidebar or WPF:RibbonFormattingTab. Connect Rulers, Toolbars, and a Status Bar and Create a WPF Ribbon Application show them in a window.

Set Properties and Events in XAML

Attributes of the element set the properties of the TextControl and attach handlers to its events. A property whose value is an object is set with a property element, such as WPF:TextControl.DisplayColors. The following window shows the editor in page view on a light gray background, keeps the selection visible when the editor loses the focus, and adds a slider that zooms the document:

<Window x:Class="MyWPFApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:WPF="clr-namespace:TXTextControl.WPF;assembly=TXTextControl.WPF"
        Title="MainWindow" Height="450" Width="800">
    <DockPanel>
        <Slider x:Name="zoomSlider" DockPanel.Dock="Bottom" Minimum="50" Maximum="200"
                Value="{Binding ElementName=textControl1, Path=ZoomFactor, Mode=TwoWay}" />
        <WPF:TextControl x:Name="textControl1"
                         ViewMode="PageView"
                         HideSelection="False"
                         Loaded="textControl1_Loaded"
                         Changed="textControl1_Changed">
            <WPF:TextControl.DisplayColors>
                <WPF:TextControlColors DesktopColor="#F5F6F7" />
            </WPF:TextControl.DisplayColors>
        </WPF:TextControl>
    </DockPanel>
</Window>

The XAML works as follows:

  • ViewMode PageView shows the pages with gaps between them on a background. XAML converts the text PageView into the value of the enumeration.
  • HideSelection set to False keeps the selected text highlighted while another control, such as the slider, has the focus.
  • DisplayColors takes a TextControlColors object. Its DesktopColor is the color of the area around the pages.
  • ZoomFactor is a dependency property, the kind of property WPF data binding works with. The Binding of the slider reads and sets the zoom factor in percent, in both directions.
  • Loaded is the WPF event that occurs when the control has been loaded into the window. Changed is an event of TX Text Control that occurs when the contents of the document change.

Handle the Events in the Code-Behind

The handlers named in the XAML are methods of the window class in MainWindow.xaml.cs:

using System;
using System.Windows;

namespace MyWPFApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void textControl1_Loaded(object sender, RoutedEventArgs e)
        {
            // The editor is ready: insert a first line and set the focus
            textControl1.Selection.Text = "Hello from XAML.";
            textControl1.Focus();
        }

        private void textControl1_Changed(object sender, EventArgs e)
        {
            // Mark the window title when the document has changed
            Title = "MainWindow*";
        }
    }
}
  • The Loaded handler is the place for code that works with the document when the window opens. In the constructor, the editor isn't ready yet; see Control Initialization.
  • Selection is the current selection or input position. Setting its Text inserts text there.
  • Changed uses the handler signature (object sender, EventArgs e) of .NET events; Loaded, as a WPF routed event, passes RoutedEventArgs.

Press F5. The window shows the page on a light gray background with the inserted line, and the slider below it zooms the document. Type a character, and an asterisk appears in the title.

Create the Editor in Code Instead

A TextControl is a WPF control like any other, so you can also create it in code and add it to a panel of the window. The following MainWindow.xaml contains an empty Grid named editorHost:

<Window x:Class="MyWPFApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="450" Width="800">
    <Grid x:Name="editorHost" />
</Window>

The constructor in MainWindow.xaml.cs creates the editor and adds it to the grid:

using System.Windows;
using TXTextControl;

namespace MyWPFApp
{
    public partial class MainWindow : Window
    {
        private readonly TXTextControl.WPF.TextControl textControl1;

        public MainWindow()
        {
            InitializeComponent();

            // Create the editor and add it to the grid of the window
            textControl1 = new TXTextControl.WPF.TextControl();
            textControl1.ViewMode = ViewMode.PageView;
            textControl1.Loaded += textControl1_Loaded;
            editorHost.Children.Add(textControl1);
        }

        private void textControl1_Loaded(object sender, RoutedEventArgs e)
        {
            textControl1.Selection.Text = "Hello from code.";
        }
    }
}

The class name is written in full, TXTextControl.WPF.TextControl, because the window uses no using directive for TXTextControl.WPF. The Loaded event works as in XAML. Creating and Configuring Controls in Code goes further.

Next Steps