Windows Phone From Scratch #3 – First Project

List 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 arrow Application.  Choose the pointer in the upper left corner of the toolbar and click on the application name “My Appliccation” and then on theText Property 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.

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, Mini-Tutorial, Patterns & Skills, WindowsPhone and tagged , . Bookmark the permalink.

5 Responses to Windows Phone From Scratch #3 – First Project

  1. Pingback: Update für App-Zertifizierung und erfolgreicher Verkaufsstart für WP7 [NewsBites] - entwickler.de

  2. Jorg Spek says:

    Sorry about the anonymous post, pressed submit before I noticed the text boxes to enter my name…

    Anyway: it was me 😉

  3. Anonymous says:

    @Stephen Borders
    Sounds like you chose an incorrect project template. Follow the instructions precisely and you should be good to go:

    ‘select New Project. In the New Project dialog box, select Windows Phone in the left pane, Windows Phone Databound Application in the upper right’

  4. Stephen Borders says:

    I did the first project, when I did it it only had the title and main page name. It did not look like the picture. What am I doing wrong.

  5. Pingback: Choosing the Right Middle School Science Project

Leave a Reply

Your email address will not be published. Required fields are marked *