Windows Phone From Scratch #4 – First Xaml

In the previous mini-tutorial in this series you created a form in which you placed a prompt and text box for the first name using Expression Blend and drag and drop.  It was probably not obvious that as you created columns and rows and as you dragged controls onto the form, Blend was creating Xaml code for you that represented your design.

To see this most clearly, create a new project, Demo 3-3 in Blend.   Before making any changes, choose the split view button on the upper right hand corner of the art board (see image) . You should now see your design surface on top and your Xaml code on the bottom.

Before you take any action, there is quite a bit of Xaml code already in place.  This corresponds to the visible text and layout that you see when you bring up the new project.  Let’s examine it line by line:

The first 14 lines are the PhoneApplicationPage element and its related attributes, many of which use Static Resources, an easy way to share styles and other assets.

<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    x:Class="Demo_3_2.MainPage"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

Line 10 sets the FontFamily using a resource, and similarly lines 11 and 12 set the font size and the foreground color using resources.  Notice, on line 13 that the application is set to work only in Portrait mode (as opposed to landscape).

Below this Xaml you’ll find the main Grid. A grid is like a table on steroids.  You can set rows and columns with relative or absolute sizes.  In this case, the Grid is named LayoutRoot and its background color is set to transparent.  There are just two rows defined, the first to size Auto (size to whatever is in the row) and the second to relative sizing. Since there is only one row set to relative sizing, it will consume all the remaining height in the grid.

<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

Inside the Grid is declared a StackPanel.  StackPanels can align objects vertically (one atop the other) or horizontally (one to the right of the previous).  This StackPanel is placed in the first row (Grid.Row = “0”) and inside the StackPanel are the two TextBlocks used to hold the application and page names respectively,

<StackPanel
   x:Name="TitlePanel"
   Grid.Row="0"
   Margin="12,17,0,28">
   <TextBlock
      x:Name="ApplicationTitle"
      Text="MY APPLICATION"
      Style="{StaticResource PhoneTextNormalStyle}" />
   <TextBlock
      x:Name="PageTitle"
      Text="page name"
      Margin="9,-7,0,0"
      Style="{StaticResource PhoneTextTitle1Style}" />
</StackPanel>

Finally, below the StackPanel is a Grid that acts as a placeholder for your content, called ContentPanel.

<Grid
   x:Name="ContentPanel"
   Grid.Row="1"
   Margin="12,0,12,0" />

Setting the Application and Page Name

In the previous example, you set the application name text and the page name text using the properties window.  Do so now, in the split view, and you’ll see that the Text field of the two TextBlocks are updated. Next, click in the grid, and then in its border to create four rows and two columns as you did previously.  As you add these, you can see the row and column definitions appear in the Xaml.

<Grid.ColumnDefinitions>
   <ColumnDefinition
      Width="144*" />
   <ColumnDefinition
      Width="312*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
   <RowDefinition
      Height="86*" />
   <RowDefinition
      Height="66*" />
   <RowDefinition
      Height="59*" />
   <RowDefinition
      Height="67*" />
   <RowDefinition
      Height="361*" />
</Grid.RowDefinitions>

Our goal was to set the columns in a 1:2 relationship, which we have almost accomplished (144:312 = 1:2.17).  We can fix this by hand by changing the column widths to 1* and 2* respectively, typing the new values right into the Xaml (and observing the artboard being updated as a result).

As you did previously, drag a TextBlock into position, set its VerticalAlignment to center and its HorizontalAlignment to left, and reset its margins to Zero. Finally, set its text to Full Name.  All of this is reflected in the attributes of the TextBlock in the Xaml,

<TextBlock
   Height="30"
   HorizontalAlignment="Left"
   Name="textBlock1"
   Text="Full Name"
   VerticalAlignment="Center" />

Finally, add in the TextBox and set its margins and alignment, and observe the Xaml,

<TextBox
   TextWrapping="Wrap"
   d:LayoutOverrides="Height"
   Grid.Column="1"
   HorizontalAlignment="Left"
   Width="200"
   VerticalAlignment="Center"/>

You can learn a fair bit of Xaml by observing what is produced as you move and adjust objects on the art board.

An argument can be made that you need not concern yourself with the Xaml and that you can do all that needs doing with the artboard and the properties window.  That is a strong argument.  The counter-argument is that understanding the Xaml makes it easier to see the subtleties in a design and to convey changes… I’m not convinced by the second argument but having learned Silverlight, as so many of us did, when it was required to know Xaml, I’m not quite ready to give up on direct Xaml coding just yet.

Coding Just In Xaml

As a final example of the equality of Xaml with the designer, close this project and open a new project in Visual Studio (which has somewhat better support for Xaml-based coding).  Call your new project Demo 3-4.

Visual Studio opens, by default wit the designer on the left and the Xaml on the right.  To close the designer we need to swap these positions using the swap button (top of the divider) and then close the right hand window using the close window button (bottom of the divider) – see the images.

At this point you should be looking only at the Xaml.  Let’s recode this one last time using only Xaml, and then we’ll examine our results.

To begin, locate the StackPanel and within it the two TextBlocks.  Change the Text for the first from MY APPLICATION to Demo 3-4 and change the text in the second from page name to welcome being careful to preserve the quotes.

Next, in the Control Panel Grid, create rows and columns as shown in the following code,

 <Grid
    x:Name="ContentPanel"
    Grid.Row="1"
    Margin="12,0,12,0">
    <Grid.RowDefinitions>
       <RowDefinition
          Height="1*" />
       <RowDefinition
          Height="1*" />
       <RowDefinition
          Height="1*" />
       <RowDefinition
          Height="1*" />
       <RowDefinition
          Height="4*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
       <ColumnDefinition
          Width="1*" />
       <ColumnDefinition
          Width="2*" />
    </Grid.ColumnDefinitions>

 </Grid>

The first four rows are all 1* meaning that they will all have the same relative height.  I chose to make the final row 4*.  Why? 

The two columns are 1* and 2* creating a 1:2 size relationship.

Next, we add the Xaml for the TextBlock.  Notice that Intellisense makes this easy to do, with, for example, the alignments offered in a drop down box based on their enumerated values. With the TextBlock in place, be sure to add the TextBox, giving the TextBox a name so that you can address is programmatically (from code) as needed.  Note that the TextBlock will have no content initially, so you’ll want to set the width to a specific value (e.g., 200) rather than using Auto.

<TextBlock
   Text="Full Name"
   Grid.Row="0"
   Grid.Column="0"
   HorizontalAlignment="Left"
   VerticalAlignment="Center" />
<TextBox
   Name="FullName"
   Width="200"
   Height="Auto"
   Grid.Row="0"
   Grid.Column="1"
   HorizontalAlignment="Left"
   VerticalAlignment="Center" />

Run the application and the result should be identical to what you built in the designer.  In fact, if you stop the application and go back to the code, you can switch back to split view and see that the designer was updated by the Xaml just as the Xaml is updated by the designer.