Introduction
With the release of Windows Phone 7 developer tools, Microsoft brings the user-friendly, high productivity Visual Studio Development environment to Windows Phone 7. Developers who have used Visual Studio will find a familiar environment. Even iPhone application developers familiar with XCode will find it easy to migrate to WP7 developer tools and become productive quickly.
Comparing the iPhone and Windows Phone 7 Tool Set
Visual Studio 2010 Express for Windows Phone is a full featured IDE specifically created for designing, developing and debugging Windows Phone 7 applications. This IDE, along with other tools, namely, Expression Blend, XNA Game Studio, and Windows Phone Emulator cover the entire cycle of Windows Phone application development.
WP7 developer tools cover the full functionality that is provided by the iPhone application developer tools. The following table gives an overview of the functionality of each of these tools and how they correspond to iPhone development equivalents.
|
Functionality |
Audience |
iPhone Development tools |
|
WP7 Development tools |
|
Primary UI design - |
UI Designer |
3rd party tools. |
Expression Blend for Windows Phone |
|
|
colors, gradients, animation |
||||
|
UI design |
UI Designer / |
Interface Builder |
Visual Studio 2010 Express for |
|
|
Programmer |
Windows Phone and Expression Blend for Windows Phone |
|||
|
App development (Coding) |
Programmer |
XCode |
Visual Studio 2010 Express for Windows Phone |
|
|
Game development |
Programmer |
XCode |
XNA Game Studio |
|
|
(Coding) |
||||
|
Testing / Emulation |
Tester |
iPhone simulator |
Windows Phone Emulator (included |
|
|
in Visual Studio 2010 Express) |
||||
As you plan to develop applications for WP7, your iPhone team structure and overall development process can remain the same. The entire team of designers, developers and testers, familiar with iPhone development tools, will find it easy to migrate to the WP7 toolset.
Development Lifecycle and Window Phone 7 Developer Tools
Windows Phone 7 development tools facilitate a close collaboration between designers and developers through the use of Expression Blend and Visual Studio. These two tools share the same file structure as well as actual source files. Expression Blend uses XAML for UI design, a declarative XML based language, which is also consumed by Visual Studio. This allows the designer and the developer to work seamlessly together while it provides clear separation of responsibilities between the two.
Project Management
Like XCode, Visual Studio Express for WP7 is a full featured IDE. It allows developers to manage the entire structure of the development project; the source files as well as the various resource files. Visual Studio allows you to configure the application codebase, called a Visual Studio Solution, as a collection of projects, i.e. as a separate functional unit. This makes it easy to manage source files, to share code as well as to manage the work among team members. Visual Studio integrates a compiler and a debugger, both of which can be invoked either interactively or via the command line.
Let us create a sample application. Start Visual Studio Express for WP7 and click File, then New Project. In the New Project dialog select Windows Phone Application. Type "ShoppingList" for the name of the project and click OK. Visual Studio will create a new project for you as shown below. The Solution Explorer window shows the solution we just created. This solution has only one project, also named ShoppingList. The project contains the sources, resources and properties.
Unlike XCode, Visual Studio Express for WP7 does not provide integration with source control. You can use Visual Studio Professional edition which integrates various source control systems, such as Subversion, that iPhone application developers are familiar with. Alternatively, you can use the Visual Studio Team System, an edition designed particularly for greater communication and collaboration among software development teams, for developing your WP7 application.
UI Design Tools
WP7 developer tools include two UI design tools, namely, Expression Blend and Visual Studio UI designer. WP7 uses SilverLight, with its XML markup language, for the UI specification.
Visual Studio UI design tool is comparable to Interface Builder. iPhone application developers who know Interface Builder will find it easy to use this tool. The main page for our ShoppingList solution, MainPage.xaml, is already opened in the VS UI designer tool for editing (shown above).
Let us change the title of the application, as well as the title of the current page. Right click on the title, "MY APPLICATION" and select Properties. In the properties window, select Text and type "SHOPPING LIST." Similarly, change the title of the page by typing "my list" in the Text property of the title.
Open the Toolbox, drag a TextBlock and drop it on the page. Position it so that it is at the top left. Right click on the TextBlock and update its Text property to "Item:"
Drag a TextBox from the toolbox and place it underneath the above the textblock. Update its Text property to wipe it clean. Right underneath Properties, click on "TextBoxl", and type "txtltem" to change the ID of the textbox to txtItem. Resize the textbox by dragging its right bottom corner so that its width is 300.
Similarly, drag a button and drop it to the right of the TextBox. Change its Content property to "Add", and its ID to "btnAdd". Resize the button so that its width is 140. And finally, drag another TextBox and place it underneath the txtItem textbox. Resize it so that it covers the rest of the phone screen. Update its ID to "txtList" Update its Text property to "Nothing here yet!" Your application should look something like this:
Click F5, or Debug and Start Debugging, to compile the application and launch it. This will start the WP7 emulator, deploy the ShoppingList application and run it. You can click on Add, but nothing will happen as we have not written any logic yet.
Developers can use context menus to add event handlers or set control properties. Its integration with Visual Studio allows for direct manipulation of controls and makes it easy to add logic to UI controls.
Expression Blend for WP7
Expression Blend for WP7 is a full featured visual UI design tool created for designers. There is no exact counterpart to this in the iPhone development toolset. Similar to VS Design tool, Expression Blend also allows drag and drop to design the UI. The tool, shown below, allows pixel accurate layout of controls. They can easily create and use color palettes and gradients, as well as special effects such as reflections and shadows. The tool can import Photoshop files, to make it easy to bring your iPhone application resources to your Windows Phone application. Designers can also use the tool to define application behavior, as well as certain animations, without any programming.
While designers use Expression Blend, and programmers use the Visual Studio Design tool to hook up their application logic to the UI design, the VS UI design tool can also be used for the UI design, as we saw earlier. Both tools include the same control set, that provides accurate fidelity to their run time visual representation, making it easy to visualize the application. The two design tools use the same project structure and share source files. Both tools consume/produce XAML, the Silverlight XML declarative markup language, for the interface design. This makes it very convenient for a designer to work on the design using Expression Blend while the developer uses Visual Studio to design the logic behind the application. It creates a smooth design and development workflow.
Editing code
Visual Studio includes a simple to use, full featured, yet configurable, source editor. It provides various features that will be familiar to XCode users. These include flexible search, rich editing, code formatting, and the ability to outline/hide code.
Let us add some logic to our application. Stop the running application by clicking Debug, followed by Stop Debugging. Double click the "Add" button which will open MainPage.xaml.cs with a method btnAdd_click in the MainPage class.
Edit the newly added method to add logic to add items to the shopping list. Type: string tStr = txtItem.Text;
As soon as you type "t" for txtItem, VS will bring up the auto-completion dialog as shown below. The Visual Studio counterpart for XCode auto-completion is called IntelliSense.
Also type:
As soon as you type, "String." VS will pop up the auto-completion dialog. Typing "Is" will take you to the class methods of the String class.
VS IntelliSense is richly featured. As opposed to relying on the history alone, it disambiguates using the code context and .NET reflection, for intelligent auto-completion. It can suggest or even complete variable names, parameters, as well as class and method names. It even generates appropriate code where needed, as shown below using an unrelated code fragment:
To complete the event hookup, it will also generate an empty stub for the event handler, i.e., the button1_click method.
Visual Studio provides another very useful feature called Code Snippets, which is a counterpart to text macros in XCode. It allows you to insert code fragments in the active file with a few mouse clicks.
