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

Add a reference to your WCF Service.
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.

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

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>

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

WPF RadComboBox Bound to Data from WCF 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.

Create a new class named NorthwindDataSource.

    public class NorthwindDataSource 
    { 
    }

    Public Class NorthwindDataSource 
    End Class

Add a reference to your WCF Service
In the NorthwindDataSource class add a reference to an ObservableCollection of Products.

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.

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

Declare the NorthwindDataSource object as a resource in your application.

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

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>

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

WPF RadComboBox Bound to Data from WCF Service

Binding to WCF Service

Using Plain Methods Call in the Code-Behind

Using MVVM Approach

See Also

Getting Started

Support Resources

Community