Click here to Skip to main content
15,867,308 members
Articles / Desktop Programming / WPF

A Simple WPF XML Document Viewer Control

Rate me:
Please Sign up or sign in to vote.
4.96/5 (34 votes)
7 Apr 2010CPOL3 min read 226K   9.5K   64   40
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":

XML
<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:

C#
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":

XML
<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:

C#
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)


Written By
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

 
GeneralRe: My vote of 5 Pin
Member 1563588214-May-22 2:50
Member 1563588214-May-22 2:50 
Questionhow to add close tags too? Pin
ArsenMkrt5-Dec-11 5:58
ArsenMkrt5-Dec-11 5:58 
QuestionThank you for this wonderful post. Pin
RJPalkar28-Jul-11 4:53
RJPalkar28-Jul-11 4:53 
AnswerRe: Thank you for this wonderful post. Pin
Dr. Song Li28-Jul-11 5:47
Dr. Song Li28-Jul-11 5:47 
GeneralRe: Thank you for this wonderful post. Pin
RJPalkar28-Jul-11 12:00
RJPalkar28-Jul-11 12:00 
GeneralMy vote of 5 Pin
Greg Russell25-Mar-11 3:11
professionalGreg Russell25-Mar-11 3:11 
GeneralMy vote of 3 Pin
mungflesh3-Jan-11 23:01
mungflesh3-Jan-11 23:01 
GeneralContextSwitchDeadlock was detected Pin
Benny S. Tordrup7-Apr-10 1:54
Benny S. Tordrup7-Apr-10 1:54 
GeneralRe: ContextSwitchDeadlock was detected Pin
Philippe Bouteleux7-Apr-10 2:39
Philippe Bouteleux7-Apr-10 2:39 
GeneralRe: ContextSwitchDeadlock was detected Pin
Benny S. Tordrup7-Apr-10 2:45
Benny S. Tordrup7-Apr-10 2:45 
GeneralRe: ContextSwitchDeadlock was detected Pin
Dr. Song Li7-Apr-10 4:17
Dr. Song Li7-Apr-10 4:17 
GeneralRe: ContextSwitchDeadlock was detected Pin
kumarpr28-Sep-15 18:31
kumarpr28-Sep-15 18:31 
GeneralRe: ContextSwitchDeadlock was detected Pin
Dr. Song Li7-Apr-10 3:11
Dr. Song Li7-Apr-10 3:11 
Generalvery nice app - but no explaination Pin
Mr.PoorEnglish7-Apr-10 0:16
Mr.PoorEnglish7-Apr-10 0:16 
GeneralNice Pin
Ali BaderEddin6-Apr-10 14:35
Ali BaderEddin6-Apr-10 14:35 

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.