Windows Phone 7 Data Binding using WCF Service

This is my first article on Windows Phone 7. This article is going to explain how to fetch data from SQL database using WCF service and show on a page in a Windows Phone 7 application.

Getting Started

Creating a Silverlight Application:

• Open Visual Studio 2010.
• Go to File => New => Project.
• Select Silverlight Windows Phone from the Installed templates and choose the Windows Phone Application.
• Enter the Name and choose the location.
• Click OK.

Image1.

Before proceeding further now make a new WCF Service Application like image 2.



Click OK.

Click on Add New Item tab and add a Linq To Sql Classes data template and configure database.



Image3.

Drag and drop database tables.



Image 4.

You can rename table name if you want.



Image 5.

Now let's start work on service part.

IService1.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

namespace RajService
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.
    [ServiceContract]
publicinterfaceIService1
    {
        [OperationContract]
List<tbl_Rep_Profile> FindModelByModelId(int modelid);
 
        [OperationContract]
List<tbl_Rep_Profile> GetAllModels();
    }
}

Service1.svc

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;

namespace RajService
{
// NOTE: You can use the "Rename" command on the "Refactor" menu to change the class name "Service1" in code, svc and config file together.
publicclassService1 : IService1
    {
publicList<tbl_Rep_Profile> FindModelByModelId(int modelid)
        {
DataClasses1DataContext context = newDataClasses1DataContext();
var res = from r in context.tbl_Rep_Profiles where r.UserId == modelid select r;
return res.ToList();
        }

publicList<tbl_Rep_Profile> GetAllModels()
        {
DataClasses1DataContext context = newDataClasses1DataContext();
var res = from r in context.tbl_Rep_Profiles
select r;
return res.Take(5).ToList();
        }
    }
}

Click on View in Browser to see WCF service is working fine or not.



Image 6.



Image 7.

Now add service reference in application using click of Add Service Reference.



Image 8.

We are done with service work here; now to do the pages work.

MainPage.xaml

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ListBox Height="650" HorizontalAlignment="Left" Margin="11,17,0,0" Name="listBox1" VerticalAlignment="Top" Width="434" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Rep_Img_Name}" Width="150" Stretch="Uniform" HorizontalAlignment="Center" />
<TextBlock Text="{Binding UserId}"/>
<TextBlock Text="{Binding Rep_Title}"/>
<TextBlock Text="{Binding Rep_FirstName}"/>
<TextBlock Text="{Binding Rep_Email}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

</Grid>
</Grid>

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using WindowsPhoneApplication1.ServiceReference1;

namespace WindowsPhoneApplication1
{
publicpartialclassPage2 : PhoneApplicationPage
    {
public Page2()
        {
            InitializeComponent();

Service1Client svc = newService1Client();
            svc.GetAllModelsCompleted += newEventHandler<GetAllModelsCompletedEventArgs>(svc_GetAllModelsCompleted);
            svc.GetAllModelsAsync();
        }

void svc_GetAllModelsCompleted(object sender, GetAllModelsCompletedEventArgs e)
        {
            listBox1.ItemsSource = e.Result;
        }
    }
}

Now



Image 9.

So we are done here with WCF service using Windows Phone 7. Any question or comments are most welcome just drop me a line in c-sharpcorner comments section.