Getting Started with WPF Syntax Editor (EditControl)

21 Jul 20267 minutes to read

This section explains how to add and configure the EditControl in a WPF application and get started with its basic features.

Assembly deployment

Refer to the Control Dependencies section for the list of assemblies or NuGet packages that need to be added as references to use the control in any application. The minimum NuGet package required is Syncfusion.Edit.WPF.

Refer to this documentation to find more details about installing NuGet packages in a WPF application.

Creating a simple application with EditControl

You can create a WPF application with EditControl as follows:

  1. Creating the project
  2. Adding the control via Designer
  3. Adding the control via XAML
  4. Adding the control via C#
  5. Loading a file into the document
  6. Syntax highlighting

Creating the project

  1. Open Visual Studio and click Create a new project.
  2. Select WPF App (.NET Framework) or (WPF Application for .NET/.NET Core) and click Next.
  3. Type a project name, choose a location, and click Create.

Adding EditControl via designer

The EditControl can be added to the application by dragging it from the toolbox and dropping it in the designer view. The following required assembly references will be added automatically:

  • Syncfusion.Edit.WPF
  • Syncfusion.GridCommon.WPF
  • Syncfusion.Shared.WPF
  • Syncfusion.Tools.WPF

Getting started by designer

Adding EditControl via XAML

To add the EditControl manually in XAML, follow these steps:

  1. Create a new WPF project in Visual Studio.

  2. Add the following required assembly references to the project:

     * Syncfusion.Edit.WPF

 * Syncfusion.GridCommon.WPF

 * Syncfusion.Shared.WPF

 * Syncfusion.Tools.WPF

  3. Import Syncfusion WPF schema http://schemas.syncfusion.com/wpf, and declare the EditControl in XAML page.

    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPF_ForDocumentation"
        xmlns:syncfusion="http://schemas.syncfusion.com/wpf" 
        x:Class="WPF_ForDocumentation.MainWindow"
        mc:Ignorable="d"
         Name="mainWindow"
        Title="MainWindow" Height="450" Width="400">
<Grid>
<syncfusion:EditControl x:Name="editControl1" BorderBrush="Black"
BorderThickness="1"
Background="White" Foreground="Black" 
HorizontalAlignment="Left" 
Height="300" Margin="0" 
VerticalAlignment="Top" Width="300"/>
   
</Grid>
</Window>

Adding EditControl via C#

To add the EditControl manually in C#, follow these steps:

  1. Create a new WPF application via Visual Studio.
  2. Add the following required assembly references to the project:
    • Syncfusion.Edit.WPF
    • Syncfusion.GridCommon.WPF
    • Syncfusion.Shared.WPF
    • Syncfusion.Tools.WPF

  3. Include the required namespace in your code-behind file.

     * Syncfusion.Edit.WPF

 * Syncfusion.GridCommon.WPF

 * Syncfusion.Shared.WPF

 * Syncfusion.Tools.WPF

  4. Include the required namespace.

    using Syncfusion.Windows.Edit;

  5. Create an instance of EditControl, and add it to the window.

    public MainWindow()
{
        InitializeComponent();
        //Initializing EditControl and setting necessary property values.
        EditControl editControl = new EditControl() {Height = 200, Width = 200, Background = Brushes.White, Foreground = Brushes.Black };
        this.Content = editControl;
}

Adding EditControl to Project

Loading a file into the document

This option helps to load a file into the EditControl. Essential Edit WPF facilitates users to create, open, modify, and save text files and programming language files. EditControl provides built-in support for a variety of text-based file formats such as txt, cs, vb, sql, xaml, and xml. It also allows you to specify custom file types in custom language configurations.

Essential Edit WPF facilitates users to create, open, modify and save text files and programming language files. EditControl provides built-in support for a variety of text based file formats such as txt, cs, VB, SQL, XAML, and XML. It also enables to specify custom file types in the custom language configurations.

Opening a file

The DocumentSource property of EditControl is used to specify the file to be opened with EditControl. The following code can be used to set the DocumentSource property of EditControl is used to specify the file to be opened with EditControl property.

<syncfusion:EditControl x:Name="editControl" DocumentSource="C:\Content.txt" ShowLineNumber="False" EnableOutlining="False"/>
editControl.DocumentSource = @"C:\Content.txt";
editControl.DocumentSource = "C:\Content.txt"

Opening a Document File

Files can also be opened using the LoadFile method. LoadFile method displays a FileOpenDialog to enable you to choose the file that needs to be opened in the EditControl.

editControl.LoadFile();
editControl.LoadFile()

LoadFile to open a document file

Saving the text to a file

The SaveFile method in the EditControl class is used to save the text in EditControl to a file. EditControl supports saving all built-in languages, file types, and custom language file types.

editControl.SaveFile();
editControl.SaveFile()

Saving the file

Syntax highlighting

The EditControl offers mostly used languages like C#, VB, XML, XAML, and SQL as built-in languages. It also provides support to configure a new custom language.

The EditControl has built-in syntax highlighting support for the following languages:

  • C
  • C Sharp
  • Custom
  • Delphi
  • HTML
  • Java
  • JScript
  • PowerShell
  • Text
  • VBScript
  • Visual Basic
  • XML
  • XAML
  • SQL

With the language support, EditControl enables users to create, open, modify, and save programming code from different file types. EditControl provides built-in syntax highlighting and outlining support for all supported languages, with SQL being an exception in outlining support. It also provides built-in IntelliSense support for all procedural languages such as C# and Visual Basic.

The DocumentLanguage property enables the user to select the language. DocumentLanguage is a Languages enum property with a default value of Text.

<syncfusion:EditControl x:Name="editControl" DocumentLanguage="CSharp" DocumentSource="C:\Source.cs" FontSize="13"/>
editControl.DocumentLanguage = Languages.CSharp;
editControl.DocumentLanguage = Languages.CSharp

Syntax highlighting

Theme

SyntaxEditor supports various built-in themes. Refer to the below links to apply themes for the SyntaxEditor,

Setting theme to WPF SyntaxEditor