How to edit XML using WPF EditControl (Syntax Editor)?
EditControl can be used as an advance notepad with features such as formatting, code editing, and more. EditControl supports languages such as C#, VB, Java, JScript, VBScript, HTML, C, PowerShell, Delphi, SQL, XAML, and XML. This article explains how to create an EditControl and utilize it as a WPF XML Editor control for modifying XML tags and contents.
Steps to create WPF Editor control
EditControl can be added in our application instantly using NuGet package. The NuGet Package Manager can be used to search and install NuGet packages in the Visual Studio IDE. To install EditControl package, please follow the below steps.
- Right-click on the project or solution in the Solution Explorer window, and choose Manage NuGet Packages…
- Search and install the Syncfusion.Edit.WPF NuGet package as a reference to the application from nuget.org.
- Include the Syncfusion namespaces to access controls from the Syncfusion.Edit.WPF assembly.
XAML:
<Window x:Class="EditControlDemo.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion=="http://schemas.syncfusion.com/wpf" xmlns:skin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF" skin:SfSkinManager.VisualStyle="Office2016Colorful" Title="MainWindow" Height="450" Width="800"> <Grid> </Grid> </Window>
- The EditControl can be added to the application as shown in the below code sample.
XAML:
<Window x:Class="EditControlDemo.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion=="http://schemas.syncfusion.com/wpf" xmlns:skin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF" skin:SfSkinManager.VisualStyle="Office2016Colorful" Title="MainWindow" Height="450" Width="800"> <Grid> <syncfusion:EditControl x:Name="editControl1" BorderBrush="Black" BorderThickness="1" Background="White" Foreground="Black" HorizontalAlignment="Left" /> </Grid> </Window>
Configuring as WPF XML Editor control
The DocumentLanguage property is used to set language for the text in EditControl. Syntax highlighting and outlining of the text in EditControl are performed based on the language set using this property.
XAML:
<Window x:Class="EditControlDemo.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion=="http://schemas.syncfusion.com/wpf" xmlns:skin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF" skin:SfSkinManager.VisualStyle="Office2016Colorful" Title="MainWindow" Height="450" Width="800"> <Grid> <syncfusion:EditControl x:Name="editControl1" BorderBrush="Black" BorderThickness="1" DocumentLanguage="XML" Background="White" Foreground="Black" HorizontalAlignment="Left" /> </Grid> </Window>
C#:
this.editControl1.DocumentLanguage = Syncfusion.Windows.Edit.Languages.XML;
VB:
Me.editControl1.DocumentLanguage = Syncfusion.Windows.Edit.Languages.XML
Loading XML file into WPF XML Editor control
User can load XML file in EditControl in two ways as mentioned below.
- Using the method LoadFile() in the code-behind, it helps to open a file in the EditControl.
C#:
this.editControl1.LoadFile(@"..//..//Test1.xml");
VB:
Me.editControl1.LoadFile("..//..//Test1.xml")
- While using the EditControl at runtime, press "Ctrl + O" keys and choose an XML file from the file explorer. Also, the user can use "File -> Open" option to do the same.
Customizing XML tags and contents:
The color codes for the XML tags and contents will be set in this section. To do so, create a new class inherited from MarkupLanguageBase class from EditControl and set appropriate values to the following properties: Name, FileExtension and ApplyColoring.
C#:
/// <summary>
/// XML language class contains implementations related to custom language implementations
/// </summary>
public class XMLLanguage : MarkupLanguageBase
{
/// <summary>
/// Initializes a new instance of the <see
/// cref="T:XMLLanguage">XMLLangauge</see> class.
/// </summary>
/// <param name="control">represents the EditControl to which to which this instance
/// has to be hooked</param>
public XMLLanguage(EditControl control)
: base(control)
{
this.Name = "XML";
this.FileExtension = "xml";
this.ApplyColoring = true;
this.TextForeground = Brushes.Brown;
}
}
VB:
Public Class XMLLanguage Inherits MarkupLanguageBase Public Sub New(ByVal control As EditControl) MyBase.New(control) Me.Name = "XML" Me.FileExtension = "xml" Me.ApplyColoring = True Me.TextForeground = Brushes.Brown End Sub End Class
The EditControl has LexemCollection and FormatCollection to support an XML file loaded into the Editor control. These classes define color codes for each Lexem and Format. Using these notations, the end user can customize the color for each keyword, operator, comment format, custom format, etc.
XAML:
<Window x:Class="EditControlDemo.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:syncfusion="http://schemas.syncfusion.com/wpf"
xmlns:lib="clr-namespace:System;assembly=mscorlib"
xmlns:skin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF"
skin:SfSkinManager.VisualStyle="Office2016Colorful"
WindowStartupLocation="CenterScreen"
Title="EditControlDemo" Height="700" Width="700" Icon="App.ico" Style="{StaticResource windowStyle}">
<Window.Resources>
<ResourceDictionary>
<syncfusion:FormatsCollection x:Key="XMLFormats">
<syncfusion:EditFormats Foreground="Green" FormatName="CommentFormat" />
<syncfusion:EditFormats Foreground="Brown" FormatName="CustomFormat" />
<syncfusion:EditFormats Foreground="Blue" FormatName="OperatorFormat" />
<syncfusion:EditFormats Foreground="Red" FormatName="AttributeFormat" />
<syncfusion:EditFormats Foreground="Gray" FormatName="cdataformat" />
<syncfusion:EditFormats Foreground="Black" FormatName="QuotationSymbolInXml" />
<syncfusion:EditFormats Foreground="Black" FormatName="InbetweenTag" />
</syncfusion:FormatsCollection>
<syncfusion:LexemCollection x:Key="XMLLexems">
<syncfusion:Lexem StartText="<!--" ContainsEndText="True" EndText="-->" IsMultiline="True" IsRegex="true" LexemType="Comment" FormatName="CommentFormat"/>
<syncfusion:Lexem IsRegex="True" StartText="[</]+\w+[:\.\w]+[>]" EndText=">" IsMultiline="True" ContainsEndText="True" LexemType="Custom" FormatName="CustomFormat">
<syncfusion:Lexem.SubLexems>
<syncfusion:LexemCollection>
<syncfusion:Lexem StartText="<" LexemType="Operator" FormatName="OperatorFormat" />
<syncfusion:Lexem StartText="/" LexemType="Operator" FormatName="OperatorFormat" />
<syncfusion:Lexem StartText=":" LexemType="Operator" FormatName="OperatorFormat" />
<syncfusion:Lexem IsRegex="True" StartText=">" LexemType="Operator" FormatName="OperatorFormat" IsMultiline="False" />
</syncfusion:LexemCollection>
</syncfusion:Lexem.SubLexems>
</syncfusion:Lexem>
<syncfusion:Lexem StartText="<!\[CDATA\[" IsRegex="True" ContainsEndText="True" EndText="]]>" IsMultiline="True" LexemType="Comment" FormatName="cdataformat" />
</syncfusion:Lexem>
<syncfusion:Lexem IsRegex="True" StartText="\b[\w:.\[\]@,~!#$%'^*&\(\)\\-_+|'?{};]+=" ContainsEndText="False" IsMultiline="False" LexemType="Custom" FormatName="AttributeFormat">
<syncfusion:Lexem.SubLexems>
<syncfusion:LexemCollection>
<syncfusion:Lexem StartText=":" IsRegex="True" LexemType="Operator FormatName="OperatorFormat" />
<syncfusion:Lexem StartText="=" IsRegex="True" LexemType="Operator” FormatName="OperatorFormat" />
<syncfusion:Lexem StartText="[@\[\].~!#$,'%^*&\(\)\\-_+|'?;{}:]" IsRegex="True" LexemType="Custom" FormatName="QuotationSymbolInXml" />
<syncfusion:Lexem StartText="[\[\]]" IsRegex="True" LexemType="Custom" FormatName="OperatorFormat" />
</ syncfusion:LexemCollection>
</ syncfusion:Lexem.SubLexems>
</syncfusion:Lexem>
</ResourceDictionary>
</Window.Resources>
<Grid>
<syncfusion:EditControl x:Name="editControl1" BorderBrush="Black" BorderThickness="1" DocumentLanguage="Custom" Background="White" Foreground="Black" HorizontalAlignment="Left" />
</Grid>
</Window>
NOTE: Since the tag and content of the XML document are customized with user-defined color codes, the DocumentLanguage must be changed from "XML" to "Custom". |
Now bind the Lexem collection and Format collection in our XMLLanguage class using the Lexem and Formats properties. Finally, the XMLLanguage class object can be assigned to EditControl using the CustomLanguage property. Below code demonstrates the same.
C#:
/// <summary>
/// Window Constructor and events initialization
/// </summary>
public Window1()
{
InitializeComponent();
editControl1.DocumentLanguage = Languages.Custom;
editControl1.LoadFile("../../Products.xml");
XMLLanguage xmlLanguage = new XMLLanguage(Edit1);
xmlLanguage.Lexem = this.Resources["XMLLexems"] as LexemCollection;
xmlLanguage.Formats = this.Resources["XMLFormats"] as FormatsCollection;
//Binds the xml language in EditControl
editControl1.CustomLanguage = xmlLanguage;
}
VB:
Public Sub New()
InitializeComponent()
editControl1.DocumentLanguage = Languages.Custom
editControl1 .LoadFile("../../Products.xml")
Dim xmlLanguage As XMLLanguage = New XMLLanguage(Edit1)
xmlLanguage.Lexem = TryCast(Me.Resources("XMLLexems"), LexemCollection)
xmlLanguage.Formats = TryCast(Me.Resources("XMLFormats"), FormatsCollection)
'Binds the xml language in EditControl
editControl1.CustomLanguage = xmlLanguage
End Sub
Editing and saving XML file via WPF XML Editor control:
It is possible to edit the loaded XML file similar to the notepad. Click "Ctrl+S" to save the edited XML file, which will immediately save the document changes in the corresponding file. Assume that if the file is not previously available, the "Save As" dialog will be opened when pressing the "Ctrl+S" button, which helps to save the file at the desired location.
References:
For more information on EditControl, please either refer to the online documentation or download the sample for a better experience.
