Advertisment

Fiddling with the Interface in Windows Phone 7

author-image
PCQ Bureau
New Update

Vinod Unny, Enterprise InfoTech

Advertisment

In the last few parts of the series, we looked at the backend of developing a Windows Phone 7 application — especially about the application lifecycle and storing and retrieving both transient and persistent application data. This month we move into something a little more exciting — that of working with the Windows Phone 7's fluid user interface.

Unlike any of the current breed of smart phones, Windows Phone 7's interface is meant to display information to the user in the clearest and simplest possible way. Instead of having heavy 3D graphics to simply display an app's icon, WP7 instead chooses to have simple 2D “tiles” that can animate, show information and be pinned and moved around on the home screen as the user wishes. The tiles themselves can be of almost anything — an application, a song, a favorite person, a web page, a movie or anything that catches your fancy on the phone. We will look at creating and working with dynamic “Live Tiles” in an article later on in this series.

Controls

Advertisment

Let's now look at some of the other stuff that you can do in your own applications. Visual Studio 2010 for Windows Phone comes with all the standard controls you would want such as panels, textboxes, buttons, grids, lists etc. You also get some more exotic ones like Map and MediaElement. You can add more useful controls from the Windows Phone 7 Control Toolkit available on CodePlex for free. This comes with a number of cool controls as well as some animations and transitions. There are two controls however that is completely unique for the Windows Phone 7 interface. These are the Pivot and Panorama controls.

A Pivot control allows you to have different “views” of information by simply swiping left or right on the phone. The information can be anything - say all the emails on the phone which can be viewed in different ways — such as all, unread, urgent or flagged or from a particular contact. The Panorama on the other hand also shows different “views” of same or different data but also has the additional feature of showing a little bit of the next screen peeking in from the right corner as well as being laid on a panoramic background over which the content seems to scroll. A look at the screens will tell you how they look and work. You can easily create your own panoramas and/or pivots for your applications using the available controls.

Orientation

As with most other smart phones these days, Windows Phone 7 too can work in two orientation modes — the default Portrait and the sideways Landscape. A built in accelerometer in the devices can rotate the screen of your application if you turn the phone in any direction.

Advertisment

However, you need to enable your application to support these modes. By default, when you create an app in VS2010 for WP7 it only supports the portrait mode. When you flip the screen to the side, the application does not switch also. Take a look at the images to know how it looks.

To correct this, simply look for the SupportedOrientation attribute at the top of the page and change it to PortraitOrLandscape from the default of Portrait. Now when you try it the screen flips correctly. Now this might be fine in many cases, however for screens that have content which span to the bottom it can get cut off or you might want to change the order of things around when the orientation changes. For this you need to handle the page's OrientationChanged event. Add an event handler to the PhoneApplicationPage and write the following code:

private void PhoneApplicationPage_Orientation Changed(object sender, OrientationChangedEventArgs e)



if ((e.Orientation & PageOrientation.Landscape) 

== PageOrientation.Landscape)

{        

txtEMI_P.Visibility = System.Windows.Visibility.Collapsed;       txtEMI_L.Visibility = System.Windows.Visibility.Visible;    

}    

else    

{        

txtEMI_P.Visibility = System.Windows.Visibility.Visible;        

txtEMI_L.Visibility = System.Windows.Visibility.Collapsed;    

}

}

Advertisment

In this code, I'm only doing something very simple. I'm hiding the default textblock that displays the calculated EMI and enabling another one that is better placed for a landscape orientation. The screenshot displays what it looks like now. You can of course change the entire look and feel of your page for a landscape resolution if you wish and change it back when made portrait.

Application Bar

>

Many apps hide away options inside a menu bar — called an Application Bar in WP7. The App Bar is a row of icons (upto a max of 4) that allow you to perform an action when clicked. It also can hide a longer text menu (accessible by clicking a small “...” at the end) that for more actions.

An App Bar can be added to the page with little bit of XAML code.



        

        

            

            

MenuItem x:Name= "mnuAbout" Text="About..."Click="mnuAbout_

Click">        

    

The first two icon buttons display two icons. The menu items under them are hidden till the user wishes to see them. When run, they look like the screens shown. You can wire up events for the click action for each of them and do whatever you wish — say open a new page, do some calculation, save data or anything else. There are many other cool features that you can take advantage of in WP7 quite easily. Next month, we will take a look at working with the built in apps and data (such as contacts, pictures, text messages, emails, etc.) and how you can access them from your application.

Advertisment