The Mobile Spoon - Gil Bouhnick's Mobility Blog
Home My Favorites iOS Apps Talk To Me About

Nov 2, 2010

Building my first Windows Phone 7 Application

phoneicons

So I'm continuing with my personal experience trying to build my first Windows Phone 7 application.

Still not clear what it will be, probably a basic todo list. Tasks, reminders, no need to be too specific, but it has to have lists, divided to sections…

In my previous post (Building my first Windows Phone 7 application) I examined 2 of the mostly used controls in the innovative Windows Phone 7 UI – Pivot and Panorama, both are creating a continues user experience that feels as if the page is much wider than the screen really shows, giving the user the motivation to slide left or right and thus navigate through the areas of the page.

My first App

My first app will hold lists of different action items, by different categories. What is better for those categories than using the pivot control? You guessed it, nothing! That is the perfect fit for my need. Using it in Silverlight XAML is easy and intuitive. Microsoft did good job in those pre-defined controls.

My main page will look something like this:

Main-page-windows-phone-mobile-spoon

Today will present the action items for today, and the pivot control will also hold other sections for different 'todo' items.

Customizing a ListBox:

As I would like the lists to be better looking than the default list-box items, I must customize the way every item looks.

This is done easily by using Silverlight's templates and styles:

By defining an ItemTemplate (holding an icon, title text and subtext), and pointing to it from my main lists – I can get this line to become my lists item:

List-Item-Mobilespoon-App

Nice – don't you think? There is no code behind this one.

Here is how it will look like when multiple items will be included in that list:

mulltipleitems

(I would like to remind that this is not a development site, therefore my examples are just to give an impression for non-developers of how simple or complicated each step is)

Page Transitions

I want my app to be nicely presented. For that I want every movement from the main view to the items view to include a nice page transition.

Since I had no idea how to create such transitions, I asked Google, and immediately got some help: to build a transition, you must first download the Silverlight Toolkit for Windows Phone, then, you should find a proper site showing how to do it, it's not as trivial as I would imagine.

Here are a few nice transitions examples:

Trying to build the quickest and dirtiest app ever created in the history of Windows Phone 7 (short history I presume…) I looked for a simple way to add animated transition of pages (in Silverlight the forms are actually XAML pages). It's hard when your Silverlight skills are limited. Most of the samples I found were too difficult to just copy and paste, involved a lot of classes and long code. I needed something simple I can paste and do the magic.

Eventually I found something nice over here at Shawn Wildermuth's blog including a simple working sample. Thanks for the help Shawn! Now my app has a nice page transitions whenever moving from the main lists to the 'todo' item…

Time to add some real code into my little app, see you all soon…

 

If you like this post, subscribe to our RSS Feed.



2 comments:

HTC Phone said...

thx!

Marriage Help said...

That's great you got some help from Google to build a transition. I am sure whatever you decide what your app is going to be it will look great. I will be checking back in to see what it is you came up with. The todo list would be great though.

Post a Comment