Binding to WCF Service

The purpose of this tutorial is to show you how to populate a RadComboBox with a data from a WCF Service in two ways:

• Using plain methods call in the code-behind

• Using MVVM approach

This tutorial uses the Northwind database.

Before proceeding further with this tutorial, you need to create a new application and a RadComboBox declaration in your XAML.

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

Using Plain Methods Call in the Code-Behind

1. Add a reference to your WCF Service.

2. Switch to the code-behind and create a new instance of your WCF Service client.

       ComboBoxWcfServiceClient serviceClient = new ComboBoxWcfServiceClient(); 
   

       Dim serviceClient As New ComboBoxWcfServiceClient() 
   

   For more information about how to add a reference to a WCF Service and how to create a new instance of a WCF Service client, take a look at the Consuming WCF Service topic.

3. The ComboBox control will be populated with all Products from the Northwind database. In the drop-down list the ProductName and the UnitPrice properties will be displayed. Add the following code which will make the initial load of the objects.

       private void BeginRequest() 
       { 
           serviceClient.GetProductsCompleted += new EventHandler<GetProductsCompletedEventArgs>( serviceClient_GetProductsCompleted ); 
           serviceClient.GetProductsAsync(); 
       } 
       private void serviceClient_GetProductsCompleted( object sender, GetProductsCompletedEventArgs e ) 
       { 
           radComboBox.ItemsSource = e.Result; 
       } 
   

       Private Sub BeginRequest() 
           AddHandler serviceClient.GetProductsCompleted, AddressOf serviceClient_GetProductsCompleted 
           serviceClient.GetProductsAsync() 
       End Sub 
       Private Sub serviceClient_GetProductsCompleted(ByVal sender As Object, ByVal e As GetProductsCompletedEventArgs) 
           radComboBox.ItemsSource = e.Result 
       End Sub 
   

       private void BeginRequest() 
       { 
           this.radComboBox.ItemsSource = serviceClient.GetProducts(); 
       } 
   

       Private Sub BeginRequest() 
           Me.radComboBox.ItemsSource = serviceClient.GetProducts() 
       End Sub 
   

4. You need to declare a custom DataTemplate to determine how the items in the drop-down will look like. Add the following DataTemplate declaration in your XAML resources.

       <UserControl.Resources> 
           <DataTemplate x:Key="CustomItemTemplate"> 
               <StackPanel Orientation="Horizontal"> 
                   <TextBlock Text="{Binding ProductName}"/> 
                   <TextBlock Text=" - "/> 
                   <TextBlock Text="{Binding UnitPrice}"/> 
                   <TextBlock Text=" $"/> 
               </StackPanel> 
           </DataTemplate> 
       </UserControl.Resources> 
   

5. Find your RadComboBox declaration and set the declared DataTemplate to its ItemTemplate property.

       <telerik:RadComboBox x:Name="radComboBox" ItemTemplate="{StaticResource CustomItemTemplate}"/> 
   

The end result with the data fetched from the service

Using MVVM Approach

This section will show you how to populate your RadComboBox control in a MVVM manner. The RadComboBox will be bound to a data source object, that has a property Products. When the control is loaded, all products from the Products table in the Northwind database are loaded asynchronously.

1. Create a new class named NorthwindDataSource.

       public class NorthwindDataSource 
       { 
       } 
   

       Public Class NorthwindDataSource 
       End Class 
   

2. Add a reference to your WCF Service

3. In the NorthwindDataSource class add a reference to an ObservableCollection of Products.

4. In the NorthwindDataSource class add a reference to your WCF Service client:

       public class NorthwindDataSource 
       { 
           private ComboBoxWcfServiceClient serviceClient; 
    
           public NorthwindDataSource() 
           { 
               this.Products = new ObservableCollection<Products>(); 
               this.serviceClient = new ComboBoxWcfServiceClient(); 
           } 
    
           public ObservableCollection<Products> Products 
           { 
               get; 
               protected set; 
           } 
       } 
   

       Public Class NorthwindDataSource 
           Private serviceClient As ComboBoxWcfServiceClient 
    
           Public Sub New() 
               Me.Products = New ObservableCollection(Of Products)() 
               Me.serviceClient = New ComboBoxWcfServiceClient() 
           End Sub 
    
       Private _Products As ObservableCollection(Of Products) 
           Public Property Products() As ObservableCollection(Of Products) 
               Get 
                   Return _Products 
               End Get 
               Protected Set(ByVal value As ObservableCollection(Of Products)) 
                   _Products = value 
               End Set 
           End Property 
       End Class 
   

   For more information about how to add a reference to a WCF Service and how to create a new instance of a WCF Service client, take a look at the Consuming WCF Service topic.

5. Add the following code in the constructor of the NorthwindDataSource. It will make the initial load of all Products from the database:

       this.serviceClient.GetProductsCompleted += new EventHandler<GetProductsCompletedEventArgs>( serviceClient_GetProductsCompleted ); 
       this.serviceClient.GetProductsAsync(); 
   

       AddHandler Me.serviceClient.GetProductsCompleted, AddressOf serviceClient_GetProductsCompleted 
       Me.serviceClient.GetProductsAsync() 
   

       private void serviceClient_GetProductsCompleted( object sender, GetProductsCompletedEventArgs e ) 
       { 
           foreach ( Products p in e.Result ) 
           { 
               this.Products.Add( p ); 
           } 
       } 
   

       Private Sub serviceClient_GetProductsCompleted(ByVal sender As Object, ByVal e As GetProductsCompletedEventArgs) 
           For Each p As Products In e.Result 
               Me.Products.Add(p) 
           Next 
       End Sub 
   

       foreach ( Products p in serviceClient.GetProducts() ) 
       { 
           this.Products.Add( p ); 
       } 
   

       For Each p As Products In serviceClient.GetProducts() 
           Me.Products.Add(p) 
       Next 
   

6. Declare the NorthwindDataSource object as a resource in your application.

       <UserControl.Resources> 
           <example:NorthwindDataSource x:Key="DataSource"/>    
       </UserControl.Resources> 
   

7. Declare a custom DataTemplate to determine how the items in the drop-down will look like. Add the following DataTemplate declaration in your XAML resources.

       <UserControl.Resources> 
           <DataTemplate x:Key="CustomItemTemplate"> 
               <StackPanel Orientation="Horizontal"> 
                   <TextBlock Text="{Binding ProductName}"/> 
                   <TextBlock Text=" - "/> 
                   <TextBlock Text="{Binding UnitPrice}"/> 
                   <TextBlock Text=" $"/> 
               </StackPanel> 
           </DataTemplate> 
    
           <example:NorthwindDataSource x:Key="DataSource"/> 
       </UserControl.Resources> 
   

8. Update your RadComboBox declaration - set the ItemsSource and ItemTemplate properties.

       <telerik:RadComboBox x:Name="radComboBox" 
           ItemsSource="{Binding Source={StaticResource DataSource}, Path=Products}" 
           ItemTemplate="{StaticResource CustomItemTemplate}"/> 
   

The end result produced by the code above

See Also

• Binding to ADO.NET Data Service
• Binding to Object