Building A Windows Phone App From Scratch

Windows Phone Tutorial

In this and the next few blog posts, we will build an application from scratch; covering all the details along the way.  The application we’re going to build is a simple four function calculator. We’ll build it using Visual Studio and Expression Blend.

To get started, open Visual Studio and create a new application using the Windows Phone Application template (under the Silverlight for Windows Phone Installed Templates). 

When prompted, click OK to indicate that you are building this for Windows Phone 7.1.

Don’t have Mango installed yet?  No problem, you can download everything you need here, or you can build this for Windows Phone 7.0.

BLEND

Like many others, I’ve found it very beneficial to build the UI of my applications using Expression Blend, which uses exactly the same solution files as does Visual Studio. There is no translation needed between the two programs, you can move freely back and forth without breaking or losing anything in the transition.

Right click on the project in the Solution Explorer and click on Open in Expression Blend.

Step 1 is to click on the Application Title in the art board and then to modify the application title in the Properties window.  Change the name to CALCULATOR – and remember to follow the Metro design guidelines and make the title all uppercase.

Change the ContentPanel Grid into a StackPanel

The default for the ContentPanel is for it to be a gird. Right click on the ContentPanel in the Objects and Timeline panel and select Change Layout Type –> StackPanel. 

Setting the Background Color On A TextBlock (sorta’)

We need first to create the display panel for the calculator. To do this we’ll use a TextBlock (a text field for read-only text). But TextBlocks can’t have their background color set, so we’ll solve this by wrapping the TextBlock in a Border control. As you’ll see the background color for the border control will act as a background to the Text.

Click on the ContentPanel to make it the active container, and double click on the TextBlock control in the toolbox, thus adding the TextBlock to the ContentPanel.  Right click on the TextBlock in Objects and Timeline and choose GroupInto -> Border. This places a Border control around the TextBlock.

Click on the Border control in Objects and Timeline and then click on the Background brush in the properties window. Next, click on the solid brush button and set the colors to 255, 255, 255 (white). Click on the TextBlock and set its foreground brush to black (0,0,0)

The Windows Phone Toolkit

We want to add the buttons for the calculator, and the ideal panel for these buttons is a WrapPanel – this is much easier to use for adding and aligning the buttons than, e.g., a grid. To use the WrapPanel, however, we have to first install the Windows Phone Toolbox.  Download the toolbox here, and install it. This provides access to the following components

• WrapPanel
• ToggleSwitch
• TimePicker
• TiltEffect
• PerformanceProgressBar
• Page Transitions
• LongListSelector
• ListPicker
• GestureService/Listener
• DatePicker
• ContextMenu
• AutoCompleteBox

Click on the chevron on the toolbox and type wrap into the search box.  Double click on the WrapPanel to add it to the toolbar and then to add it to the ContentPanel. 

Once the  WrapPanel has been added, add a Button to the WrapPanel, and set its contents to the letter “c” and its width and height to 100. Copy and paste that button so that you add a total of 16 buttons to the WrapPanel. 

Enter the text as shown in the figure, and set the zero button and the equals button to width = 200.  Name the buttons (e.g., Clear, Button01, Button02, etc.).

In the Objects and Timeline click on the first button in the WrapPanel and then shift-click on the last, highlighting all the buttons. Set the right margin to 10 to give the buttons a bit more padding and to fill the width of the page. Remember to go back to the two double wide buttons and set their width to 210 to compensate for the margins.

Before you leave the page you may want to fuss with the margins of the Border control to improve the alignment with the Buttons.

With the buttons in place, the next step is to create the event handlers, a task we’ll take up next time.