Creating a Windows Phone 7 Application Consuming Data Using a WCF Service

Introduction: 

The objective of this article is to create a WCF service that retrieves data from the database using LINQ to SQL classes and a Windows Phone 7 application that consumes that service to display the data. 
The article contains three main parts:

1. Creating the database
2. Creating the WCF Service
3. Creating the Windows Phone 7 application that consumes the WCF service

The above mentioned scenario has been illustrated with an example. In the example I have created a table that contains some details about an employee (Employee ID, Employee Name and Phone No). When the user of our Windows Phone 7 application enters an employee id, he will be able to retrieve the details of that employee from the database through the WCF service.
1. Creating the Database:
The following steps have been followed to create the database

Now some data are added to the table.

Now we have created our database.

2. Creating the WCF Service
We have followed the steps given below to create the WCF Service.

Open the Visual Studio 2010 & create a new WCF Service Application. (In our case, the name of the WCF service is MyService)

 

Right Click on the project name and then add a new item.

 

Now add a LINQ to SQL class to the project.

 

Now go to server explorer and add a new data connection. (Right click on Data Connection and select Add Connection)

 

Give the server name, select the database and click test connection. Then click OK.

 

Now from server explorer select your database and table and drag the table to the middle pane.

 

Now open the IService1.cs and delete all the default codes. Write down the following code there. I have explained the code later.

 

Now open the Service1.svc.cs and delete all the default codes. Write down the following code there. I have explained the code later.

 

Right click on service1.svc and select the "view in browser" option.

 

Our service is running now (In Cassini server).

 

Copy the URL of the service.

3. Creating the Windows Phone 7 application that consumes the WCF service

1. Open the Microsoft Visual Studio 2010 Express for Windows Phone and create a Windows Phone Application. (In our case the name of the Windows Phone 7 application is MyClientWin7)

In MainPage.xaml drag and drop a TextBox and a Button as shown below.

1. 
2. 
   
3. The XAML code for MainPage.xaml is given below
4. 
   
5. <phoneNavigation:PhoneApplicationPage 
6.     x:Class="MyClientWin7.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:phoneNavigation="clr- namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"    FontFamily="{StaticResource PhoneFontFamilyNormal}"    FontSize="{StaticResource PhoneFontSizeNormal}"    Foreground="{StaticResource PhoneForegroundBrush}">
7.     <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">        <Grid.RowDefinitions>            <RowDefinition Height="Auto"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>
8.         <!--TitleGrid is the name of the application and page title-->        <Grid x:Name="TitleGrid" Grid.Row="0">            <TextBlock Text="MY APPLICATION" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>            <TextBlock Text="page title" x:Name="textBlockListTitle" Style="{StaticResourcePhoneTextPageTitle2Style}"/>        </Grid>
9. Right click on the project name (MyClientWin7) and add a new item. Then select a Windows Phone Portrait Page and add it to the project.
10. 
    
11. 
12.  
13. In Page1.xaml, drag and drop a list box.
14. 
    
15. 
16. 
    
17. The XAML code for Page1.xaml is given below
18. 
    
19. <navigation:PhoneApplicationPage 
20.     x:Class="MyClientWin7.Page1"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:navigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    SupportedOrientations="Portrait"    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480">
21. </navigation:PhoneApplicationPage>
22. Now right click on the References and add a Service Reference.
23. 
    
24. 
25.  
26. In the Address paste the URL of the WCF service which is running and click Go. Then click OK.
27. 
    
28. 
29.  
30. Now open the MainPAge.xaml.cs (Double click on the button "Find") and write down the follwing code.
31.  
32. Open Page1.xaml.cs and write down the code.
33.  
34.             listBox1.ItemsSource = e.Result;
35.         }    }
36. Replace the code for the ListBox in the Page1.xaml in the following way.
37.  
38. Rebuild the solution and start debugging. The following screen will appear in the emulator.
39. 
    
40. 
41.  
42. Enter some Employee ID in the textbox and click the Find button. (Here I have entered U22975 in the text box )The following screen will appear then showing the details of the employee whose ID was entered in the textbox.
43. 
    
44. 
45. 
    
46. 
    
47. 
    
48. using System;

1. using System.Collections.Generic;
2. using System.Linq;
3. using System.Runtime.Serialization;
4. using System.ServiceModel;
5. using System.ServiceModel.Web;
6. using System.Text;
7. using System.Collections.Generic;
8. 
   
9. namespace MyService
10. {
11.     [ServiceContract]
12.     public interface IService1
13.     {
14.         [OperationContract]
15.         List<MyEmployee> FindEmployee(string uid);
16.      
17.     }
18. }
19. 
    
20. 
21. 
    
22. Explanation of the code :
23. 
    
24. The interface Iservice1 is the service contract of our WCF service. We have declared only one function (FindEmployee) as our operation contract. This function takes a string as an argument (which is the employee ID entered by the user) and return a List of MyEmployee which is our data model class.
25. using System;
26. using System.Collections.Generic;
27. using System.Linq;
28. using System.Runtime.Serialization;
29. using System.ServiceModel;
30. using System.ServiceModel.Web;
31. using System.Text;
32. namespace MyService
33. {
34.     public class Service1 : IService1
35.     {
36.         public List<MyEmployee> FindEmployee(string uid)
37.         {
38.             DataClasses1DataContext context = new DataClasses1DataContext();
39.             var res = from r in context.MyEmployees where r.EmpID == uid select r;
40.             return res.ToList();
41.         }
42.     }
43. }
44. 
    
45. 
46. 
    
