Click here to Skip to main content
Click here to Skip to main content

A Simple WPF XML Document Viewer Control

, 7 Apr 2010
Rate this:
Please Sign up or sign in to vote.
This article introduces a simple XML document viewer control for WPF applications to display XML documents in a nicely formatted way.

Introduction

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

Background

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.

VSSolution.JPG

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"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:xmlstack="clr-namespace:System.Xml;assembly=System.Xml"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
    <UserControl.Resources>
        <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}"/>
            </StackPanel>
        </DataTemplate>
 
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="True"/>
        </Style>
 
        <HierarchicalDataTemplate x:Key="treeViewTemplate" 
                                  ItemsSource="{Binding XPath=child::node()}">
            <StackPanel Orientation="Horizontal" Margin="3,0,0,0" 
                        HorizontalAlignment="Center">
                <TextBlock Text="&lt;" HorizontalAlignment="Center" 
                           Foreground="{StaticResource xmlMarkBrush}" 
                           x:Name="startTag"/>
 
                <TextBlock Text="{Binding Path=Name}"
                    Margin="0"
                    HorizontalAlignment="Center"
                    x:Name="xmlTag"
                    Foreground="{StaticResource xmlTagBrush}"/>
 
                <ItemsControl
                    ItemTemplate="{StaticResource attributeTemplate}"
                    ItemsSource="{Binding Path=Attributes}"
                    HorizontalAlignment="Center">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
 
                <TextBlock Text="&gt;" HorizontalAlignment="Center" 
                           Foreground="{StaticResource xmlMarkBrush}" 
                           x:Name="endTag"/>
            </StackPanel>
 
            <HierarchicalDataTemplate.Triggers>
                <DataTrigger Binding="{Binding NodeType}">
                    <DataTrigger.Value>
                        <xmlstack:XmlNodeType>Text</xmlstack:XmlNodeType>
                    </DataTrigger.Value>
                    <Setter Property="Text" Value="{Binding InnerText}" 
                            TargetName="xmlTag"/>
                    <Setter Property="Foreground" Value="Blue" 
                            TargetName="xmlTag"/>
                    <Setter Property="Visibility" Value="Collapsed" 
                            TargetName="startTag"/>
                    <Setter Property="Visibility" Value="Collapsed" 
                            TargetName="endTag"/>
                </DataTrigger>
 
                <DataTrigger Binding="{Binding HasChildNodes}" Value="False">
                    <Setter Property="Text" Value="/&gt;" TargetName="endTag"/>
                </DataTrigger>
            </HierarchicalDataTemplate.Triggers>
        </HierarchicalDataTemplate>
    </UserControl.Resources>
 
    <Grid>
        <TreeView Grid.Row="2" Grid.ColumnSpan="2" Name="xmlTree" 
                  ItemTemplate="{StaticResource treeViewTemplate}"/>
    </Grid>
</UserControl>

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()
        {
            InitializeComponent();
        }
 
        public XmlDocument xmlDocument
        {
            get { return _xmldocument; }
            set
            {
                _xmldocument = value;
                BindXMLDocument();
            }
        }
 
        private void BindXMLDocument()
        {
            if (_xmldocument == null)
            {
                xmlTree.ItemsSource = null;
                return;
            }
 
            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"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:XMLViewer="clr-namespace:XMLViewer;assembly=XMLViewer"
    FontFamily="Verdana" Icon="Images\icon_music.ico"
    Title="XMLViewer User Control Demonstration Application">
    
    <Grid Margin="10, 10, 10, 10">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="5"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="5" />
            </Grid.ColumnDefinitions>
 
            <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"/>
        </Grid>
        
        <XMLViewer:Viewer x:Name="vXMLViwer" Grid.Row="2" />
    </Grid>
</Window>

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()
        {
            InitializeComponent();
        }
 
        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();
            try
            {
                XMLdoc.Load(dlg.FileName);
            }
            catch (XmlException)
            {
                MessageBox.Show("The XML file is invalid");
                return;
            }
 
            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.

RunApplication.JPG

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.

History

This is the first revision of the article.

License

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

Share

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

 
Questiontemplate and closing didn't work. Pinmemberkeremburak30-Apr-13 3:42 
QuestionChanges for data binding PinmemberMarco Mastropaolo18-Feb-13 1:08 
AnswerRe: Changes for data binding PinmemberDr. Song Li18-Feb-13 3:50 
QuestionRE;Visual studio2012 Pinmembernitishsingh3189@gmail.com22-Sep-12 4:06 
AnswerRe: RE;Visual studio2012 PinmvpDr. Song Li22-Sep-12 4:47 
QuestionNice Work Searching exactly for this PinmemberMayur225813-Jun-12 20:03 
QuestionTags not closed PinmemberJawahar Suresh Babu23-May-12 0:07 
GeneralMy vote of 5 Pinmemberdexterama10-May-12 3:01 
GeneralMy vote of 5 PinmemberDave Matsumoto29-Mar-12 9:25 
QuestionVery Great Work PinmemberSharp_forever25-Mar-12 9:27 
QuestionGood job man! Pinmemberdimas197130-Jan-12 4:15 
Questionexpand all nodes everytime a xmldocument is loaded Pinmemberbrndnbgable26-Jan-12 2:46 
AnswerRe: expand all nodes everytime a xmldocument is loaded PinmvpDr. Song Li26-Jan-12 14:20 
QuestionEvent Handling PinmemberGuzul9-Jan-12 12:30 
GeneralMy vote of 5 PinmemberHamid Noorbakhsh8-Dec-11 11:21 
Questionhow to add close tags too? PinmemberArsenmkrt5-Dec-11 5:58 
QuestionThank you for this wonderful post. PinmemberBreathShadow28-Jul-11 4:53 
AnswerRe: Thank you for this wonderful post. PinmemberDr. Song Li28-Jul-11 5:47 
GeneralRe: Thank you for this wonderful post. PinmemberRJPalkar28-Jul-11 12:00 
GeneralMy vote of 5 PinmemberGreg Russell25-Mar-11 3:11 
GeneralMy vote of 3 Pinmembermungflesh3-Jan-11 23:01 
GeneralContextSwitchDeadlock was detected PinmemberBenny S. Tordrup7-Apr-10 1:54 
GeneralRe: ContextSwitchDeadlock was detected PinmemberPhilippe Bouteleux7-Apr-10 2:39 
GeneralRe: ContextSwitchDeadlock was detected PinmemberBenny S. Tordrup7-Apr-10 2:45 
GeneralRe: ContextSwitchDeadlock was detected PinmemberDr. Song Li7-Apr-10 4:17 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 7 Apr 2010
Article Copyright 2010 by Dr. Song Li
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid