Blogger news

Blogger templates

Sunday, January 30, 2011

Windows 7 Mobile Application using Silverlight 4

Microsoft has launched its new approach to the mobile phone market, “WINDOWS 7 Mobile Application”.
For programmers Windows 7 application supports two popular and modern programming platforms: Silverlight and XNA.

Silverlight—A derivative of Windows Presentation Foundation (WPF)—has already given Web programmers unprecedented power to develop sophisticated user interfaces with a mix of traditional controls, high-quality text, vector graphics, media, animation, and data binding that run on multiple platforms and browsers. Windows Phone 7 extends Silverlight to mobile devices.
XNA—the three letters stand for something like “XNA is Not an Acronym”—is Microsoft’s game platform supporting both 2D sprite-based and 3D graphics with a traditional game-loop architecture. Although XNA is mostly associated with writing games for the Xbox 360 console, developers can also use XNA to target the PC itself, as well as Microsoft’s classy audio player, the Zune HD.
I am planning to follow Silverlight. Silverlight are using for Rich Internet Applications(RIA) and XAML is the markup language for layout of user interface controls and panels. Click here for Silverlight basics.

System Requirments
Visual studio 2010 for Windows Phone Installed. Please click here to download Silverlight for Wnidows phone 7 and click here to download Silverlight 4 sdk. Install both.
Now I am going to start with legacy “Hello World” example. Steps to open new Windows 7 mobile application.
1. Open Visual Studio 2010.
2. File->Open new Project->Silverlight for windows phone->Windows phone application. Name the project and clcik ok as below,

Click image to expand

Now you will get a window like this,

Click image to expand.

Several files have been created for this HelloWindowsMobile project and are listed under the project name in the Solution Explorer over at the right. I will introduce some important files.

When you expand Proprties folder in solution explore you can see two xml file AppManifest.xml and WMAppManifest.xml as shown below,

Open WMAppManifest.xml you can see the title as “HelloWindowsPhone” . This is the name used by the phone and the phone emulator to display the program in the list of installed applications presented to the user. The application is running of Windows 7 Phone emulator. Visual studio default select windows 7 phone emulator as shown below picture,

Click image to expand

The other choice is “Windows Phone 7 Device.” This is how you deploy your program to either the emulator or an actual phone connected to your computer via USB.

Well every thing is OK and run the application now. Phone emulator will appear on the desktop. You will get a screen as below,
Great now you run your first application successfully. From here we will go in depth on different aspects of windows mobile.

Next i am going to explain different files generated when project created.

When look at the Solution Explorer for the project You’ll see two pairs of skeleton files: App.xaml and App.xaml.cs, and MainPage.xaml and MainPage.xaml.cs. The App.xaml and MainPage.xaml files are Extensible Application Markup Language (XAML) files, while App.xaml.cs and MainPage.xaml.cs are C# code files.

If you look at the App.xaml.cs file, you’ll see a namespace definition that is the same as the project name and a class named App that derives from the Silverlight class Application .
All Silverlight programs contain an App class that derives from Application; this class performs application-wide initialization, startup. This class is defined as a partial class, meaning that the project should probably include another C# file that contains additional members of the App class.
Next is App.XAML which looks like,

Click image to expand.

The root element is Application, which is the Silverlight class that the App class derives from. The root element contains four XML namespace declarations and which is common to all Silverlight application.

The first XML namespace declaration is the standard namespace for Silverlight, and it helps the compiler locate and identify Silverlight classes such as Application itself.

The second XML namespace declaration is associated with XAML itself, and it allows the file to reference some elements and attributes that are part of XAML rather than specifically Silverlight.

When compiling Visual Studio parses App.xaml and generates another code file named App.g.cs. which is auto generated. If you want to look at this file, Click show all files option and then browse to \obj\Debug subdirectory of the project. The App.g.cs file contains another partial definition of the App class, and it contains a method named InitializeComponent that is called from the constructor in the App.xaml.cs file. Even if modified generated file it will become the same as before in next compilation.

MainPage is the second major class in every Silverlight program and is defined in the second pair of files, MainPage.xaml and MainPage.xaml.cs. class named MainPage that
derives from the Silverlight class PhoneApplicationPage. This is the class that defines the visuals actually see on the screen when you run the HelloWindowsPhone program.

Next is MainPage.XAML, it's structure is as shown,

Click image to expand.

The first four XML namespace declarations are the same as in App.xaml. As in the App.xaml file, an x:Class attribute also appears in the root element. Here it indicates that the MainPage class in the “HelloWindowsPhone” namespace derives from the Silverlight PhoneApplicationPage class.

The compilation of the program generates a file name MainPage.g.cs that contains another partial class definition for MainPage (you can look at it in the \obj\Debug subdirectory) with the InitializeComponent method called from the constructor in MainPage.xaml.cs.

The nesting of elements in MainPage.xaml is said to define a visual tree. In a Silverlight program for Windows Phone 7, the visual tree always begins with an object of type PhoneApplicationFrame, which occupies the entire visual surface of the phone. A Silverlight program for Windows Phone 7 always has one and only one instance of PhoneApplicationFrame, referred to informally as the frame.

Silverlight Class Hierarchy

Let us just see the the class hierarchy of Silverlight,

Besides UIElement, many other Silverlight classes derive from DependencyObject. The only class that derives from UIElement is FrameworkElement. One of the classes that derives from FrameworkElement is Control. Another class that derives from FrameworkElement is Panel, which is the parent class to the Grid and StackPanel elements you see in MainPage.xaml. Panels are elements that can host multiple children and arrange them in particular ways on the screen.

In a Silverlight program for Windows Phone 7, the visual tree always begins with an object of type PhoneApplicationFrame, which occupies the entire visual surface of the phone. A Silverlight program for Windows Phone 7 always has one and only one instance of PhoneApplicationFrame, referred to informally as the frame.

A program can have multiple instances of PhoneApplicationPage, referred to
informally as a page. At any one time, the frame hosts one page, but lets you navigate to the
other pages. By default, the page does not occupy the full display surface of the frame
because it makes room for the system tray (also known as the status bar) at the top of the
Design of Main Page

Let's have a look at the UI design of MainPage.XAML,

Click image to expand


Mike Bosch said...

Great Post Tech Rider. Thanks.

Unknown said...

Good one....keep gng...

Post a Comment