Web Service on Windows Phone

• Download FLV video demo - 4.4 MB
• Download ZIP video demo - 10.2 MB
• Download source - 300.8 KB
• Download source - 528.6 KB

Introduction

Mobile devices are becoming more and more connected to the internet. That's encouraging developers to develop applications that use this advantage. Web services are on the top of these apps. Nowadays, web services are a must known technology for every developer.

Requirements

As it is a Windows Phone Application, you will need to have Visual Studio for Windows Phone Express installed or Visual Studio 2010, which you can download from:

• https://dev.windowsphone.com/en-us/downloadsdk and 
• http://www.microsoft.com/visualstudio/en-us/try

About this Application  

This app is going to use Bing Maps to show the route between two points on the map and display its length. As I will focus more on the web service, you could find Bing Maps and Bing Maps v2 helpful to start manipulating Bing Maps. Bing Maps in Windows Phone is a simple article to start with.

Assuming that you have dropped and dragged the Map control from the Toolbox to the main page and had inserted the following code related to the ApplicationBar:

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" 

    IsMenuEnabled="True" Opacity="0.9">
        <shell:ApplicationBarIconButton IconUri="/Icons/plus.png" 

        Text="Zoom In" Click="zoomIn_click"/>
        <shell:ApplicationBarIconButton IconUri="/Icons/minus.png" Text="Zoom out" 

         Click="zoomOut_click"/>
        <shell:ApplicationBarIconButton IconUri="/Icons/A.png" 

        Text="Aerial mode" Click="Aerial_click"/>
        <shell:ApplicationBarIconButton IconUri="/Icons/R.png" 

        Text="Road mode" Click="Road_click"/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="Choose my position" 

            Click="chooseMyPosition_click"/>
            <shell:ApplicationBarMenuItem Text="Locate Me" Click="locateMe_click"/>
            <shell:ApplicationBarMenuItem Text="Set Pushpin" Click="setPin_click"/>
            <shell:ApplicationBarMenuItem Text="Add Pushpin" Click="addPin_click"/>
            <shell:ApplicationBarMenuItem Text="Show Route" Click="showRoute_click"/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Let's add these using statements to use the Maps features:

using Microsoft.Phone.Controls;
using Microsoft.Phone.Controls.Maps;
using System.Device.Location;

After that, we wil be able to write this code:

//declaring the two Pushpins and the Polyline
Pushpin pin1 = new Pushpin();
Pushpin pin2 = new Pushpin();
MapPolyline poly = new MapPolyline(); 

Some initialization is required to display the Polyline in the Map:

//Initialization for polyline
poly.Locations = new LocationCollection();
poly.Opacity = 1.0;
poly.StrokeThickness = 3;
SolidColorBrush mySolidColorBrush = new SolidColorBrush();
mySolidColorBrush.Color = Colors.Green;
poly.Stroke = mySolidColorBrush; 

Now, we will start using the web service. So, first of all, let's right click on our project and click on Add Service Reference:

On the address field, paste this reference to the route web service http://dev.virtualearth.net/webservices/v1/routeservice/routeservice.svc/mex and click "Go", then the services will appear in the Services field, to prove it's not a wrong reference.

When clicking the OK button, some files will be generated in your project. So now, we can use that distributed service through its reference.

private void showRoute_click(object sender, EventArgs e)
{
    //creating the reference to the service
    ServiceReference1.RouteServiceClient proxy = 
      new ServiceReference1.RouteServiceClient("BasicHttpBinding_IRouteService");
    ServiceReference1.RouteRequest rr = new ServiceReference1.RouteRequest();
    
    //this service requires a key
    rr.Credentials = new ServiceReference1.Credentials();
    rr.Credentials.ApplicationId = 
        "Asa2x7ZzhYIHauji6TzIkcf3TIDznTgBaPKQehsyE4taOz19Mx4fP4lyihqbTj7D";
    rr.Options = new ServiceReference1.RouteOptions();
    rr.Options.RoutePathType = ServiceReference1.RoutePathType.Points;

    //declaring the two points
    ServiceReference1.Waypoint wp1 = new ServiceReference1.Waypoint();
    ServiceReference1.Waypoint wp2 = new ServiceReference1.Waypoint();

    //the first location is my location (from)
    wp1.Location = new ServiceReference1.Location();
    wp1.Location.Latitude = SharedInformation.myLatitude;
    wp1.Location.Longitude = SharedInformation.myLongitude;
    wp1.Description = "";
    //the second location is the destination (to)
    wp2.Location = new ServiceReference1.Location();
    wp2.Location.Latitude = SharedInformation.pinLat;
    wp2.Location.Longitude = SharedInformation.pinLong;
    wp2.Description = "";

    //setting the parameter to send
    rr.Waypoints = 
      new System.Collections.ObjectModel.ObservableCollection<ServiceReference1.Waypoint>();
    rr.Waypoints.Add(wp1);
    rr.Waypoints.Add(wp2);

    //invoking the web service
    proxy.CalculateRouteAsync(rr);
    proxy.CalculateRouteCompleted += 
      new EventHandler<ServiceReference1.CalculateRouteCompletedEventArgs>
                                            (proxy_CalculateRouteCompleted);  
}

It's very important to know that the web service in Windows Phone is called in an asynchronized way. That's why the expression "Async" is added to the end of the method's name. That avoids the interface's thread to be blocked.

The IntelliSence could help you to show the different methods you can invoke from the web service with its full signature, as shown here:

The result returned by this web service is returned through the second parameter of the proxy_CalculateRouteCompleted method, which will be executed when there is a response from the service. This result is a list of points. Linked one to the next, they will draw the route we need to show using the polyline.

public void proxy_CalculateRouteCompleted
(object obj, ServiceReference1.CalculateRouteCompletedEventArgs e)
{
    try
    {
        foreach (ServiceReference1.Location location in e.Result.Result.RoutePath.Points)
        {

            poly.Locations.Add(new GeoCoordinate(location.Latitude, location.Longitude));
        }

        //add the Polyline to the Map
        map1.Children.Add(poly);
        
        //display the distance between the two Pushpins
        pin2.Content = "It's " + e.Result.Result.Summary.Distance.ToString() + "Km far away!";
    }
    catch (Exception exc)
    {
        MessageBox.Show(exc.Message);
    }
}

The use of the try catch block is because the service may return some exceptions such as Point so far away from any road..

Some screenshots of the final app:

So that the result will be like this:

I hope you liked my article.

If you need any more information, please let me know.