47. Explanation of the code :
48. The class Service1 is our service that implements the service contract IService1. In this class we have defined the operation contract FindEmployee. In this method, we have created a data context object. Then we have written a simple LINQ to SQL query that fetches the details of a particular employee whose employee id was passed as an argument of the operation contract. The method returns a list of objects of MyEmployee class. (We could have returned only one object of MyEmployee class also as we are fetching data using the primary key)
49.         <!--ContentGrid is empty. Place new content here-->        <Grid x:Name="ContentGrid" Grid.Row="1">            <TextBox Height="32" HorizontalAlignment="Left" Margin="40,87,0,0"Name="textBox1" Text="" VerticalAlignment="Top" Width="401" />            <Button Height="70" HorizontalAlignment="Left" Margin="152,304,0,0"Name="button1" VerticalAlignment="Top" Width="160" Content="Find" Click="button1_Click" />        </Grid>    </Grid>
50.  </phoneNavigation:PhoneApplicationPage>
51.     <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">        <Grid.RowDefinitions>            <RowDefinition Height="170"/>            <RowDefinition Height="*"/>        </Grid.RowDefinitions>
52.         <!--This is the name of the application and page title-->        <Grid Grid.Row="0" x:Name="TitleGrid">            <TextBlock x:Name="ApplicationName" Text="MY APPLICATION" Style="{StaticResource PhoneTextPageTitle1Style}"/>            <TextBlock x:Name="ListName" Text="page title" Style="{StaticResourcePhoneTextPageTitle2Style}"/>        </Grid>
53.         <!--This section is empty. Place new content here Grid.Row="1"-->        <Grid Grid.Row="1" x:Name="ContentGrid">            <ListBox Height="444" HorizontalAlignment="Left" Margin="20,81,0,0" Name="listBox1"VerticalAlignment="Top" Width="434" />        </Grid>    </Grid>
54. using System;
55. using System.Collections.Generic;
56. using System.Linq;
57. using System.Net;
58. using System.Windows;
59. using System.Windows.Controls;
60. using System.Windows.Documents;
61. using System.Windows.Input;
62. using System.Windows.Media;
63. using System.Windows.Media.Animation;
64. using System.Windows.Shapes;
65. using Microsoft.Phone.Controls;
66. 
    
67. namespace MyClientWin7
68. {
69.     public partial class MainPage : PhoneApplicationPage
70.     {
71.         public MainPage()
72.         {
73.             InitializeComponent();
74. 
    
75.             SupportedOrientations = SupportedPageOrientation.Portrait |SupportedPageOrientation.Landscape;
76.         }
77. 
    
78.         private void button1_Click(object sender, RoutedEventArgs e)
79.         {
80.             string s = textBox1.Text;
81.             this.Content = new Page1(s);
82. 
    
83.         }
84.     }
85. }
86. 
    
87. 
88. 
    
89. Explanation of the code:
90. 
    
91. In the button click event (button1_Click), we have stored the textbox entry in a string and move to a new page (Page1) . In the Page1 constructor, we have passed the textbox entry.
92. (Here we will find an error in new Page1(s) as the constructor defined in Page1.xaml.cs has no arguments. But we will change the constructor in the next step. Then the error will be removed.)
93. using System;
94. using System.Collections.Generic;
95. using System.Linq;
96. using System.Net;
97. using System.Windows;
98. using System.Windows.Controls;
99. using System.Windows.Documents;
100. using System.Windows.Input;
101. using System.Windows.Media;
102. using System.Windows.Media.Animation;
103. using System.Windows.Shapes;
104. using Microsoft.Phone.Controls;
105. using MyClientWin7.ServiceReference1;
106. 
     
107. namespace MyClientWin7
108. {
109.     public partial class Page1 : PhoneApplicationPage
110.     {
111.         public Page1(string s)
112.         {
113.             InitializeComponent();
114.             Service1Client proxy = new Service1Client();
115.             proxy.FindEmployeeCompleted += newEventHandler<FindEmployeeCompletedEventArgs>(proxy_FindEmployeeCompleted);
116.             proxy.FindEmployeeAsync(s);
117. 
     
118.         }
119.      void proxy_FindEmployeeCompleted(object sender, FindEmployeeCompletedEventArgse)
120.         {
121. }
122. 
     
123. 
124. 
     
125. Explanation of the code:
126. 
     
127. In the Page1 constructor, we have created a proxy object of the service. Now all WCF service calls from Silverlight are made through asynchronous communications. The FindEmployee contract is implemented in the generated proxy with an asynchronous method FindEmployeeAsync and an event proxy_FindEmployeeCompleted that is raised when the operation has completed.
128. The proxy_ FindEmployeeCompleted event sets the ItemSource property of the list box with the return value of the operation contract.
129. <ListBox Height="444" HorizontalAlignment="Left" Margin="20,81,0,0" Name="listBox1"VerticalAlignment="Top" Width="434" >
130.                 <ListBox.ItemTemplate>
131.                     <DataTemplate>
132.                         <StackPanel Orientation="Horizontal">
133.                             <TextBlock Text="{Binding EmpID}"/>
134.                             <TextBlock Text="{Binding EmpFirstName}"/>
135.                             <TextBlock Text="{Binding EmpLastName}"/>
136.                             <TextBlock Text=" " />
137.                             <TextBlock Text="{Binding PhoneNo}"/>
138.                         </StackPanel>
139.                     </DataTemplate>
140.                 </ListBox.ItemTemplate>
141.             </ListBox>
142. Explanation of the code:
143. 
     
144. In this code we have overriden the ListBox control's ItemTemplate and supplied a custom DataTemplate. This DataTemplate uses one StackPanel to stack some textblocks together horizontally. These textblocks are used to bind to the data from the table in a readable manner. 

(Sưu tầm)