Click here to Skip to main content
15,179,627 members
Articles / Desktop Programming / WPF
Posted 6 Apr 2010


62 bookmarked

A Simple WPF XML Document Viewer Control

Rate me:
Please Sign up or sign in to vote.
4.96/5 (33 votes)
7 Apr 2010CPOL3 min read
This article introduces a simple XML document viewer control for WPF applications to display XML documents in a nicely formatted way.


This article introduces a simple XML document viewer control for WPF applications to display XML documents in a nicely formatted way.


In one of my recent WPF projects, I needed to display some XML documents in a formatted way similar to how Internet Explorer displays them. My first option was to use the WPF "WebBrowser" control. When I navigate the "WebBrowser" control to an XML file on the hard drive or some XML content on the web, it is displayed fine. But when I try to navigate the "WebBrowser" control to an in-memory XML string, the control fails to recognize that the content is XML and the display format is completely wrong. I will then need some other alternatives.

I need an XML document viewer control that displays the XML content in a formatted way, and I will need the control to take the XML content from a "System.Xml.XmlDocument" object, so I can dynamically generate the XML content and display it.

The XML document viewer control introduced in this article is inspired by Marco Zhou's blog. What I did is simply make the idea into an easier to use user control, and provide a demo application to show how the control is used.

The demo Visual Studio Solution that comes with this article has two .NET projects. One is the user control class library and the other is a simple WPF application to demonstrate how the control is used. The Visual Studio Solution is developed in Visual Studio 2008.

Overview of the Simple Visual Studio Solution

The Visual Studio Solution "XMLViewerDomo" has two .NET projects.


The "XMLViewer" project is a class library to create the XML document viewer control, and the "DemoApplication" project is a WPF application to demonstrate how the control is used.

The XML Document Viewer Control

The XML document viewer control is implemented in "Viewer.xaml":

<UserControl x:Class="XMLViewer.Viewer"
        <SolidColorBrush Color="Blue" x:Key="xmlValueBrush"/>
        <SolidColorBrush Color="Red" x:Key="xmAttributeBrush"/>
        <SolidColorBrush Color="DarkMagenta" x:Key="xmlTagBrush"/>
        <SolidColorBrush Color="Blue" x:Key="xmlMarkBrush"/>
        <DataTemplate x:Key="attributeTemplate">
            <StackPanel Orientation="Horizontal" 
                        Margin="3,0,0,0" HorizontalAlignment="Center">
                <TextBlock Text="{Binding Path=Name}" 
                           Foreground="{StaticResource xmAttributeBrush}"/>
                <TextBlock Text="=&quot;" 
                           Foreground="{StaticResource xmlMarkBrush}"/>
                <TextBlock Text="{Binding Path=Value}" 
                           Foreground="{StaticResource xmlValueBrush}"/>
                <TextBlock Text="&quot;" 
                           Foreground="{StaticResource xmlMarkBrush}"/>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="True"/>
        <HierarchicalDataTemplate x:Key="treeViewTemplate" 
                                  ItemsSource="{Binding XPath=child::node()}">
            <StackPanel Orientation="Horizontal" Margin="3,0,0,0" 
                <TextBlock Text="&lt;" HorizontalAlignment="Center" 
                           Foreground="{StaticResource xmlMarkBrush}" 
                <TextBlock Text="{Binding Path=Name}"
                    Foreground="{StaticResource xmlTagBrush}"/>
                    ItemTemplate="{StaticResource attributeTemplate}"
                    ItemsSource="{Binding Path=Attributes}"
                            <StackPanel Orientation="Horizontal"/>
                <TextBlock Text="&gt;" HorizontalAlignment="Center" 
                           Foreground="{StaticResource xmlMarkBrush}" 
                <DataTrigger Binding="{Binding NodeType}">
                    <Setter Property="Text" Value="{Binding InnerText}" 
                    <Setter Property="Foreground" Value="Blue" 
                    <Setter Property="Visibility" Value="Collapsed" 
                    <Setter Property="Visibility" Value="Collapsed" 
                <DataTrigger Binding="{Binding HasChildNodes}" Value="False">
                    <Setter Property="Text" Value="/&gt;" TargetName="endTag"/>
        <TreeView Grid.Row="2" Grid.ColumnSpan="2" Name="xmlTree" 
                  ItemTemplate="{StaticResource treeViewTemplate}"/>

