How to view XML using WPF Edit control (Syntax Editor)?
WPF EditControl can be used as an advanced 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 EditControl and utilize it as WPF XML Viewer control for viewing XML tags and contents.
Steps to create WPF Viewer control
EditControl can be added to your 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 steps below.
- 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 code sample below.
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 EditControl. Syntax highlighting and outlining of the text in EditControl 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 EditControl in two ways as mentioned below.
- Using the method LoadFile() at 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, 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 of the 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 XML file loaded into the Viewer control. These classes define color codes for each Lexem and Format. Using these notations, 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" 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 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
References:
For more information on EditControl, please either refer 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 EditControl (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!
