Windows Phone 7 (Mango) Tutorial - 1 - Creating a Hello World Application


Recently thought to take some break from core Silverlight programming and start learning something new. As I will be working on Silverlight in office, hence decided to start exploring Windows Phone 7 in my off time. Though, it is also in Silverlight, but there we can learn something new apart from the actual Silverlight development. Now onwards, I will write about Windows Phone 7 programming and whatever I will explore, will post here in my blog.

 

Jump started with my first exploration to create a "Hello World" application in Windows Phone 7.1 (Mango) public Beta. This is the first post of the series. As a beginner I will be contributing to the series and if something that I can improve in any of the posts/demos, please let me know by providing your inputs using the Comment box. Hope this series will help the beginners to learn about it.

 

Index - Windows Phone 7 (Mango) Tutorial

 

Prerequisite

If you are new to Windows Phone 7, you need to install the Developer Tools. Currently Windows Phone 7.1 (Mango) is in it's public beta release. You can download it from any of the following path:

Once downloaded, start the installation process to continue. Remember that, if you have Visual Studio 2010 already installed in your development environment, you must install Service Pack 1 before installing the Windows Phone 7.1 Developer Tools.

 

You can find more information about the installer and System Requirements here: Download Windows Phone Developer Tools 7.1 Beta

 

 

Create Project

Once we are done with setting up the development environment, we are ready to create our first project. Open Visual Studio 2010 and create New project. In the "New Project" dialog Window:

  1. Select "Silverlight for Windows Phone" from the left panel. The respective templates will filter out in the right panel.
  2. As we are creating a new Application project, select "Windows Phone Application" from the right panel.
  3. Enter a name and path for the project.
  4. Click "OK" to continue.

Have a look into the below screenshot for reference:

image

 

A second dialog will popup asking you to chose the target version for our application. We will chose "Windows Phone 7.1", which is the latest version. Click "OK" to continue creating the first project.

 

image

 

 

This will create the project for you. In the Solution Explorer, you will notice that, the project has one App.xaml and it's associated CS file, a MainPage.xaml and it's associated CS file, three JPG images named as "ApplicationIcon", "Background" and "SplashScreenImage". No need to explain more on this as the names are self explanatory.

 

image

 

 

Analysis of Code

Lets start doing the analysis with the existing XAML code that is present in the MainPage.xaml file. On creation of the project, the IDE template will create the default XAML inside MainPage.xaml file.

 

Here is the complete code of that:

 
<phone:PhoneApplicationPage 
    x:Class="HelloWorld.MainPage"
    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="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
 
    <!--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>
 
    <!--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>-->
 
</phone:PhoneApplicationPage>

 

 

If you check, it has a Grid with 2 rows. The first one is to set the title of the page and the second one is to set the content of the page.

 

If you proceed to the next code placed just below of it, you will see a StackPanel having two TextBlock inside it. The first TextBlock contains title of the Application and the second TextBlock contains title of the Page. Here is the code snippet of the same:

 

image

 

If you go little bit more, you will find another Grid placed in the second Row. This is nothing but the content area. You can place any content here. Here is the screenshot of the same code snippet:

 

image

 

If you go in depth more, you will find the below commented code:

 

image

 

What is that commented code? This is the part for Application Bar. You can place additional buttons specific to your application. You can also place menu items in this section to do some specific tasks. We will discuss on it in later posts.

 

 

Playing with the Code

Now time to play with the code. Let us add the application title and page title there. Go to the Title Panel and modify the XAML code like this:

 

image

 

Let's run the application now. You will see that, it will open the Windows Phone Emulator on the screen. After the loading completes, it will show the application page in the UI. There you will notice that, it has the proper title for the Application and Page.

 

In our example, "Hello World App" is the Application title and "Home Page" is the page title. Have a look into the below screenshots for more details:

 

imageimageimage

 

 

Lets add a TextBlock as the content of the page. To do this, go to the ContentPanel and add a TextBlock as shown below:

 

image

 

If you run the application now, you will see the below UI in the Windows Phone Emulator containing the content text:

 

image

 

 

 

Application List

If you want to see the hosted application in the Emulator, you can do that too. This step will show you how the application will look in the installed application list. Follow the below steps to see it in action:

 

imageimageimage

 

 

In emulator, you will see a Back button as shown in the first screenshot. Click it and that will navigate you to the Home Screen. As shown in the second screenshot, click the small arrow marked with the circle above. You will navigate to the installed application list. There you will find our "Hello World" application listed there as shown above.

 

 

Download

You can find the above demo source code here. You can download it freely and execute. Checkout the code for further details. Make sure that, you have installed the Windows Phone 7.1 (Mango) Developer Tools public beta.

 

Hope this article will help you to quick start your first application development in Windows Phone 7. Stay tuned for my next article on this topic. I also tweet. If you are a Twitter user, follow me @kunal2383 to stay in touch. Happy coding.


16 comments

  1. Hi Kunal!
    i found your article very informative. and i m following you from today. so please dont stop exploring WP7.1, because i m following you.
    regards
    Abdul

    ReplyDelete
  2. Thanks Abdul. Yes, I will be continuing the series and currently working on some basic stuffs a beginner must know before writing any code further. I will post it tomorrow. So, stay tuned. Don't forget to leave your feedback and queries (if any).

    ReplyDelete
  3. Awesome post sir. Thank you for sharing it with us.

    ReplyDelete
  4. Very nice article for a beginner like me. Thankyou.

    ReplyDelete
  5. Thank you for sharing with good, useful survey.

    ReplyDelete
  6. Hi Kunal........can i install wp7 sdk without visual studio 2010 express. Because i installed vs2010 ultimate.

    ReplyDelete
  7. Hi Sumit,

    You can't control the installation. It will automatically install the express edition but it's upon you whether to use that. Install it and as you already have the ultimate edition of the IDE, use it (vs 2010 ultimate) as primary development environment.

    ReplyDelete
  8. Kunal your blog is the excellent material for the windows development.

    ReplyDelete
  9. Replies
    1. Thanks Nazmul for the comment and I am glad to hear that it helped you. Do checkout the complete series.

      Delete
  10. Thanx for the article really helpful...

    ReplyDelete
  11. Using the Hello World program as a classroom exercise with my kids here in Secondary school..I try to use a variety of computer languages and development environments to create wide thinking and flexible approach programmers of the future.

    ReplyDelete
  12. Finally, simple and clear Hello World example. Thank you for your effort ! From today, I'm your follower on twitter.

    ReplyDelete
  13. Finally, simple and clear Hello World example. Thank you for your effort !

    ReplyDelete
  14. Hi Kunal I'v woked over Android platform and new to Windows Phone 7.X platform.Will be following you through out the series.Also would appreciate if you post some sample code for Apps

    ReplyDelete
  15. Hello There. I found your blog using msn. This
    is a very well written article. I'll be sure to bookmark it and come back to read more of your useful info.

    Thanks for the post. I will certainly return.

    Check out my webpage; http://www.streamingfilmeronline.com/moviestreaming/157370

    ReplyDelete


 
© 2008-2014 Kunal-Chowdhury.com | Designed by Kunal Chowdhury
Back to top