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 Calculator 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.  Doubleimage 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.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Essentials, Mango, Mini-Tutorial, Patterns & Skills, WindowsPhone and tagged . Bookmark the permalink.

11 Responses to Building A Windows Phone App From Scratch

  1. Billy says:

    It’s great that you are getting thoughts from this
    article as well as from our discussion made at this place.

  2. Pingback: Tutorial: Building A Windows Phone App From Scratch | wpseven | Windows Phone 7 | WP7

  3. swapneel says:

    Not able to install and find the WrapPane and above link to install manually also not valid.
    What is correct process to load wrap panel on blend toolbox

  4. Pingback: Building A Windows Phone App From Scratch – www.nalli.net

  5. CB says:

    I haven’t been able to find the WrapPanel, although I have tried several times to install WP7 toolkit.
    What am I doing wrong?
    Thanks —

  6. Pingback: » Saintchubs.com

Leave a Reply

Your email address will not be published.