# Add TextControl in XAML

> Declare the TXTextControl.WPF namespace, add a TextControl in XAML, set ViewMode and DisplayColors, bind ZoomFactor, handle Loaded and Changed, or use code.

- **Product:** TX Text Control .NET for WPF
- **Section:** Documentation
- **Kind:** Topic
- **Path:** TX Text Control .NET for WPF > Getting Started > Document Editor > Add TextControl in XAML
- **3170 words**
- **Web URL:** https://docs.textcontrol.com/tx-text-control-dotnet-wpf/getting-started/document-editor/xaml/
- **LLMs URL:** https://docs.textcontrol.com/tx-text-control-dotnet-wpf/getting-started/document-editor/xaml/llms.txt
- **LLMs-Full URL:** https://docs.textcontrol.com/tx-text-control-dotnet-wpf/getting-started/document-editor/xaml/llms-full.txt

---

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](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/getting-started/document-editor/first-application/llms-full.txt), 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:

```xml
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](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/installation/xaml-namespaces/llms-full.txt) 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:

```xml
<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](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/getting-started/document-editor/rulers-toolbars/llms-full.txt) and [Create a WPF Ribbon Application](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/getting-started/document-editor/ribbon/llms-full.txt) show them in a window.

### Set Properties and Events in XAML

Attributes of the element set the properties of the [TextControl](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/llms-full.txt) 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:

```xml
<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](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/viewmode-property/llms-full.txt) `PageView` shows the pages with gaps between them on a background. XAML converts the text `PageView` into the value of the enumeration.
- [HideSelection](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/hideselection-property/llms-full.txt) set to `False` keeps the selected text highlighted while another control, such as the slider, has the focus.
- [DisplayColors](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/displaycolors-property/llms-full.txt) takes a [TextControlColors](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrolcolors/llms-full.txt) object. Its [DesktopColor](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrolcolors/desktopcolor-property/llms-full.txt) is the color of the area around the pages.
- [ZoomFactor](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/zoomfactor-property/llms-full.txt) 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](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/changed-event/llms-full.txt) 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*:

```csharp
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](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/troubleshooting/initialization/llms-full.txt).
- [Selection](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/reference/txtextcontrol-wpf/textcontrol/selection-property/llms-full.txt) 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`:

```xml
<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:

```csharp
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](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/integration/controls-in-code/llms-full.txt) goes further.

### Next Steps

- [Connect Rulers, Toolbars, and a Status Bar](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/getting-started/document-editor/rulers-toolbars/llms-full.txt): the bars around the editor, declared in XAML.
- [Create a WPF Ribbon Application](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/getting-started/document-editor/ribbon/llms-full.txt): a `RibbonWindow` with the ribbon tabs of TX Text Control.
- [XAML Integration](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/integration/xaml/llms-full.txt): styles, resources and more XAML techniques.
- [Data Binding](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/integration/data-binding/llms-full.txt): bind the editor's properties to your view models.

---

## Nearby

- **Previous:** [Create a .NET Framework Application](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/getting-started/document-editor/dotnet-framework/llms-full.txt)
- **Next:** [Connect Rulers, Toolbars, and a Status Bar](https://docs.textcontrol.com/tx-text-control-dotnet-wpf/getting-started/document-editor/rulers-toolbars/llms-full.txt)