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.


img1.jpg

Image1.

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

img2.jpg

Click OK.

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

img3.jpg

Image3.

Drag and drop database tables.

img4.jpg

Image 4.

You can rename table name if you want.

img5.jpg

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.

img6.jpg

Image 6.

img7.jpg

Image 7.

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

img8.jpg

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

img9.jpg

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.

Next Recommended Readings