Introduction

In this article we will see how we can make a simple bus finder application for Windows Phone 7.

Requirements

The following are required to develop the bus finder application:

• Visual Studio 2010
• Windows Phone 7 Developer Tools
• Expression Blend for Windows Phone 7
• Silverlight 4
• Silverlight 4 Toolkit

Creating a Windows Phone 7 Application

Fire up Visual Studio 2010, and select the template category Silverlight for Windows Phone and then select the Windows Phone Application.

About the application

As the application name suggests "Serach Your Bus", the application would search the bus would be available in the current bus-stop, if the source and destination parameters are entered correctly. The application would be referenced with a service, which would return the list of buses available for the current search.

Designing the application pages

As per our application needs, we need 3 pages to be displayed such as the search screen, list of buses screen and finally a screen that would display the bus details. As the number of controls would be less in the pages we just discussed, let's just put all the pages in the form of grid and we would display the grid as per the page requests.

So, let's design the pages:

Search Page

The search page should contain two textboxes for source as well as destination. Also two buttons such as clearing the contents, and for searching.

Buses List Page

The search would yield a list of buses, so to display it we need a listbox. The listbox's item template should contain the bus numbers. The following is the design of the ItemTemplate for the ListBox.

Further, we need to display the results in a vertical scrollable area, so we need to have Wrap Panel, unfortunately we do not have wrap panel for Windows Phone 7, but we can have it if we have the Silverlight toolkit's dll and reference. The assembly could be located in the following location:

Now let's change the ItemsPanel template for the ListBox to display as per our need:

Bus Detail Page

Bus detail page would consist of the detail of the bus selected in the previous page. The controls required are textblocks and image control. To identify the bus type, we would have different images of the buses and based on the bus type we would display the bus image.

Navigation

The navigation achieved for these pages are based on the visibility of the respective Grids. The following is the Object and Timeline panel for our application on page level.

To be able to navigate back we have a "Back" button on top of the content area. To use the capability of navigating back and forth as you might have seen in a wizard screen, our primary variable would be an integer variable named as ScreenNumber.

As you see in above image we have all grids inside one PhoneApplicationPage, so let's write a method which would handle the visibility based on the required page.

Also we need to handle the Back Button Click event, which is as follows:

Now that we have achieved the navigation scenarios, let's jump to our low level design. We would have a class which would consist of the following properties:

Let's have some data, using which we could test our application. Create a database and have a table with minimum requirement for each column. As I am staying in Bangalore, I have collected the data from Google and inserted in the database. As this application would be in market place for Windows Phone 7 applications, the database would be in a server.

Now let's create a WCF Service application in a different solution.

We are creating it such that it would be hosted in server.

In the WCF Service Application project, we need to have the model as per the table and it's columns specification.

To access this service in Windows Phone 7 we need to have a "clientaccesspolicy.xml", and a "crossdomain.xml". As Windows Phone 7 is the Silverlight based application, it requires the mentioned files to be at server side.

As you see in the service project we have an interface, there we should have the methods we are going to have for our service.

We have basic read operation method, which would return the list of buses.

Now let's implement the interface method in the SVC class.

As this is a single database read operation, we are not going to have another layer for the business logic, so let's have the SQL Connection to establish the connection with the database.

Now in the method, we should have the logic how it would search from the database, as I mentioned earlier this would be simple search as per now, so we are not using stored procedures currently, which could be used.

The logic displayed above would search the source and destination and display the result.

Service part is done here, we could either host the service in the IIS or if you are testing the service then you could simply browse the service and the service would be available in local host.

To use the service in the Windows Phone Application, we need to add a Service Reference to the application, this could be achieved by copying the url and paste in the service reference dialog.

The selected area of the url would change based on the type of host.

After you add the reference, Visual Studio would create a file "ServiceReference.ClientConfig" which would have the details of the service.

Now, we need to have the reference of the Service namespace and we would have a private variable of the service class.

Now let's write code for search button click.

As the response from the service might take some time, so we would display the Busy grid. When the service request is completed we would collapse the busy grid.

Assume that we have the buses list displayed, so how would we display a bus detail. As you recollect, we have the ListBox which displays the data, so SelectionChanged, would lead us to the bus detail page.

As the binding would take care of the data, we have to re-use it in the bus-detail page.

Some basic Tips for using Color/Brushes in Windows Phone Application

The themes available for Windows Phone 7 are Dark and Light, so if you do not use the Brushes correctly, your text or color would be invisible or inappropriate for the theme.

If you do not want to handle such complexity for Brushes, you can use the "PhoneAccentBrush" Brush to automatically change the color on change of Color selection in Windows Phone settings.

Another way you can handle this by checking the Visibility of the themes. Such as follows:

And we can implement the change we want to do if the theme change happens. For e.g. we have a Path (arrow) element in the UI, which should change the color accordingly when the theme is changed.

If you remember we have discussed on the type of bus display as image. We would implement this using a converter. Let's create a custom Converter, which would bind the image based on the bus type.

And in XAML behind we could refer the namespace and have the converter as resource and then use it as StaticResource wherever required.

Now we can test the application.

Conclusion

We have successfully created an application for Windows Phone 7 called as Bus Finder, we could add more data for different cities and we could have the detail data then the search would be really good for India users. Hope you liked the article, thanks for reading.

About Diptimaya Patra

Diptimaya Patra is a Client App Dev MVP, also a software consultant in the following areas: Silverlight, WPF, Expression Blend, Windows Phone 7. Follow him in tweeter @dpatra This author has published 13 articles on DotNetSlackers. View other articles or the complete profile here.

---

Discussion

Subject	Author	Date
useful article, thanks	Andrey Evtukh	7/28/2011 9:32 AM
Useful article, thanks Reply | Permanent link

---

Please login to rate or to leave a comment.