Floating FB popout byF5debug

Learn Windows Phone 7 Development in 31 Days – Day 2 – Creating a Hello World Silverlight Application in WP7

 

Introduction:

In this article we are going to see how to create a Silverlight Windows Phone 7 Application using the Visual Studio IDE. In our earlier article we have seen the software and the hardware requirement in order to start develop a windows phone application. Here in this article we will create a Hello World Application and try to run it in the Windows Phone 7 Emulator to check the working model of the application. Let us jump start to see the step by step process on how to design the application using the Visual Studio 2010 IDE.      [more]


Steps:

As we discussed in our earlier article, after installing the Windows Phone 7 SDK, we can see the new template options available with the Visual Studio 2010. The new templates are one for creating Silverlight for Windows Phone Application and other one is for XNA Game Studio 4.0  which will help us to develop respective applications as per the requirement as shown in the screen below.

clip_image002

In this series we are going to concentrate more on the Silverlight for Windows Phone application development for the enterprise and commercial application builders. Also we will see how to create a XNA Game studio application as well so that it will give some idea on the difference between selecting the appropriate project. Let us create a Silverlight for Windows Phone 7 Hello world application, to start with first select the Windows Phone Application and provide the decent name to the project as shown in the screen below.

clip_image004

Clicking on OK will create the application, we can see a popup window asking to select the version of the Windows Phone 7 OS. We will go with selecting the latest platform, Windows Phone OS 7.1 as shown in the screen below.

clip_image006

Clicking on OK will open the project in Visual Studio 2010 IDE, we can see the windows phone 7 interface designer view and the XAML code view as shown in the screen below.

clip_image008

Now drag and drop the controls from the toolbox to get some user input and show output Hello World. Also alternatively we can write the XAML code to get the controls based on the requirement. Once we have the controls on to the designer our screen looks like below.

clip_image010

The XAML code for the above design is given in the below code block to get fair idea on the type of control used and the properties assigned for each control to get a better user interface. Just we can copy and paste this below XAML code on to any Windows Phone 7 Page to get this design. Here we have added 4 Text block, 2 text box for inputs and a button control to trigger some event. Also if you have noticed we have the header with message F5DEBUG APPLICATION in upper case which is the standard we should consider while developing our application.

XAML Code:

01

<Grid x:Name="LayoutRoot" Background="Transparent">

02

<Grid.RowDefinitions>

03

<RowDefinition Height="Auto"/>

04

<RowDefinition Height="*"/>

05

</Grid.RowDefinitions>

06

 

07

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

08

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

09

<TextBlock x:Name="ApplicationTitle" Text="F5DEBUG APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

10

<TextBlock x:Name="PageTitle" Text="F5Debug" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

11

</StackPanel>

12

 

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="25,106,0,0" Name="textBlock1" Text="First Name" VerticalAlignment="Top" />

16

<TextBox Height="72" HorizontalAlignment="Left" Margin="140,84,0,0" Name="textBox1" Text="" VerticalAlignment="Top" Width="310" />

17

<TextBlock Height="30" HorizontalAlignment="Left" Margin="25,167,0,0" Name="textBlock2" Text="Last Name" VerticalAlignment="Top" />

18

<TextBox Height="72" HorizontalAlignment="Left" Margin="140,145,0,0" Name="textBox2" Text="" VerticalAlignment="Top" Width="310" />

19

<Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="39,241,0,0" Name="SUBMIT" VerticalAlignment="Top" Width="377" Click="SUBMIT_Click" />

20

<TextBlock Height="51" HorizontalAlignment="Left" Margin="25,354,0,0" Name="textBlock3" Text="" VerticalAlignment="Top" Width="413" />

21

<TextBlock Height="50" HorizontalAlignment="Left" Margin="159,28,0,0" Name="textBlock4" Text="HELLO WORLD" VerticalAlignment="Top" Width="173" />

22

</Grid>

23

</Grid>

Now we are done with the design, now go to the code behind Submit button Event and write the below code which get the user input from the 2 text boxes (First Name and Last Name ) to provide a welcome message to the user as shown in the code behind.

C# Code:

01

using System;

02

using System.Collections.Generic;

03

using System.Linq;

04

using System.Net;

05

using System.Windows;

06

using System.Windows.Controls;

07

using System.Windows.Documents;

08

using System.Windows.Input;

09

using System.Windows.Media;

10

using System.Windows.Media.Animation;

11

using System.Windows.Shapes;

12

using Microsoft.Phone.Controls;

13

 

14

namespace F5debugWp7HelloWorld

15

{

16

public partial class MainPage : PhoneApplicationPage

17

{

18

// Constructor

19

public MainPage()

20

{

21

InitializeComponent();

22

}

23

 

24

private void SUBMIT_Click(object sender, RoutedEventArgs e)

25

{

26

string strFname = textBox1.Text.ToString();

27

string strLname = textBox2.Text.ToString();

28

 

29

textBlock3.Text = &quot;Welcome &quot; + strFname.ToString() + &quot; &quot; + strLname.ToString();

30

}

31

}

32

}

clip_image012

Now build the application and execute the project to check the output by pressing F5 from the keyboard directly or by pressing the play button from the IDE tool bar and we can see the output in the Windows Phone 7 Emulator as shown in the screen below.

Note – We need to check if the target to run the application is pointed to Windows Phone Emulator and not Windows Phone Device.

clip_image014

Now we can enter the test inputs and click on Submit button to get the welcome message as shown in the screen below.

clip_image016


Conclusion:

So in this article we have seen how to create a Hello world application in Windows Phone 7 application for Silverlight and we also seen how to use the controls with the designer.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Comments (1) -

gaurav
gaurav
1/3/2013 2:15:24 AM #

really very good and helpful article

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter