Part I Part II Part III
This is the third installment of a several part series/journey to use social network resources for Windows Phone 7 development and produce a reusable code base.
In Part II of the series two pattern frameworks were introduced. MVVM Light for the Model-View-ViewModel pattern, and MicroIoC for the Inversion of Container pattern. Both are great frameworks for adding maintainability, stability, and blendability to your WIndows Phone 7 applications.
Things progress quickly in the Windows Phone 7 development world. While writing this post Laurent Bugnion updated his MVVM Light framework. Thankfully updating the assemblies, snippets, and item templates is all fairly easy using the MVVM pattern. The source code for each series post has these updates and you can download them. It may be worth noting that it is a good idea to update 3rd party frameworks before publishing a phone application to market.
Silverlight Toolkit for Windows Phone
It is time to add the Silverlight Toolkit for Windows Phone. The Silverlight Toolkit released a new update on February 17th, 2011. The source code for this blog series was created a few days before that release. However, the final source will be updated to use it.
If you download the source code from Silverlight.Codeplex.com and extract it, you will see one subfolder that we are interested in.
It is in {unzipped path}\Release\WindowsPhone7. Here you see the projects for the Toolkit and the projects with names ending in “Design”. These are projects for the Blend and Visual Studio designers. There is also a strongly typed key file that is needed. That is PhoneToolkit.snk. So, refer to the image above and copy the folder Microsoft.Phone.Controls.Toolkit and the file PhoneToolkit.snk into the root of our phone solution. Then right click and add the project to the solution.
The Solution Explorer should look something like this once the project reference is completed.
The list of controls available to your application now includes all of the Toolkit controls. Here is that list:
Silverlight Toolkit People
It’s worthwhile to go back to the CodePlex project site and review the people working on the source code. One of the developers is Jeff Wilcox. He is a reliable and enthusiastic contributor to the platform. He keeps a blog at http://www.jeff.wilcox.name/blog/. Jeff had a control released on his blog called the PerformanceProgressBar. He blogged about that here: http://www.jeff.wilcox.name/2010/08/performanceprogressbar/. It is now part of the Silverlight Toolkit for Windows Phone. As you can see in the image above. To really understand how to use the control it is worth reading that older post. In it you find that if you need a progress bar control in your application for loading or waiting animations you should use the PerformanceProgressBar. Also, you should always always always set the boolean flag IsIndeterminate to false once you are done with it. It is a good idea to keep track of Jeff Wilcox to stay up to speed with control updates for the platform.
Coding4Fun Toolkit and a CustomInputPrompt Control
Ok, let’s go back to Reddit to see what’s new in terms of controls and helpers. If you scroll down a bit in the Reddit search for “wp7dev”, you’ll see a link to a control.
It looks like a CustomInputPrompt control is provided by a very cool WP7 community site. That community site is http://www.windowsphonegeek.com/. This site has a nice community around the phone platform. Reading the details of this blog you find that it is based on the work done by the Coding4Fun folks. They offer for the Windows Phone 7 platform something called the Coding4Fun Tools.
Let’s follow along this research tangent and take a closer look at Coding4Fun. In that library they have a really nice set of controls, actions, converters, and helpers (see image below).
Download the source code from CodePlex and add in the projects to the solution. The source code has three projects to copy into the root of the solution folder along with references that need to be updated to the Microsoft.Phone.Controls.Toolkit project. Once completed the solution tree should look something like this:
Now get the CustomInputPrompt control source code. Since it is a small project it can be added manually into the WindowsPhone.Controls project we have. The new control relies on a reference to the Coding4Fun.Phone.Controls project. So add a reference to that project in WindowPhone.Controls. After we copy the Themes folder and class file from that project into the WindowsPhone.Controls project, we have to update the namespace to WindowsPhone.Controls in two places.
The WindowsPhone.Controls project should look like the following:
Bindable ApplicationBar Control
Ok, back to the wp7dev Reddit search results. Scanning a bit further, you may find the following link. It is a must read blog about using MVVM Light with a bindable ApplicationBar control. That article is here.
To understand the issue a bit better, we have to go back to a blog from Laurent Bugnion regarding MVVM Light and the Application Bar. The issue is that ApplicationBarItems, which include the menu items and buttons, are not controls. Because they are not inherited from FrameworkElement in Silverlight the normal mechanism that allows binding a RelayCommand to them does not work. RelayCommand is a mechanism that gives MVVM Light the ability to separate event handlers into ViewModels instead of handling them in code behind of Views. For example, regular button controls have a click event that can be routed to the ViewModel, while default Application Bar buttons cannot. The ugly workaround for the out of the box Application Bar is that you have to break the idea of separation of concerns that MVVM gives us and put event handling code in the code behind of any View that has an ApplicationBar control. But using the bindable ApplicationBar control from the link above allows us to have proper MVVM. This will be illustrated in detail later in this series.
You can download the source code from here and add it to the Windows.Controls project. There will be namespace corrections as before but they are easy to make. There are other some changes to make when including the source code.
First we create a folder in WindowsPhone.Controls and call it “AppBar”. Then we copy the three main class files needed from the source code into that folder. The namespace for the three class files need to change to “namespace WindowsPhone.Controls.AppBar”. There is a required VisualTreeHelperExtensions.cs file that would best be located in the WIndowsPhone.Helpers project. So we copy that in to the other project, fix the namespace for it, and add a reference to the WindowsPhone.Controls project to the WIndowsPhone.Helpers project. So far so good. No circular references!
Behaviors for Marketplace Ratings and User Feedback
There are some nicely written Actions you can add to your applications. There is a recommendation to include a way for your customers to contact you for support. This was originally a requirement but as of February 24th, 2011 it became a recommendation. It seems natural to have an About page in every application with the ability to send an email to you for support or comments. Included in the above blog are two other marketplace related actions. These are four nice to have items in your application. They either navigate to or allow actions in the marketplace related to the application details, rating the application, or searching for similar applications. There is also an action to send emails to a support email address you specify. They can easily be added to the Windows.Helpers project. Download the source code from here and adapt it into the solution using the techniques described earlier. Put the Actions in the WindowsPhone.Helpers project. Read about the source code here. It’s important to note that this code requires two additional references. Also, in the WindowsPhone.Helpers project add references to Microsoft.Phone and System.Windows.Interactivity. Later in this series we will have an About page and will implement one or more of these features.
Summary
There are 4 major control and helper libraries in the phone solution at this point. If you read through the series from the beginning you should have a good idea about how to include more community source code in your phone projects. This post explained the basic process of researching for frameworks and controls and how to adapt them into your architecture. Be aware of licensing restrictions as you do this because some licenses cannot be used for commercial purposes or some authors require certain rules to use the code. As it stands right now, this phone solution has enough architecture and supporting code to write a nice application. In the next part of the series we look at adding a real data source from somewhere, mocking up design-time data for the service, and finishing up on implementing some of the controls that are available in the solution.
Source Code
7c7e1255-f8ea-4583-b684-d6ffd0691f67|0|.0
Code, Silverlight, WP7