How to view XML using WPF Edit control (Syntax Editor)?
WPF 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 Viewer control for viewing XML tags and contents.
Steps to create WPF Viewer 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 Viewer 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. Meanwhile to make the control behave like viewer alone, set the IsReadOnly property to "True".
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" IsReadOnly="True" 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 Viewer 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 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 Edit control has LexemCollection and FormatCollection to support XML file loaded into the Viewer 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" IsReadOnly="True" 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 collections and Format collections 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
References:
For more information on Edit control, please either link to the online documentation or download the sample for a better experience.
Conclusion
I hope you enjoyed learning about how to view XML using WPF Edit control (Syntax Editor).
You can refer to our WPF Syntax Editor feature tour page to know about its other groundbreaking feature representations and documentation, to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
