How to build an application in Silverlight in Windows Phone 7

Introduction

It’s day 2 of my post! Sorry for the very delayed post of my 7 day series of Windows Phone 7 due to busy week on developing an application in Windows Phone 7 and being invited to different schools for Windows Phone 7.

Now it’s day 2 of my introduction. As I normally say to my audience, Silverlight 4 is released last May 2010 but the framework that Windows Phone 7 will be using is only Silverlight 3. So when there is an instance that we want to use the features of Silverlight 4 like TextTrimming, well it’s not yet supported yet in WP7.

Silverlight 3 is the core framework for developing productivity tools, simple silverlight games, etc. It’s framework is purely based from Silverlight 3 framework but there were some enhancements for phone features of course. It’s good to learn Silverlight too when you are interested in developing further in Windows Phone 7 because you’re not only capable of developing applications in Web or Desktop but you also get to develop in the Mobile world! Learning Silverlight is easy! With the help of MSDN, MVP blogs, and PM Blogs you can easily have a jumpstart knowledge on how to develop your own Silverlight application. Silverlight API is so small compared to other frameworks that you Microsoft has. So starting as a Silverlight application will be a good start then advancing to other frameworks like WPF and ASP.NET.

Enough of the introduction. Let’s start the Silverlight tour in Windows Phone 7!

As a normal procedure, let’s go to File -> New Project and there we will notice the new installed template for Windows Phone 7

Windows Phone Application – Let’s put it this way, let’s say we have a website and a website consist of webpage. It’s similar to a web page. It’s a single phone page, and multiple phone page can make it similar to as a website.

Windows Phone Databound Application – Databound application template consists of a listbox and a built in logic for using Navigation Services of the .NET. All you have to do is edit the content and the location of the pages and you already have a simple navigation page with Databound application.

Windows Phone Class Library – Similar to libraries that we import in our namespace, when a developer thought to share his own logic on how to develop applications in Windows Phone the easier way, then this template is the right template for to built its own library.

Windows Phone Panorama Control – If you’re familiar with the word “Panorama” term in photography, then Panorama is exactly what you are thinking. Windows Phone 7 brings out the new user experience to its users by not just simply navigating its application with just switching pages from one page to another. With Panorama control, the user experience can now apply image backgrounds that are panoramic and its navigation will be from left to right or vice-versa. Panorama control is one of the best template to use to showcase items.

Windows Pivot Control – Similar to tab control in Windows development it’s almost the same with Pivot control the only reason it’s called Pivot because in Pivot Control, the user has the option on how to navigate between tabs in his phone. It’s either the user clicks the header of each tab or the user can flick its phone to change the tab. Simple yet powerful control for UX.

By default after you installed the SDK, a new template will appear in your left tab which is the Silverlight for Windows Phone and if you already have a XNA installed you will notice that there is an additional template called XNA for Windows Phone and by default you’re XNA GameStudio should be 4.0 because that’s the framework used to develop for Windows Phone 7.

Last September 17, 2010, the Windows Phone team released the final version of SDK for C#. Unfortunately, VB developers had requested for an SDK too for VB and their request was granted. But the VB SDK is currently at CTP (Community Tech Preview) meaning they don’t have the new two controls that Windows Phone offers to its developers/users the Panorama and Pivot controls are not yet available for VB CTP but in the future, it should be included just like the SDK for C#.

For more information about what’s new with the final version SDK of C# please visit this site.

Building our first Silverlight application

Assuming you already have a little knowledge about XAML and Silverlight, by default our XAML file already have a template for our Single Phone Page. The whole page is called the Layout root, while the layout root is divided into two panels.

1.) TitlePanel – By default, it’s on a stackpanel control but you can change the way your titlepanel looks like.

2.) ContentPanel – Same as TitlePanel, by default it’s a grid view with no other controls in it. You can try using the drag and drop toolbox of the Visual Studio 2010 to start designing your own user interface.

On our tutorial, let’s try making a simple application that computes my student fare discount from the original fare price.

Now after designing our UI with a simple XAML code that I posted we are now ready to hit F5 and check our sample application. It should run a Windows Phone Emulator where it will be deployed our sample application. By default in our xaml file our ApplicationBar is commented out, meaning we do not have a three dots in our application yet for shortcuts and navigating to other pages.

