A simple Master Detail databinding example in WPF using the XmlDataProvider.

A simple Master Detail databinding example in WPF using the XmlDataProvider.

  • Comments 3

 

A post on Master Detail data binding with WPF and (in this case) the XmlDataProvider.

 

In this example we will use a scenario that many are familiar with, namely football.

We usually have countries, these have leagues and the leagues have teams.

 

So, first step is to create the data for this. Create a new WPF application. Then right click the project and select Add > New Folder.

Call this folder Data and add a new xml file into it. Call this xml file Football.xml. The content:

 

<Countries xmlns="">

  <Country countryName="England">

    <League leagueName="Premier League">

      <Team teamName="Manchester United"/>

      <Team teamName="Chelsea"/>

    </League>

    <League leagueName="Championship">

      <Team teamName="Crystal Palace" />

      <Team teamName="Newcastle" />

    </League>

  </Country>

  <Country countryName="Italy">

    <League leagueName="Serie A">

      <Team teamName="Milan"/>

      <Team teamName="Inter"/>

    </League>

  </Country>

  <Country countryName="Spain">

    <League leagueName="La Liga">

      <Team teamName="Barcelona"/>

      <Team teamName="Real Madrid"/>

    </League>

  </Country>

</Countries>

 

Should be self-explanatory. Now open up the .xaml file and add this code (you can remove all that is in there already):

 

<Window x:Class="WpfDataBinding.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="400" Width="400">

   

    <Window.Resources>

       

        <XmlDataProvider x:Key="DataList" Source="Data\Football.xml" XPath="Countries/Country"/>

 

        <DataTemplate x:Key="CountryDataTemplate">

            <TextBlock Text="{Binding XPath=@countryName}" />

        </DataTemplate>

 

        <DataTemplate x:Key="LeagueDataTemplate">

            <TextBlock Text="{Binding XPath=@leagueName}" />

        </DataTemplate>

 

        <DataTemplate x:Key="TeamDataTemplate">

            <TextBlock Text="{Binding XPath=@teamName}" />

        </DataTemplate>

 

    </Window.Resources>

   

    <Grid DataContext="{Binding Source={StaticResource DataList}}">

       

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="200" />

            <ColumnDefinition Width="*" />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="200" />

            <RowDefinition Height="*" />

        </Grid.RowDefinitions>

 

            <ListBox Name="CountryList" Grid.Row="0" Grid.Column="0"

                     ItemsSource="{Binding}"

                     ItemTemplate="{StaticResource CountryDataTemplate}"

                     IsSynchronizedWithCurrentItem="true"/>

           

            <ListBox Name="LeagueList" Grid.Row="0" Grid.Column="1"

                     ItemsSource="{Binding XPath=League}"

                     ItemTemplate="{StaticResource LeagueDataTemplate}"

                     IsSynchronizedWithCurrentItem="true"/>

           

            <ListBox Name="TeamList" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"

                     ItemsSource="{Binding XPath=Team}"

                     ItemTemplate="{StaticResource TeamDataTemplate}"

                     DataContext="{Binding ElementName=LeagueList, Path=SelectedItem}"/>

    </Grid>

</Window>

 

That is it.

 

In short, we create an XmlDataProvider called DataList, we point it to the xml file and set the path to Country.

We then have 3 DataTemplates, one for each ListBox used (Country, League, Team) they look all the same for simplicity, but feel free to edit them.

We then set the DataContext for the Grid to be the DataList (XmlDataProvider).

 

The first ListBox uses the CountryTemplate for the ItemTemplate and a direct binding (to Countries).

The second ListBox uses the LeagueTemplate for the ItemTemplate and a binding to the League nodes.

The last ListBox uses the TeamTemplate for the ItemTemplate and sets its DataContext to be the ListBox called LeagueList and a binding to the Team nodes.

 

I will create a post on how to use this data in a TreeView in WPF as well.

Leave a Comment
  • Please add 2 and 7 and type the answer here:
  • Post
  • Can u load the same xml file to a WPF datagrid?

  • Thank you for such a concise example. Helps me understand this a lot better than some other complex ones!

  • Great example for learners...  Thank You so much.

Page 1 of 1 (3 items)