Data Binding with WPF : Binding to XML

Introduction:

In this article i will explain How to bind XML Data to Application UI in WPF. What are the different ways to specify the XML Data to Applicaiton, How to bind the xml elements to UI in wpf etc.

Download SourceCode and Video Explaining How to bind Xml Data to ListBox in WPF 

Description:

       In wpf for accessing xml data in your application you can use XmlDataProvider Class. This class provides declarative access to xml data for binding. XmlDataProvider Class provides three ways to access XML Data.

1. You can embed inline XML Data within the tag inside XmlDataProvider Class.
2. You can use Source to specify the Uri of the XML file.
3. You can use Document property to specify the XmlDocument as binding source.

One Important property of XmlDataProvider Class is XPath which defines the level binding source in XML file.

 Embedding Inline XML Data:

           

<window x:Class="DataBindings.XMLData" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="XMLData" Height="300" Width="300"> <Window.Resources> <xmldataprovider x:Key="AuthorNames" XPath="Authors"> <x:XData> <authors xmlns=""> <author name="Sekhar Babu" age="23"/> <author name="Mani Sharma" age="45"/> <author name="Hanselman" age="45"/> <author name="Scott" age="50"/> <author name="Kunal" age="34"/> </Authors> </x:XData> </XmlDataProvider> </Window.Resources> <grid> <listbox x:Name="ListAuthors" Grid.Row="1" ItemsSource="{Binding Source={StaticResource AuthorNames}, XPath=*}" > <ListBox.ItemTemplate> <datatemplate> <grid> <Grid.ColumnDefinitions> <columndefinition Width="100"/> <ColumnDefinition/> </Grid.ColumnDefinitions> <textblock Grid.Column="0" Foreground="Red" Text="{Binding XPath=@name}"/> <textblock Foreground="Blue" Text="{Binding XPath=@age}" Grid.Column="1"/> </Grid> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> </Window>

  

If you see the XAML code XML Data is embed with in tag. This XML file has root element as Authors and child element Author with two attributes name and age.

          So for accessing these XML element in ListBox, i specified the itemsource to AuthorNames, XPath=* means it will returns all the data in XML. We can use XPath to query against the XML data

XPath=*[@age>25] will returns the Authors whose age is greater than 25. In this way query against Data.

Accessing XML Data By Setting Source:

             I Have an XML File as Follows:

<?xml version="1.0" encoding="utf-8" ?> <stock xmlns=""> <mobiles> <mobile Brand="Nokia"> <model>N947</Model> <stock>10</Stock> <price>7500</Price> </Mobile> <mobile Brand="Nokia"> <model>N347</Model> <stock>150</Stock> <price>9000</Price> </Mobile> <mobile Brand="Nokia"> <model>N147</Model> <stock>10</Stock> <price>13000</Price> </Mobile> <mobile Brand="Samsung"> <model>N197</Model> <stock>100</Stock> <price>31000</Price> </Mobile> <mobile Brand="Samsung"> <model>N127</Model> <stock>100</Stock> <price>31000</Price> </Mobile> <mobile Brand="Samsung"> <model>N1937</Model> <stock>100</Stock> <price>31000</Price> </Mobile> <mobile Brand="Samsung"> <model>N1957</Model> <stock>100</Stock> <price>31000</Price> </Mobile> </Mobiles> <cds> <cd Brand="Panasonic"> <model>121</Model> <stock>300</Stock> <price>20</Price> </CD> <cd Brand="Panasonic"> <model>121</Model> <stock>300</Stock> <price>20</Price> </CD> <cd Brand="Zoom"> <model>111</Model> <stock>300</Stock> <price>20</Price> </CD> <cd Brand="Zoom"> <model>101</Model> <stock>300</Stock> <price>20</Price> </CD> </CDs> </Stock>

I am displaying these data in UI as follows

Here is the XAML Code:

<window x:Class="XMLData.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="453"> <Window.Resources> <xmldataprovider x:Key="Data" Source="/XMLFile1.xml" /> </Window.Resources> <grid> <combobox Height="23" ItemsSource="{Binding Source={StaticResource Data}, XPath=/Stock/* }" HorizontalAlignment="Left" Margin="18,14,0,0" x:Name="comboBox1" VerticalAlignment="Top" Width="120" > <ComboBox.ItemTemplate> <datatemplate> <textblock Text="{Binding Name}"/> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox> <stackpanel Orientation="Horizontal" DataContext="{Binding ElementName=comboBox1,Path=SelectedItem}"> <listbox Height="100" ItemsSource="{Binding Path=ChildNodes}" HorizontalAlignment="Left" Margin="16,53,0,0" Name="listBox1" VerticalAlignment="Top" Width="120"> <ListBox.ItemTemplate> <datatemplate> <textblock Text="{Binding XPath=Model}" /> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <stackpanel Margin="16,0,0,0" DataContext="{Binding ElementName=listBox1, Path=SelectedItem}" Width="191" Height="71"> <textblock Text="Brand: "></TextBlock> <textblock Grid.Column="1" Text="{Binding XPath=@Brand}"></TextBlock> <textblock Grid.Row="1" Text="Stock: "></TextBlock> <textbox Grid.Row="1" Grid.Column="1" Text="{Binding XPath=Stock}" /> </StackPanel> </StackPanel> </Grid> </Window>

  In this example i am loading main root elements i combobox, based on the combobox selection ListView is loaded with the Model, Based on the selection in ListView then Brand Price details will be shown. 

Watch this Video explaining How to Bind Xml Data to ListBox in WPF

Download SourceCode for More Clarification.

Conclusion:

        I hope you got some basic details about accessing xml data in wpf and bind it to UI.

       Don't forget to Comment and share it for our friends if you like this post. Thank You.