WP7 Tutorial 4 : Designing the User Interface

As a part of our WP7 Tutorial Series, now we will learn to create the UI elements for the HelloPhone application. The application is very simple. When completed, the application UI will contain a caption, a text box, and a button.

To use the application, you enter some text into the text box and then, when you click the button, the application displays a banner with the text that you typed. It will look something like the following figure.

1. In Solution Explorer, double-click MainPage.xaml to open this file in the designer.

The designer provides two separate views to edit XAML files, Design and XAML view. In Design mode, you have a emulator design where you can drag and drop controls from the toolbox, as well as select, resize, move, and set properties for existing controls. In XAML mode, you have a markup editor that lets you edit the XAML code in the page. You can work with either of the mode. You also have a split mode, with the editor window showing both views simultaneously.

2. In this task we are mainly focusing upon editing the XAML manually. Once the coding part is done you can come back to designer view to see the results. You can also have a full screen XAML view.

3. In the XAML markup generated by the default Windows Phone application template, locate the Grid container element named LayoutRoot. Its purpose is to arrange the elements on the page. Inside its RowDefinition property, insert an additional row between the two existing rows and set the value of its Height property to Auto. This row will soon include a textbox and a button.

4. Root Grid element also contains some nested elements with each one assigned to a different row of the outer grid by defining a Grid.Row property. Now locate the Grid element named TitleGrid and Set the text property of first text block element inside the inner grid to ” Windows Phone 7 Series”. Similarly Hello phone is added to next text block.

5. Now, Find the Grid element named ContentGrid, assign it to row 1, which is generally empty initially, and paste the following  XAML markup inside this element.

      
      
    
    
FontSize="{StaticResource PhoneFontSizeExtraLarge}" Margin="20,20,10,20"/>

6. To complete the design of the page, add a third row to contain the banner with the message entered by the user.To create this row, insert the following  XAML markup immediately before the end tag of the outer grid.

    
               Foreground="#FFFF9A00" HorizontalAlignment="Stretch"
               TextWrapping="Wrap" TextAlignment="Center" FontWeight="Bold" />
  

7. Click the Design view and examine the layout of controls on the page.
In our next tutorial we will learn how to “Handle Events from the User Interface”.