How to edit XML using WPF Edit control (Syntax Editor)?
Edit control can be used as an advance notepad with features such as formatting, code editing, and more. Edit control supports languages such as C#, VB, Java, JScript, VBScript, HTML, C, PowerShell, Delphi, SQL, XAML, and XML. This article explains about creating Edit control and utilizing the same as WPF XML Editor control for modifying XML tags and contents.
Steps to create WPF Editor control
Edit control 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 edit control 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 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 Edit control can be added to the application like 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 Edit control. Syntax highlighting and outlining of the text in Edit control 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 Edit control in two ways as mentioned below.
- Using the method LoadFile() at code-behind, it helps to open a file in the Edit control.
C#:
this.editControl1.LoadFile(@"..//..//Test1.xml");
VB:
Me.editControl1.LoadFile("..//..//Test1.xml")
- While using the Edit control at runtime, press "Ctrl + O" keys and choose an XML file from the file explorer. Also, 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 Edit control 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 Edit control 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 Edit control has LexemCollection and FormatCollection to support XML file loaded into the Editor control. These classes define color codes for each Lexem and Formats. Using these notations, end user can customize the color for each keywords, operators, 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 Edit control 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 Edit control, please either link to the online documentation or download the sample for a better experience.
