Getting started with Windows Phone 7 (WP 7) development is very easy - as long as you know C# and either WPF and/or Silverlight. Even if you just know how to program in C# it's not too difficult because the development method follows the general pattern of any Windows development.
So let's build a program and see how it all works.
First you have to download the development tools. When you install this you will either get the standalone Express version of WP7 or the environment will be added onto any existing Visual Studio 2010 you might have installed. In addition a copy of Expression Blend and XNA studio - both customised to work with WP7 applications - are installed. Expression Blend is what you need to create "designer" style user interfaces, complete with animation and other graphics effects. XNA is what you need if you want to create 2D/3D action games. If you just want to create a functional application, complete with a "normal" user interface, then you need to create a Silverlight project which is the subject of this article.
If you want to know about XNA and expression blend lookout for future articles.
Hello Phone 7
Once you have downloaded and installed the tools start either Visual Studio or the Express version running and select File, New Project and Select Windows Phone Application from the New Project dialog box. The next screen that you see will include a view of the user interface and the XAML that creates it in the drag-and-drop editor. To build your first "Hello World" application simply open the Toolbox and drop a Button and a TextBox on the page.
Next double click on the button and you will be taken to a code editor with a click event handler for the button already defined. If you enter into the body of the event handler the single line:
textBox1.Text = "Hello Phone 7 World";
then you have completed your first application. Click the green "run" button in the toolbar or press F5 and the Windows Phone 7 emulator will appear and eventually, it can be slow to load, your application will run. If you click on the button you will see the message appear in the textbox. When you have finished running your program there is no need to stop the emulator - it will be reused the next time you run a program and you will save the time it takes to load.
At this point you should also discover how the emulator's control bar works. If you hover the cursor at the top right-hand corner you will see a vertical toolbar appear. Using this you can zoom the emulator window and rotate it to simulate using the phone in different orientations.
It is also worth setting break point on the single line in he event handler and running the program again to discover that the usual Visual Studio debugging facilities work.
WP 7 features - Multi-touch
After writing such a simple program, if you know Silverlight or WPF then you should be fairly happy with getting started on your own real application. It's just a matter of finding out which controls are supported and investigating the additional classes supplied to make use of the hardware and other services. However there are two immediate features of WP 7 that make any Silverlight/WPF programmer wonder how to proceed - Multi-touch and rotation.
Multi-touch refers to the new way of manipulating on-screen objects that has become so popular with the introduction of the iPhone. The idea is that instead of just having one click or drag location you can have multiple locations. So for example placing two fingers on the screen and then moving them apart can be used to signal a re-sizing operation.
How to test WP7?
WP 7 supports multi-touch, as does Windows 7 and Silverlight, but there is a small problem with trying it out. The WP 7 emulator also supports multi-touch but only if you are running it with hardware that supports multi-touch. In practice this means a multi-touch monitor and these are far from standard and comparatively expensive. In many ways a better option if you want to test multi-touch applications is to acquire a real WP 7 phone and test using the sort of device the application will run on.
As to the matter of how you actually support multi-touch then it helps to compare the situation with how you support drag-and-drop say. Drag-and-drop, like a simple click, is something you have to support by creating the appropriate event handlers. For something simple like a click you implement a single event handler and respond to the click event by doing whatever the click is supposed to set in motion.
For a more complex user interaction such as drag-and-drop you have to implement multiple event handlers - one for mouse button down, one perhaps for mouse move and one for mouse button down. These even handlers correspond to picking the object up, dragging it and dropping it.
Now think about multi-touch in the same terms. You clearly need to create event handlers that respond to events at two or more locations on the screen and manipulate the object concerned in an appropriate way. What this means is that multi-touch is inherently more complicated.
The good news is that multi-touch events that correspond to single touch events are automatically converted to mouse events and can be handled in the usual way. Hence if the user taps on the screen a mouse click event is generated. This means that unless you really need to handle true multi-touch events you can more or less ignore the problem. If you do want to handle all multi-touch events you can switch off the auto conversion.
To handle multi-touch you need to look at the new Manipulation events:
- ManipulationStarted
- ManipulationDelta
- ManipulationCompleted
You can think of these as being the multi-touch analogs of MouseDown, MouseMove and MouseUp events. A multi-touch action will always start with a ManipulationStarted event, a sequence of ManipulationDeltas and a final ManipulationCompleted events. The details of each of the events is passed via their own event argument object and includes the object that was the source of the event and location.
The key to understanding how this all works is to realise that even a multi-touch event generally only involves a single object. For example, if you touch a single object - an image say - with a single finger then a single ManipulationStarted event is generated and if you move the finger a set of ManipulationDelta events is generated until you remove the finger and a ManipulationCompleted event occurs. If you touch another object then the current manipulation ends and a new ManipulationStarted is generated. If you touch the same object with another finger then the manipulation isn't terminated and ManipulationDeltas are generated as the fingers move with the location being an average position of all of the fingers.
You might think that this isn't of much use but there is another event argument that makes a difference. Let's suppose that an object is touched by two fingers that move position on the screen and move apart. The Translation property gives the average movement of the two fingers but the scale property indicates how far they have moved apart. The ManipulationDelta events give the incremental translation and scale values so that you can show the object being manipulated in intermediate states. The ManipulationCompleted event provides cumulative translation and scale so that you can determine a final position and scale. You should now be able to see how you could implement a two finger drag-and-scale quiet easily.
You might also have noticed that there appears to be no rotation parameter. At the moment you can't use Manipulation events to implement a translate, scale and rotate operation. If you want to do this then you have to work at the next level down with events that give you the position of individual fingers - this is not as easy a task. Rotation will be supported in future releases of the system.
At this point you are probably waiting for an example of a two-finger drag-and-scale. Unfortunately I don't have access to a touch screen device that works with the emulator and so I can't provide one. Even if I could provide one the chances are that you don't have the hardware to try it out at the moment - so it's something that we will have to return to when enough WP 7 devices are available to make it a useful exercise.
In addition the latest (July) release of the development tools still has some problems with multi-touch implementation.
What to do in the interim?
Unless multi-touch is in some way central to your application your best course of action is to ignore it for the moment. Basic multi-touch support is provided by the operating system and it is best to concentrate on building the standard UI and behaviours of your application and retrofit any multi-touch support you need later. After all how important is drag-and-drop in most of your desktop applications?
Screen Rotation
To return to something that we can try out. How do you support rotation? The answer is remarkably simple as the framework automatically supports rotated layouts. All you have to do is state that it is ok for the system to rotate your application. You can do this by setting a property:
public MainPage()
{
InitializeComponent();
SupportedOrientations =
SupportedPageOrientation.
PortraitOrLandscape;
}
You can also set the property using XAML via the properties window. With this small change we can now run the application again and if we rotate the emulator using its control menu the application is re-layed out in the new orientation - what could be easier.
Using the Phone
Creating a user interface for WP 7 is more or less the same as creating a Silverlight, or WPF even, user interface. The only unfamiliar user control is the Application bar and this is very easy to use and much like a standard menu. What is more interesting is the way that you can make use of the built in hardware and software. Using the build in hardware with the emulator is a little tricky at the moment as it doesn't actually emulate many of the facilities. So for a final example, let's write a short application that dials home - yes an ET App.
Start a new project and find a suitable graphic to act as the background for the app. Remember that in a real phone images and other resources would have to be downloaded possibly over the GSM network - so keep things small.
There are many ways to include resources in a project but the simplest is to copy the graphic into the projects main directory and then add the file to the project. Right click on the project folder and use Add Existing Item. Next use the properties window to set the background property of the Grid to the new graphic that you have aded to the project. If you have successfully added the graphic to the project then the graphic will be one of the options automatically offered to you.
Next place a button on the Grid, change its Content property to read "Phone Home" and size and position it. Finally click on the two default text items and change their content to E.T.App and Phone home respectively.
The final UI should look something like the screen dump:
Next we define the code. Double click on the button and you will be transferred to the code editor ready to enter the details of the button click event handler. First we need to create an instance of the PhoneCallTask class:
PhoneCallTask phone = new PhoneCallTask();
To make this work we need to include:
using Microsoft.Phone.Tasks;
at the start of the program. To discover other phone utilities that you can use investigate the Phone.Tasks namespace.
Now that we have the PhoneCallTasks object using it is very easy:
phone.DisplayName= "Home";
phone.PhoneNumber="123 456 789";
phone.Show();
All that happens is that we set the DisplayName property to something sensible and the PhoneNumber property tot he number we wan to dial. Finally calling the Show method makes the Phone Dialler load and display.
The complete code is:
using Microsoft.Phone.Tasks;
namespace WindowsPhoneApplication1
{
Public partial class MainPage :
PhoneApplicationPage
{
// Constructor
PhoneCallTask phone = new PhoneCallTask();
public MainPage()
{
InitializeComponent();
SupportedOrientations =
SupportedPageOrientation.
PortraitOrLandscape;
}
private void button1_Click(
object sender, RoutedEventArgs e)
{
phone.DisplayName= "Home";
phone.PhoneNumber="123 456 789";
phone.Show();
}
}
The initial view of the ET App is very simple looking:
If you click or touch the button in the case of a real phone then you start the process or dialing the number:
Of course there are some things we need to do before the App is suitable for deployment - in particular we need to deal with the possibility that it might be suspended and then restarted by the operating system. But this is a simple program for a simple task and this is how it should be. Developing applications for WP 7 is fairly easy and getting easier as the development tools and the class libraries develop.
Cheers !!!