Windows Phone 7 Development Basic Notes


Introduction:

Windows Phone 7 is a great release from Microsoft, that gives developer to build very rich apps and has ability to compete with other mobile app platforms.

You can read through the release details on Scott’s blog

http://weblogs.asp.net/scottgu/archive/2010/09/16/windows-phone-7-developer-tools-released.aspx

Here I’ll share few basic design notes, which are very much required to know for a WP7 developer.

Development Environment Setup

For setting up your development environment you will be needed the below pre-requisites

Pre-requisites:

  • OS – Windows Vista or Windows 7 and you need to have a DirectX 10 capable graphics card.
  • Windows Phone Developer Tools package- You can download
  1. Visual Studio 2010 Express for Windows Phone
  2. Windows Phone Emulator
  3. Silverlight for Windows Phone
  4. XNA 4.0 Game Studio

Types of Application

There are two main categories under which the different applications can be developed

1)     Silverlight for Windows Phone

The below template are available in this category

2)     XNA Game studio 4.0

This framework helps to develop interesting Games which can be design wonderfully using object oriented programming.

Gaming studio consist of below applications

Design Tips

How to set the design view length and width?

WP7 app design view will be appearing on an emulator view, as it gives you the actual device effect as below.

So for developing lengthier screen which is more than the length of the design view, the design parameters should be set.  The d:DesignHeight=”768″ parameter needs to be set accordingly in the <phone:PhoneApplicationPage/> tab.

How to design with stack Grid panel?

Grid panel is used to set as the base panel or content panel, so that page content can be placed into it. Below is the sample script for this

<!–BasePanel is the root grid where all page content is placed–>

<Grid x:Name=”BasePanel” Background=”Transparent”>

<Grid.RowDefinitions>

<RowDefinition Height=”Auto”/>

<RowDefinition Height=”*”/>

</Grid.RowDefinitions>

<!—YOUR CONTENT–>

</Grid>

Below are the properties to remember while designing the content inside Grid

1.  Height

2.  Width

3.  Grid.Column

4.  Grid.Row

5.  Grid.ColumnSpan

6.  Grid.RowSpan

How to design with stack panel?

Stackpanel is used to place the controls inside and design with proper orientation(vertical and horizontal).

For example: if you want to place three images horizontally as below


Or place three images vertically as below


Sample Code:

<StackPanel Width=”480″ x:Name=”ImageStackPanel” HorizontalAlignment=”Center” VerticalAlignment=”Stretch” Margin=”0″ Orientation=”Horizontal”>

<Image Height=”159″ Name=”Image1″ Stretch=”Fill” Width=”160″ Source=”images/1.jpg” />

<Image Height=”159″ Name=”Image2″ Source=”images/2.jpg” Stretch=”Fill” Width=”161″ />

<Image Height=”159″ Name=”Image3″ Source=”images/3.jpg” Stretch=”Fill” Width=”157″ />

</StackPanel>

How to activate scroll bar?

Scroll bar option can be introduced by just including the ScrollViewer tag.

Sample Code:

<Grid x:Name=”ContentPanel” Grid.Row=”1″  Margin=”0,0,0,-132″>

<ScrollViewer>

<StackPanel Width=”480″ x:Name=”ImageStackPanel” HorizontalAlignment=”Center” VerticalAlignment=”Stretch” Margin=”0″ Orientation=”Vertical”>

<Image Height=”159″ Name=”Image1″ Stretch=”Fill” Width=”160″ Source=”images/1.jpg” />

<Image Height=”159″ Name=”Image2″ Source=”images/2.jpg” Stretch=”Fill” Width=”161″ />

<Image Height=”159″ Name=”Image3″ Source=”images/3.jpg” Stretch=”Fill” Width=”157″ />

</StackPanel>

</ScrollViewer>

</Grid>

How to navigate to other  page

Navigate method of NavigationService class is required to navigate to the next screen/page/window.

e.g.

NavigationService.Navigate(new Uri(“/mypage2.xaml”, UriKind.Relative));

This method also helps to send data from one screen to another using QueryString.

e.g.

NavigationService.Navigate(new Uri(“/mypage2.xaml?parm=” + TextBox.Text, UriKind.Relative));

How to retrieve the parameter?

e.g.

String myparam= String.Empty;

if (NavigationContext.QueryString.ContainsKey(“parm”) == true)

{

myparam = NavigationContext.QueryString[“parm”].Trim();

}

For more details, please visit below links

1) Getting Started with Windows Phone Development

http://www.windowsphonegeek.com/Resources/GettingStarted#getstarted

2) WP7 Dev Guide 

http://www.windowsphonegeek.com/Resources

3) Application Platform Overview for Windows Phone

http://msdn.microsoft.com/en-us/library/ff402531(v=VS.92).aspx

Thanks for reading this article

Swagat