The code-behind file for "Viewer.xaml" is the following:

using System.Windows.Controls;
using System.Windows.Data;
using System.Xml;
namespace XMLViewer
    /// <summary>
    /// Interaction logic for Viewer.xaml
    /// </summary>
    public partial class Viewer : UserControl
        private XmlDocument _xmldocument;
        public Viewer()
        public XmlDocument xmlDocument
            get { return _xmldocument; }
                _xmldocument = value;
        private void BindXMLDocument()
            if (_xmldocument == null)
                xmlTree.ItemsSource = null;
            XmlDataProvider provider = new XmlDataProvider();
            provider.Document = _xmldocument;
            Binding binding = new Binding();
            binding.Source = provider;
            binding.XPath = "child::node()";
            xmlTree.SetBinding(TreeView.ItemsSourceProperty, binding);

The Demo WPF Application "DemoApplication"

The main application window for the demo WPF application is implemented in the "XMLViewerDemoApplication.xaml":

<Window x:Class="DemoApplication.XMLViewerDemoApplication"
    FontFamily="Verdana" Icon="Images\icon_music.ico"
    Title="XMLViewer User Control Demonstration Application">
    <Grid Margin="10, 10, 10, 10">
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="5"/>
            <RowDefinition Height="*"/>
        <Grid Grid.Row="0">
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="5" />
            <TextBox Name="txtFilePath" IsReadOnly="True"
                     Grid.Column="0" HorizontalAlignment="Stretch" />
            <Button Margin="3, 0, 0, 0" Content="Browse..." 
                    Click="BrowseXmlFile" Grid.Column="1"/>
            <Button Margin="3, 0, 0, 0" Content="Clear" 
                    Click="ClearXmlFile" Grid.Column="2"/>
        <XMLViewer:Viewer x:Name="vXMLViwer" Grid.Row="2" />

The code-behind file for "XMLViewerDemoApplication.xaml" is the following:

using System.Windows;
using System.Xml;
namespace DemoApplication
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class XMLViewerDemoApplication : Window
        public XMLViewerDemoApplication()
        private void BrowseXmlFile(object sender, RoutedEventArgs e)
            Microsoft.Win32.OpenFileDialog dlg = new Microsoft.Win32.OpenFileDialog();
            dlg.CheckFileExists = true;
            dlg.Filter = "XML Files (*.xml)|*.xml|All Files(*.*)|*.*";
            dlg.Multiselect = false;
            if (dlg.ShowDialog() != true) { return; }
            XmlDocument XMLdoc = new XmlDocument();
            catch (XmlException)
                MessageBox.Show("The XML file is invalid");
            txtFilePath.Text = dlg.FileName;
            vXMLViwer.xmlDocument = XMLdoc;
        private void ClearXmlFile(object sender, RoutedEventArgs e)
            txtFilePath.Text = string.Empty;
            vXMLViwer.xmlDocument = null;

To demonstrate how the user control is used, what this WPF application does is to first let the user browse an XML file and load the XML file into a "System.Xml.XmlDocument" object. After the "XMLDodument" object is loaded, it is assigned to the "xmlDocument" property of the user control. If we want to clear the XML display from the user control, we can simply assign "null" to the "xmlDocument" property.

Run the Demo Application

Set the "DemoApplication" project as the "Startup" project, you can debug launch the demo application. Browse an XML file, the application will display the XML file in a nice format.


The above picture shows how the control displays a "Web.config" file for a web application. I included this "Web.config" file in the zip file coming with this article, but you can test with any valid XML files that you have in this application. Each node in the XML document can be expanded and collapsed independently and the content of the XML is properly colored.

Points of Interest

This article introduced a formatted XML document viewer WPF control. The control takes a "System.Xml.XmlDocument" object as the XML content. It is simple, flexible and easy to use.


This is the first revision of the article.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Dr. Song Li
United States United States
I have been working in the IT industry for some time. It is still exciting and I am still learning. I am a happy and honest person, and I want to be your friend.

Comments and Discussions

QuestionHow to display closing tag name also rather than showing /> Pin
Member 103156417-Jun-17 7:26
MemberMember 103156417-Jun-17 7:26 
QuestionJust great and simple ! Pin
EdwinEP20-Apr-16 20:34
MemberEdwinEP20-Apr-16 20:34 
Bugnot showed the closeing tag Pin
kumarpr5-Oct-15 18:46
Memberkumarpr5-Oct-15 18:46 
Questioneach node is different background color Pin
kumarpr2-Oct-15 0:55
Memberkumarpr2-Oct-15 0:55 
Bugnot able to visualize more than 250 lines Pin
kumarpr29-Sep-15 19:38
Memberkumarpr29-Sep-15 19:38 
GeneralRe: not able to visualize more than 250 lines Pin
Dr. Song Li30-Sep-15 4:29
MemberDr. Song Li30-Sep-15 4:29 
GeneralRe: not able to visualize more than 250 lines Pin
Dr. Song Li30-Sep-15 4:32
MemberDr. Song Li30-Sep-15 4:32 
GeneralRe: not able to visualize more than 250 lines Pin
kumarpr4-Oct-15 23:49
Memberkumarpr4-Oct-15 23:49 
Questionhow to show more than 250 and above lines Pin
kumarpr28-Sep-15 21:40
Memberkumarpr28-Sep-15 21:40 
Questiontemplate and closing didn't work. Pin
keremburak30-Apr-13 4:42
Memberkeremburak30-Apr-13 4:42 
QuestionChanges for data binding Pin
Marco Mastropaolo18-Feb-13 2:08
MemberMarco Mastropaolo18-Feb-13 2:08 
AnswerRe: Changes for data binding Pin
Dr. Song Li18-Feb-13 4:50
MemberDr. Song Li18-Feb-13 4:50 
QuestionRE;Visual studio2012 Pin
nitishsingh3189@gmail.com22-Sep-12 5:06
Membernitishsingh3189@gmail.com22-Sep-12 5:06 
AnswerRe: RE;Visual studio2012 Pin
Dr. Song Li22-Sep-12 5:47
MemberDr. Song Li22-Sep-12 5:47 
QuestionNice Work Searching exactly for this Pin
Mayur225813-Jun-12 21:03
MemberMayur225813-Jun-12 21:03 
QuestionTags not closed Pin
Jawahar Suresh Babu23-May-12 1:07
MemberJawahar Suresh Babu23-May-12 1:07 
GeneralMy vote of 5 Pin
dexterama10-May-12 4:01
professionaldexterama10-May-12 4:01 
GeneralMy vote of 5 Pin
Dave Matsumoto29-Mar-12 10:25
MemberDave Matsumoto29-Mar-12 10:25 
QuestionVery Great Work Pin
Sharp_forever25-Mar-12 10:27
MemberSharp_forever25-Mar-12 10:27 
QuestionGood job man! Pin
dimas197130-Jan-12 5:15
Memberdimas197130-Jan-12 5:15 
Questionexpand all nodes everytime a xmldocument is loaded Pin
brndnbgable26-Jan-12 3:46
Memberbrndnbgable26-Jan-12 3:46 
AnswerRe: expand all nodes everytime a xmldocument is loaded Pin
Dr. Song Li26-Jan-12 15:20
MemberDr. Song Li26-Jan-12 15:20 
QuestionEvent Handling Pin
Miros799-Jan-12 13:30
MemberMiros799-Jan-12 13:30 
GeneralMy vote of 5 Pin
Hamid Noorbakhsh8-Dec-11 12:21
professionalHamid Noorbakhsh8-Dec-11 12:21 
Questionhow to add close tags too? Pin
ArsenMkrt5-Dec-11 6:58
MemberArsenMkrt5-Dec-11 6:58 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.