Binding to XML

The purpose of this tutorial is to show you how to bind RadComboBox to data defined in a XML file. The operations you need to perform are to convert the XML to a collection of business objects and then bind that collection using the ItemsSource property of the ComboBox.

The final result

1. Define the data source as XML content.

   Defining the XML data source

       <?xml version="1.0" encoding="utf-8" ?> 
       <Items> 
           <XmlNodeItem Team="Barcelona" Country="Spain"/> 
           <XmlNodeItem Team="Juventus" Country="Italy"/> 
           <XmlNodeItem Team="Inter" Country="Italy"/> 
           <XmlNodeItem Team="Ac Milan" Country="Italy"/> 
           <XmlNodeItem Team="Real M" Country="Spain"/> 
           <XmlNodeItem Team="Arsenal" Country="England"/> 
           <XmlNodeItem Team="Manchester U" Country="England"/> 
           <XmlNodeItem Team="Bayern" Country="Germany"/> 
           <XmlNodeItem Team="Porto" Country="Portugal"/> 
           <XmlNodeItem Team="Liverpool" Country="England"/> 
           <XmlNodeItem Team="Ajax" Country="Holland"/> 
           <XmlNodeItem Team="Olimpic M" Country="France"/> 
       </Items> 
   

2. Add a new RadComboBox declaration in your XAML.

       <telerik:RadComboBox x:Name="radComboBox" Width="200"/> 
   

3. Create a new class named XmlNodeItem. This class is pretty simple and it represents a separate node from the XML document. Its properties are Team and Country. Both of the properties are of type string.

       public class XmlNodeItem 
       { 
           [XmlAttribute( AttributeName = "Team" )] 
           public string Team { get; set; } 
    
           [XmlAttribute( AttributeName = "Country" )] 
           public string Country { get; set; } 
       } 
   

       Public Class XmlNodeItem 
       Private _Team As String 
           <XmlAttribute(AttributeName = "Team")> _ 
           Public Property Team() As String 
               Get 
                   Return _Team 
               End Get 
               Set(ByVal value As String) 
                   _Team = value 
               End Set 
               End Property 
    
               Private _Country As String 
               <XmlAttribute(AttributeName = "Country")> _ 
               Public Property Country() As String 
                   Get 
                       Return _Country 
                   End Get 
                   Set(ByVal value As String) 
                       _Country = value 
                   End Set 
               End Property 
           End Class 
   

4. Create a new class named XmlNodeItemList, which derives from ObservableCollection of XmlNodeItem. This is a collection that will be created from the XML file.

       [XmlRoot( ElementName = "Items" )] 
       public class XmlNodeItemList : ObservableCollection<XmlNodeItem> 
       { 
           public void AddRange( IEnumerable<XmlNodeItem> range ) 
           { 
               foreach ( XmlNodeItem node in range ) 
               { 
                   this.Add( node ); 
               } 
           } 
       } 
   

           <XmlRoot(ElementName = "Items")> _ 
           Public Class XmlNodeItemList 
               Inherits ObservableCollection(Of XmlNodeItem) 
               Public Sub AddRange(ByVal range As IEnumerable(Of XmlNodeItem)) 
                   For Each node As XmlNodeItem In range 
                       Me.Add(node) 
                   Next 
               End Sub 
           End Class 
   

5. Create a new class named RadComboBoxXmlDataSource, which derives from XmlNodeItemList. The class takes a path to the XML file and deserializes the data in the private method RetrieveData().

       public class RadComboBoxXmlDataSource : XmlNodeItemList 
       { 
           private string source; 
    
           public string Source 
           { 
               get 
               { 
                   return this.source; 
               } 
               set 
               { 
                   this.source = value; 
                   AddRange(this.RetrieveData(Application.GetResourceStream(new Uri(value, UriKind.Relative)).Stream)); 
               } 
           } 
    
           private XmlNodeItemList RetrieveData( Stream xmlStream ) 
           { 
               XmlSerializer serializer = new XmlSerializer( typeof( XmlNodeItemList ) ); 
               StreamReader reader = new StreamReader( xmlStream ); 
               XmlNodeItemList list = ( XmlNodeItemList )serializer.Deserialize( reader ); 
               return list; 
           } 
       } 
   

           Public Class RadComboBoxXmlDataSource 
               Inherits XmlNodeItemList 
               Private m_source As String 
    
               Public Property Source() As String 
                   Get 
                       Return Me.m_source 
                   End Get 
                   Set(ByVal value As String) 
                       Me.m_source = value 
                       AddRange(RetrieveData(Application.GetResourceStream(New Uri(value, UriKind.Relative)).Stream)) 
                   End Set 
               End Property 
    
               Private Function RetrieveData(ByVal xmlStream As Stream) As XmlNodeItemList 
                   Dim serializer As New XmlSerializer(GetType(XmlNodeItemList)) 
                   Dim reader As New StreamReader(xmlStream) 
                   Dim list As XmlNodeItemList = DirectCast(serializer.Deserialize(reader), XmlNodeItemList) 
                   Return list 
               End Function 
           End Class 
   

6. The next step is to declare the RadComboBoxXmlDataSource as a resource in your application.

       <UserControl.Resources> 
           <example:RadComboBoxDataSource x:Key="DataSource"  Source="RadComboBoxBindingToXml.xml"/> 
       </UserControl.Resources> 
   

7. Update the RadComboBox declaration by setting the ItemsSource property.

       <telerik:RadComboBox x:Name="radComboBox" Width="200" ItemsSource="{Binding Source={StaticResource DataSource}}"/> 
   

8. Create a custom DateTemplate and set it to the RadComboBox's ItemTemplate property.

       <DataTemplate x:Key="ComboBoxCustomTemplate"> 
           <StackPanel Margin="5" Orientation="Horizontal"> 
               <TextBlock Text="{Binding Team}" Foreground="Blue"/> 
               <TextBlock Text=" ("/> 
               <TextBlock Text="{Binding Country}"/> 
               <TextBlock Text=")"/> 
           </StackPanel> 
       </DataTemplate> 
   

9. Update the ComboBox declaration by setting the ItemTemplate property.

       <telerik:RadComboBox x:Name="radComboBox" Width="200" ItemsSource="{Binding Source={StaticResource DataSource}}" ItemTemplate="{StaticResource ComboBoxCustomTemplate}"/> 
   

The final result

See Also

• Filtering
• Edit Modes