A Simple WPF XML Document Viewer Control

• Download demo - 73.57 KB

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.

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.

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.