Creating first Windows Phone 7 Application in Silverlight

Objective

This is a pictorial tutorial on how to create first Silverlight mobile application for Windows 7.  This is very simple article giving you introduction how to setup the environment and run and debug the application.

Since everyone is talking about Windows 7 Mobile development. Let us learn together

Step 1

Download windows phone developer tools from Here.

Pre requisite are
1.    Visual Studio 2010
2.    Windows 7 or Vista
3.    2GB Ram
4.    3GB space available
To develop window 7 mobile phone application, you need
1.    Visual Studio 2010 Express for Windows Phone CTP
2.    Windows Phone Emulator CTP
3.    Silverlight for Windows Phone CTP
4.    XNA 4.0 Game Studio CTP
Once you download and install Windows Phone developer tool, all the requirements to develop application will get installed.
 

Step 2

From Start menu select Microsoft Visual Studio 2010 express edition   

Step 3

From File select New Project. From Silverlight for Windows phone tab select Windows Phone application project type.
 

Once selecting that a new project will get created with below solution structure 

Step 4

Open MainPage.Xaml and just add a text block. Set the text of the text block as Hello World. Here if you want you can change Title text also.
If you closely look into XAML, you will find there are two Grids inside main Grid. One is title Grid and other is body Grid.  So put your text block in the Body grid.

<phoneNavigation:PhoneApplicationPage 
    x:Class="FirstWindowPhoneApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phoneNavigation="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Navigation"
    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"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}">

    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitleGrid is the name of the application and page title-->
        <Grid x:Name="TitleGrid" Grid.Row="0">
            <TextBlock Text="MY First Mobile Application" x:Name="textBlockPageTitle" Style="{StaticResource PhoneTextPageTitle1Style}"/>
            <TextBlock Text=" Windows 7 Mobile application" x:Name="textBlockListTitle" Style="{StaticResource PhoneTextPageTitle2Style}"/>
        </Grid>

        <!--ContentGrid is empty. Place new content here-->
        <Grid x:Name="ContentGrid" Grid.Row="1">
            <TextBlock Text="Hello World" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Azure" />
        </Grid>
    </Grid>
    
</phoneNavigation:PhoneApplicationPage>

The code I changed is in bigger font.

Step 5

Just press F5 and in Windows 7 mobile emulator you can see the output. In center you can see Hello world.  Make sure in Debug option Windows Phone7 Emulator is selected. If it is selected to Windows Phone 7 Device then Visual studio will deploy the application to mobile device directly. 

Conclusion

This article explained how to create your first Windows 7 mobile application.