Getting started with Window Phone 7(Mango) Silverlight Application

This post is for those who are new to window phone 7 development. Recently I’ve created my first simple application using silverlight for Windows phone 7. Sharing the Getting started steps.
Firstly Download and install the Window phone SDK 7.1 (Mango) Beta2 package from below links. This is the latest release, 29th June 2011 and is packed with all necessary component to develop windows phone 7 application. You can download the setup with offline installer or online web installer. Below are the links:

• Download Web Installer of Windows Phone 7.1 Beta 2 SDK (3.0 MB)
• Download Offline/Standalone Installer of Windows Phone 7.1 Beta 2 SDK (723 MB)

More about the installation instructions and system requirements can be found in Microsoft Download Center.
Windows Phone 7.1 SDK Beta 2 includes the following items:

• Windows Phone SDK 7.1 Beta 2
• Windows Phone Emulator Beta 2
• Windows Phone SDK 7.1 Assemblies Beta 2
• Windows Phone SDK 7.1 Extensions for XNA Game Studio 4.0
• Microsoft Expression Blend SDK Preview for Windows Phone 7.1
• WCF Data Services Client for Window Phone 7.1
• Microsoft Advertising SDK for Windows Phone 7
• Silverlight 4 SDK and DRT

Once you done with the installation just Launch the visual studio. Follow the steps to create the Window phone Silverlight project.

1. Go to File-> New –> Project
2. select the “Silverlight for Window Phone” Template category and choose “Window Phone Application”

3. Now select the Window phone platform choose 7.1

Now after clicking OK the visual studio will open the default XAML file with the Emulator UI

Edit the markup and design a proper Form by giving the title and application name. And add a TextBlock, TextBox, Button and ListBox from the toolbox.

1. <Grid x:Name="LayoutRoot" Background="Transparent">
2. <Grid.RowDefinitions>
3. <RowDefinition Height="Auto"/>
4. <RowDefinition Height="*"/>
5. </Grid.RowDefinitions>
7. <!--TitlePanel contains the name of the application and page title-->
8. <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
9. <TextBlock x:Name="ApplicationTitle" Text="Silveright Application" Style="{StaticResource PhoneTextNormalStyle}"/>
10. <TextBlock x:Name="PageTitle" Text="Sample App" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
11. </StackPanel>
13. <!--ContentPanel - place additional content here-->
14. <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
15. <TextBlock Height="30" HorizontalAlignment="Left" Margin="27,28,0,0" Name="lblName" Text="Name:" VerticalAlignment="Top" />
16. <TextBox Height="72" HorizontalAlignment="Left" Margin="90,6,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="360" />
17. <Button Content="Add to List" Height="72" HorizontalAlignment="Left" Margin="90,71,0,0" Name="btnAdd" VerticalAlignment="Top" Width="200" Click="btnAdd_Click" />
18. <ListBox Height="437" HorizontalAlignment="Left" Margin="27,149,0,0" Name="listBox1" VerticalAlignment="Top" Width="411" />
19. </Grid>
20. </Grid>

Now if you go to design mode you’ll how the design will look

Now simply double click on Button and it’ll take you to the C# code event handler of button click event no surprise as usual. Write some code like below in the button click event handler:

1. private void btnAdd_Click(object sender, RoutedEventArgs e)
2. {
3. if (!string.IsNullOrWhiteSpace(textBox1.Text) && !listBox1.Items.Contains(textBox1.Text.Trim()))
4. {
5. listBox1.Items.Add(textBox1.Text);
6. textBox1.Text = string.Empty;
7. }
8. else
9. {
10. MessageBox.Show("Name is blank or already exist!");
11. }
12. }

Now Run the application and visual studio will automatically build the application and install it inside the simulator. This feature is provided in SDK that you can run multiple instance of visual studio against the single Emulator.
Input some values in the textbox and press Add button:
Output:

Ohh la la.. Before you go to create some meaningful application I hope this would raise some confidence in you ;).
Cheers!!