Mango – Baby Steps: Creating your first application

Mango – baby steps are a serie of posts to learn about Windows Phone 7.1 and you probably know that if you read the first post aiming to help you to set up the environment and know the requirements in order to start writing some rocking code.

Now everything is set , let’s start coding !!!!!

Open a new project

In visual Studio , from the menu in the top, click : File –> New –> Project

When you choose Silverlight for Windows Phone from the installed templates, you will get this window :

As you can notice, you have multiple choices:

  • Windows Phone Application : Generates a basic application with a single start page and header.
  • Windows Phone Databound Application: Generates an application in a Model/View/ViewModel (MVVM) style, with sample data exposed in ViewModel classes.
  • Windows Phone Class Library:  Enables you to create a collection of controls that you can reuse across several projects.
  • Windows phone Panorama Application: This template creates an application with the Panorama Control, which provides a multipage view of options with a parallax scrolling background.
  • Windows Phone Pivot Application:  The Pivot control is much like a Tab Control, but tuned for a gesture-based interface. This template creates an application with the Pivot as its primary navigation.
  • Windows Phone 3D Graphics Application: the application type used to invoke XNA content from a Silverlight application. The idea behind this application is to have a pre-built XAML page that has a game loop and that is calling an included XNA project. This can be considered a pure demo of Silverlight-XNA interop.
  • Windows Phone Audio Playback Agent: a non-UI project time that creates a class based on AudioPlayerAgent. Consider this some sort of a class library, but that will later be tied to a BackgroundAudioPlayer to handle custom events.
  • Windows Phone Audio PStreaming Agent: similar to the audio playback agent, this project is used to create a class that will be used with an application that implements a streaming mechanism coupled with a background player.
  • Windows Phone Task Scheduler Agent: a project that will create a class based on ScheduledTaskAgent that will allow developers to handle task invocation events for existing scheduled tasks.

Since it’s our first application, we will choose a simple Windows Phone Application template and call it ” Hello Mango”. Make sure you select ” Windows Phone 7.1″ version.

Add some controls to the application

Now that the project is created, we will get this window:

That doesn’t look so nice :S

We will change the application and page titles :

Before

After

In the XAML code, i changed :

  •  the text of the textblock named ” Application Title” from ” Application title” to ” Hello Mango” .
  • the text of the textblock named ” Page title” from ” page title” to ” Home page” .

Let’s add the Mango picture to the page:

In the  solution explorer, right click on the project : add –>  existing item

Then browse the location where you saved the image, selected and click add.

from the toolbox, drag and drop an ” image” control to the phone interface :

In order to see the image we added to the project, we need to give the “image” control a ” source” , to specify the path of the image to be visualized.

Run the application in the Emulator

Now let’s see the app in action and discover the emulator new features.

The Mango’s new emulator has some additional tools like the accelometer and location:

This is a first example, it aims to explain the templates and explore the elements in the window.

Please feel free to comment and give me your feedback :)

About these ads

About rabeb

Rabeb is a software engineer , fan of the latest .Net technologies, playing with Metro style applications for Win8 at work . In her spare time,she plays with Metro Style apps for Windows Phone.

Posted on June 4, 2011, in Silverlight, WP7 and tagged , . Bookmark the permalink. 1 Comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: