Data Binding to WCF Service

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

• A straight-forward way - plain method calls.

• Using MVVM approach

This tutorial will use the Northwind database, which can be downloaded from here.

Before proceeding further with this tutorial you need to create a new application and add a RadChart declaration in your XAML:

• XAML

<telerik:RadChart x:Name="radChart" Margin="8" /> 

The chart control will be populated with the top 10 products from the Northwind database. On the Y axis the UnitPrice property will be displayed.

• Add a new SeriesMapping to your chart declaration and set the LegendLabel property to "Products UnitPrice".

• Add a new ItemMapping and set the following properties:

• FieldName to UnitPrice

• DataPointMember to YValue

• XAML

<telerik:RadChart x:Name="radChart" Margin="8"> 
    <telerik:RadChart.SeriesMappings> 
        <telerik:SeriesMapping LegendLabel="Products UnitPrice"> 
            <telerik:SeriesMapping.ItemMappings> 
                <telerik:ItemMapping FieldName="UnitPrice" DataPointMember="YValue"/> 
            </telerik:SeriesMapping.ItemMappings> 
        </telerik:SeriesMapping> 
    </telerik:RadChart.SeriesMappings> 
</telerik:RadChart> 

Creating the WCF Service:

• Add a new item "LINQ to SQL Classes" inside the web server project. Use the .dbml’s designer and drag the *Products *table onto the design surface:

• Then add a new item "Silverlight-enabled WCF Service" to the server project. In the .svc.cs file add the following Linq query to get the first 10 Products from the table:

• C#
• VB.NET

[ServiceContract(Namespace = "")] 
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)] 
public class Service2 
{ 
    [OperationContract] 
    public List<Products> LoadTop10Products() 
    { 
        DataClasses1DataContext db = new DataClasses1DataContext(); 
        var query = from c in db.Products select c; 
        return query.Take(10).ToList(); 
    } 
} 

<ServiceContract(Namespace:=""), AspNetCompatibilityRequirements(RequirementsMode:=AspNetCompatibilityRequirementsMode.Allowed)> 
Public Class Service2 
    <OperationContract> 
    Public Function LoadTop10Products() As List(Of Products) 
        Dim db As New DataClasses1DataContext() 
        Dim query = From c In db.Products 
                    Select c 
        Return query.Take(10).ToList() 
    End Function 
End Class 

Now build the project before continuing.

Plain Method Calls

• Add a reference to your WCF Service.

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.

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

• C#
• VB.NET

MyService.Service2Client client = new MyService.Service2Client(); 

Dim client As New MyService.Service2Client() 

Add the following code in your xaml.cs which will make the initial load of the objects.

• C#
• VB.NET

public void SetupService() 
{ 
    InitializeComponent(); 
    MyService.Service2Client client = new MyService.Service2Client(); 
    client.LoadTop10ProductsCompleted += new EventHandler<LoadTop10ProductsCompletedEventArgs>(client_LoadTop10ProductsCompleted); 
    client.LoadTop10ProductsAsync(); 
} 
void client_LoadTop10ProductsCompleted(object sender, LoadTop10ProductsCompletedEventArgs e) 
{ 
    var products = e.Result; 
    this.radChart.ItemsSource = products; 
    this.radChart.DefaultView.ChartArea.AxisX.LabelRotationAngle = -90; 
} 

Public Sub SetupClient() 
    Dim client As New MyService.Service2Client() 
    AddHandler client.LoadTop10ProductsCompleted, AddressOf client_LoadTop10ProductsCompleted 
    client.LoadTop10ProductsAsync() 
End Sub 
Public Sub client_LoadTop10ProductsCompleted(ByVal sender As Object, ByVal e As LoadTop10ProductsCompletedEventArgs) 
    Dim products = e.Result 
    Me.radChart.ItemsSource = products 
    Me.radChart.DefaultView.ChartArea.AxisX.LabelRotationAngle = -90 
End Sub 

• C#
• VB.NET

radChart.ItemsSource = serviceClient.LoadTop10Products(); 

radChart.ItemsSource = serviceClient.LoadTop10Products() 

Run your demo, the result can be seen on the next image:

Using MVVM Approach

This section will show you how to populate your RadChart control in a MVVM manner.

• Create a new class named NorthwindDataSource.

• C#
• VB.NET

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.

• C#
• VB.NET

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

Public Class NorthwindDataSource 
    Private serviceClient As SampleWcfServiceClient 
 
    Public Sub New() 
        Me.serviceClient = New SampleWcfServiceClient() 
        Me.Products = New ObservableCollection(Of Products)() 
    End Sub 
 
    Private _Products As ObservableCollection(Of Products) 
    Public Property Products() As ObservableCollection(Of Products) 
        Get 
            Return _Products 
        End Get 
        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:

• C#

this.serviceClient.LoadTop10ProductsCompleted += new EventHandler<LoadTop10ProductsCompletedEventArgs>(serviceClient_LoadTop10ProductsCompleted); 
this.serviceClient.LoadTop10ProductsAsync(); 

• C#
• VB.NET
• VB.NET

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

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

AddHandler Me.serviceClient.LoadTop10ProductsCompleted, AddressOf serviceClient_LoadTop10ProductsCompleted 
Me.serviceClient.LoadTop10ProductsAsync() 

• C#
• VB.NET

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

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

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

• XAML

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

• Update your chart declaration - set the ItemsSource property.

• XAML

<telerik:RadChart x:Name="radChart" Margin="8"     
                  ItemsSource="{Binding Source={StaticResource DataSource}, Path=Products}"> 
    <telerik:RadChart.SeriesMappings> 
        <telerik:SeriesMapping LegendLabel="Products UnitPrice"> 
            <telerik:SeriesMapping.ItemMappings> 
                <telerik:ItemMapping FieldName="UnitPrice" DataPointMember="YValue"/> 
            </telerik:SeriesMapping.ItemMappings> 
        </telerik:SeriesMapping> 
    </telerik:RadChart.SeriesMappings> 
</telerik:RadChart> 

Here it is shown how the final result should look like: