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.

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.

   C#

   	ComboBoxWcfServiceClient serviceClient = new ComboBoxWcfServiceClient();

   VB.NET

   	Dim serviceClient As New ComboBoxWcfServiceClient()

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.

   C#

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

   VB.NET

   	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

   C#

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

   VB.NET

   	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.

   XAML

   	<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.

   XAML

   	<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.

   C#

   	public class NorthwindDataSource
   	{
   	}

   VB.NET

   	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:

   C#

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

   VB.NET

   	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:

   C#

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

   VB.NET

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

   C#

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

   VB.NET

   	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

   C#

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

   VB.NET

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

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

   XAML

   	<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.

   XAML

   	<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.

   XAML

   	<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