Getting Started with WPF Syntax Editor

18 Nov 20187 minutes to read

This section explains how to add and configure the Syntax Editor (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 Syntax Editor

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 Syntax Editor 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 Syntax Editor 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 Syntax Editor 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.

    using Syncfusion.Windows.Edit;

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

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

Adding Syntax Editor 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. Syntax Editor 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. Syntax Editor 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 load a file into the editor. The following code example shows how to set the DocumentSource property to open a file.

<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 of EditControl saves the content of the Syntax Editor to a file. It supports saving files for all built-in languages, supported file formats, 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. Syntax Editor 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