Windows Phone From Scratch #3 – First Project

Open Expression Blend (which you downloaded in mini-tutorial #1) and select New Project.  In the New Project dialog box, select Windows Phone in the left pane, Windows Phone Databound Application in the upper right, and name the application WPFS3.

The art board should display the outline of a simplified phone, with the default names for the application, the page and a number of two line items.  To see what this looks like in the phone emulator, press F5 (that is, run this project before we even begin work on it).

Once the emulator is running, the items should now appear, and by clicking and moving or “flicking” the list, you can scroll through the times.  Click on an item and you are brought to its detail. To get back to the list from the detail, click the back button (lower left) on the emulator. 

Congratulations, you’ve created your first application and it is pretty powerful.  We’ll return to this list/detail template in a future tutorial. For now, click File –> Close Project and let’s create your second application…

Your Second Project

Create a new project in Blend, this time choosing the first Windows Phone Template: Windows Phone Application.  Choose the pointer in the upper left corner of the toolbar and click on the application name “My Appliccation” and then on the properties tab (in the upper right hand corner). 

Click in the Text property window (under Common Properties) and change the application name to “Demo 3-2”   

Click on the Page Name on the image of the phone and then set its text to Welcome. 

Below the page name field is the content grid.  You can create rows and columns in the grid by clicking in the grid and then hovering over the  left and top margin, moving the divider line between the rows and columns as you choose and then clicking to create the division.   Create four rows (we’ll only use the top one for now) and two columns, with the left column taking about 1/3 of the available space.

TextBlock and TextBox

Our goal is to create a prompt and a fill in text box.  To do this, double on the TextBlock in the toolbox.  A TextBlock will appear on the form.  Grab it and drag it into the upper left cell of the grid.  In the properties window set its margin values to all zeros and HorizontalAlignment to Left and its VerticalAlignment to center.  Change its text to Full Name.

Return to the TextBlock in the toolbar and click on the small white triangle in the lower right hand corner.  A submenu of tools appears. Click on the TextBox.  Now click and drag in the right hand cell in the first row to describe the approximate size of the TextBox you want to appear there.  Again use the properties window, this time setting the name to FullName, the margins to zero, the HorizontalAlignment to left and the VerticalAlignment to center.  Set the height to Auto and the Width to 200.

Run the application and note that when you click in the TextBox the keyboard appars automatically. 

In the next mini-tutorial we’ll look at the Xaml you’ve generated.