If you are trying to use the controls (WrapPanel, DatePicker, TimePicker, etc) for Windows Phone 7 that are included in the final release of SDK by default it’s not included in the library or reference. So we have to first add the library by going to our solution explorer -> reference -> right click -> add reference -> browse then look for C:\Program Files\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Sep10\Bin and add Microsoft.Phone.Controls.Toolkit. Also, in your xaml file you have to call the library toolkit too so don’t forget to call it in your xaml file in order to use the toolkit controls.

Handling Routed Events

When we run our application of course nothing fancy will happen since we only coded a xaml file that has controls and one click event handler with no logic from behind. So let’s try handling our first event in Windows Phone 7.

Now after adding this line of code, notice that how we handle our event method in Windows Phone is the same with Silverlight developer if you are already an existing .NET developer. You don’t have to learn a lot of SDK of Windows Phone in order to develop your own application.

Windows Phone 7 is a touch screen and normally as a smartphone user we normally get annoyed clicking a lot of buttons just to get results. With property name called InputScope in TextBox control, we can determine which keyboard to show without having to click the shift button of the keyboard just to switch to numbers. InputScope has attributes like URL, TelephoneNumber, Text, EmailNameOrAddess and Digits. With the help of InputScope, users will highly appreciate your application. So let’s try minimizing the number of clicks of the user when they are using my calculator. 

And in our xaml file add this to our fareTxt control property. InputScope=“Digits”. After running again our application, when the user clicks the fareTxt control and while typing the result will automatically display in the textbox and our on screen keyboard is now digits by default! Easy as pie isn’t it?

ApplicationBar

As I have said earlier, applicationbar by default is commented out. Application bar is normally used for navigating to other pages with shortcut icons. What I would demo is from behind the code since it would be better for the developer to understand the core of applicationbar.


1st note: If you are going to use ApplicationBarIcon and you have already imported your existing picture into your solution don’t forget to change it’s properties build to action to Content, by default it is Resource, if you tried to run it you will notice that it won’t appear the correct image.

2nd note: When you are using ApplicationBarIcon too, you notice that there is a Text property for the object TabPageSC, that’s because if you did not declare a Text property in your IconButton then when you try to run it, it will catch an error that your icon text property cannot be null. This is because we do not want our users to guess what does the button do in our application bar icon, so a friendly user interface is still important.

Navigating to other pages

Of course some of the common questions of our developers and students like me is, how do I navigate to other pages? Is it just like a simple HTML tag with <a href source=””/>. It’s also simple in Windows Phone! Let’s go to our solution explorer and add another page, this time let’s try adding a pivot control.

In our solution explorer -> right click -> add new item -> Pivot Control and let’s call it TabControl.xaml

In our MainPage.xaml.cs you notice that we have already an event handler called ViewTabPage_Click. This method simply already fires the event of the click button and navigates to the destination page. So normally we do use the NavigationServices in order to navigate to another page.

Here’s the scenario. Is it possible to pass data from one page to another in Windows Phone? The answer is yes.

If you notice on the NavigationServices part, the URI path is similar to a PHP file that is passing variables. Now the only difference in here is that in C# Windows Phone, you don’t use POST or GET method in order to retrieve the variable’s value.

We use the NavigationContext’s QueryString in orfer to retrieve the value and store in on the projectTitle variable. Simple as that in order to get the value of the variable that has been passed.

So if we try to navigate from MainPage.xaml to TabControl.xaml the output would be.

Again, easy wasn’t it? One simple query and I can get the value.

Note: To those who are still using CTP and VB CTP SDK there is a difference on the reference on NavigationEventArgs. On the CTP version it has it’s own navigation called Microsoft.Phone.Navigation, but now in the final release all you have to use is System.Windows.Navigation.

That’s it for the basic knowledge you need to know in order to start developing applications in Silverlight! Advanced development like tombstoning, push notifcation will be discussed later on thoroughly. I hope that you learned some of the techniques and changes on using the Windows Phone SDK for C#.

To download the solution file, click here.

8 thoughts on “How to build an application in Silverlight in Windows Phone 7

  1. hello I was luck to find your subject in google
    your post is terrific
    I get a lot in your Topics really thanks very much
    btw the theme of you site is really terrific
    where can find it

  2. Hello Leo,

    Congratulations on Graduating over the weekend and it was a pleasure meeting you and your family at FEU EACs graduation ceremony on Saturday.

    Great to see your mom wearing your official MVP jacket! 🙂

    Best Regards,
    Alvin Gendrano
    Director – Developer and Platform Evangelism
    Microsoft Philippines

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