In this tutorial we are going to develop a simple “Hello World” application for the Windows Phone 7 using XAML. We will be using the Visual Studio 2010 IDE that should have been set up in the previous post.  When dealing with Visual Studio 2010 and Windows Phone 7, there are some important items to remember when programming.  The first is creating a Windows Phone 7 application gives you an option of the type of program you would like to design.  These options are as follows:

  • Windows Phone Application
    • A standard WP7 project for creating a windows Phone application
  • Windows Phone Databound Application
    • A standard WP7 project for creating a Windows Phone application using Lists and Navigation Controls
  • Windows Phone Class Library
    • A Windows Phone Class Library Project
  • Windows Phone Panorama Application
    • A standard WP7 project for creating a Windows Phone application using Panorama control
  • Windows Phone Pivot Application
    • A standard WP7 project for creating a Windows Phone application using Pivot control

In the screen above, you can see all of the options available under the Silverlight for Windows Phone tab. Select the Windows Phone Application and enter “WP7-HelloWorld” in the name field and the Solution Name should automatically fill itself in.  Make sure the “create a directory for the solution” is checked.  After pressing OK Visual Studio will generate code to make the IDE look like the image below.

The code found on the right hand side of the image above may look cryptic but Extensible Application Markup Language (XAML). XAML is based off of XML and was created by Microsoft for their WPF applications as well as Silverlight applications.  In the following code, explanations will be provided in the simplest of terms for easy understanding.



<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>

<!--TitlePanel contains the name of the application and page title-->
<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>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
</Grid>

The “Grid” node is used to denote a block of space on an application. The margins can be set on this node, otherwise it will encompass the rest of the screen.  The “TextBlock” is a block of text that will appear on any part of the screen based on the definitions given by the developer in the margins section. A “StackPanel” allows you the ability to stack elements in any specified direction. A “RowDefinition” allows the developer to set row-specific dimensions within the Grid.  This basic knowledge will allow us to modify the file above and make it display some text touting the “Hello World” emblem at the top of the application.

To make the screen above say “Hello World” we need to modify the StackPanel entitled “TitlePanel“‘s TextBlock with the x:Name of “ApplicationTitle” and change the “text” from MY APPLICATION to WP7 HELLO WORLD.  Then change the other Textbox with the x:Name of “PageTitle” and change the “text” from page name to Hello World.  After the modifications have been made the applications should look something like the image below.

Now I am personally not a big fan of empty space so let us add a map to the rest of the space available.  To do this we need to navigate to the toolbox on the left and drag the Map icon to the Windows Phone image on the right of the Toolbox panel.  The image may be small but you can resize it to the rest of the screen without modifiying any of the code and making the application look like the one below.

The below code is the complete MainPage.xaml including items not talked about nor modified.

<!--LayoutRoot is the root grid where all page content is placed-->

<!--TitlePanel contains the name of the application and page title-->

<!--ContentPanel - place additional content here-->

<!--Sample code showing usage of ApplicationBar-->
<!--

<phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1" />
<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2" />
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="MenuItem 1" />
<shell:ApplicationBarMenuItem Text="MenuItem 2" />
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>-->

In the next tutorial we will cover starting the development of a statistics tracker that will utilize a few text-boxes, a button and a database to store information.  You might remember this from the previous Android Development 101 tutorial commissioned for Hack A Day.  This will be a common theme in Development 101 tutorials as it covers almost all of the bases of basic understanding of that language as well as the thought process involved.  If you are eager to start on the next tutorial, here is a helpful resource to get you started.  Until the next tutorial, Happy Hacking!

<-- A Tutorial Series Beginning A Statistics Tracker –>
Share This