Published: 29 Aug 2008
By: Faisal Khan
Download Sample Code

Designing the IPhone user interface in Silverlight with the efficient use of XAML.

Contents [hide]

Introduction

It’s been quite a while since Microsoft has introduced the Beta 2 release of Silverlight. There are plenty of Silverlight enthusiasts who are passionate about this cross-platform browser application programming. They’ve already given us some useful and eye catching applications. Some applications have given us the feel that this is the future of web programming. I’m a great follower of WPF. In fact I’ve always been and will be. Silverlight has many things in common with WPF but also many different things missing, being a subset of WPF. For the last couple of days I was thinking about creating some eye-catching, innovative user interface but something common, something people have already seen. The idea was converting an existing user interface which was written using another platform, and of course using WPF. So I started googling a bit and found Pavan Podila’s blog the WPF way… and article by Kevin McNeish to create the IPhone interface step by step. So I decided to get my feet wet with this issue and started to convert this WPF idea into Silverlight. Thanks Pavan and Kevin for the inspiration. In this article I’ll show you the powerful use of XAML to create the IPhone user interface with Silverlight.

Designing the UI : Powerful use of XAML

Let’s start creating the IPhone interface by using XAML. I’ve used Expression Blend 2.5 for designing the user interface. Run Expression Blend 2.5 June Preview and select New Project from the File menu.

Figure 1: Creating a project with Expression Blend 2.5 June Preview

Creating a project with Expression Blend 

2.5 June Preview

Clicking New Project in the File menu will bring up the project’s template dialog box where you can select the type of project you want to create. You’ll have to select Silverlight 2.0 application here, since you’re going to create this application in Silverlight. Name the project SilverlightIPhoneUI.

Figure 2: Specifying project type in Expression Blend

Specifying project type in Expression Blend

Right click the SilverlightIPhoneUI project and add a UserControl like this:

Figure 3: Adding user control in Expression Blend

Adding user control in Expression Blend

Clicking on Add new Items will bring up the following dialog box:

Figure 4: UserControl Dialog Box In Expression Blend

UserControl Dialog Box  In Expression Blend

Name the UserControl as IPhoneUI. Fix the size of your IPhoneUI by setting its width to 275 and height to 550. The XAML below is showing how this can be done:

Now add Border as the root element and name it layoutRoot inside the IPhoneUI’s <UserControl> tag. You need to set a couple of properties of the Border to get the shape of the IPhone and this is the crucial part of designing this UI. Set the BorderBrush to Silver, BorderThickness to 5,5,5,5, CornerRadius to 30,30,30,30, Background to Black and Width to 271. By assigning these properties of the Border, you’ll have the XAML like the one below:

UI will look like the following screen shot:

Figure 5: Initial IPhoneUI structure

Initial IPhoneUI structure

Add a Grid inside the border and name the Grid IPhoneMainPanel. Set its width to 256. Add 5 rows to this Grid, like so:

Add another Grid inside the main Grid, named IPhoneMainPanel. Name this Grid IPhoneStatusPanel. Add four columns to this Grid and set its row property to 1 to indicate its location in the second row of the IPhoneMainPanel Grid, like this:

By now you should have some XAML written like the one below:

Let’s delve into the idea behind this nesting of Grids inside the border. There are five main areas that make up the iPhone interface:

  • The upper panel.
  • The section that displays the signal strength, current time and battery life.
  • The main application button area, the lower button panel that contains the Phone, Mail, Safari, and iPod buttons, the bottom panel.

The IPhoneMainPanel which is a Grid is our upper panel and this will play the role of the upper panel. This panel contains the IPhoneStatusPanel which is another Grid and this panel will show the signal strength, current time and battery life. To show this we need to add some Images and a TextBlock. Add two images which will show the signal strength and battery life and a TextBlock which will show the current time. Properties of the XAML needs to be set like this:

With the above XAML in place you’ll get a UI like the image below:

Figure 6: UI after placing Images and TextBlock

UI after placing Images and TextBlock

Add another Grid and name this Grid IPhoneMainButtonPanel just after the Grid named IPhoneStatusPanel. For your convenience here’s where and how you’ll need to add this grid:

If you look carefully at the above XAML, you’ll see there’s a <Grid> section named IPhoneMainButtonPanel. This grid will hold all the main buttons of this IPhoneUI. This is the main application button area of IPhone. As I mentioned previously, there are five main areas in the IPhone UI, and this is the main button area.

Next you need to set the Clip property of the Grid named IPhoneMainButtonPanel. The reason behind setting this property is: When the application buttons scatter, they don’t stay within the boundaries of the IPhoneMainButtonPanel. To prevent the buttons from scattering over the top panel, the status bar and even the border element, we need to set the Clip property of our IPhoneMainButtonPanel.

Now add 4 rows and four columns to this Grid just blow the <Grid.Clip> section like this:

By now you should have the XAML shown below:

Now add 12 buttons inside the grid named IPhoneMainButtonPanel. All you need to do is set the Content property of the Buttons to show the Image that indicates the functionality of the button. Also don’t forget to set the Build Action property of the Buttons to Resource in the Properties panel. For your convenience here’s a screen shot:

Figure 7: Setting Build Action Property using Visual Studio

Setting Build Action Property using Visual Studio

I’ve attached all the images within this article, which I collected from Kevin McNeish IPhone article source code. Thanks a lot to Kevin again for making this asset publicly available. After adding all the 12 Buttons your XAML should look like the one below:

Now switch to the design view of the Expression blend and look at your IPhoneUI. If everything is in full shape you’ll see something like this:

Figure 8: IPhoneUI after adding buttons in the main

IPhoneUI after adding buttons in the main

Add another Grid and name the Grid IPhoneLowerButtonPanel. Add 4 columns and 2 rows to this grid. This is the IPhone lowerButtonPanel that contains the Phone, Mail, Safari, and iPod buttons. At last add a Button at the bottom of the IPhoneMainPanel which will be just after the IPhoneLowerButtonPanel and just before the </Grid> tag of the IPhoneMainPanel Grid and the properties of the button should be set exactly like the XAML below:

This is the main button will control the animation functionality which will be discussed on the later part of this article. So far we’ve created an IPhone-like UI. When you switch to the design view you should see an UI like the following screen shot:

Figure 9: IPhone UI With Silverlight

IPhone UI With Silverlight

This was just an idea how an IPhone-like UI can be built using Silverlight by the powerful use of XAML. This is not complete by any means and I’ll try to add more features in future. If anyone has the better idea than this, I would love to hear from them.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Faisal Khan

Currently working as a freelance Silverlight/WPF UX Integrator. His passions revolve around creating the next generation desktop application and Rich Internet applications. His goals are to create applications which will serve the user in a friendly and traditional way, but will keep pace with nex...

This author has published 11 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Displaying Notification Messages in a Silverlight Dashboard Application
In this article we will see how we could display a notification message and further a list of notifi...
Air Space Issue in Web Browser Control in Silverlight
Air Space issue is a common issue in Web Browser control in Silverlight and WPF. To explain the issu...
TextBox Row Filter in Telerik's RadGridView in Silverlight
If you have come across the JQGrid features, you might have seen the filter row available as the fir...
Widget Refresh Timer in MVVM in Silverlight
In this article we'll see how to refresh and disable widgets using the Model View View-Model pattern...
Develop a Flexible 2.5D Scene Editor Targeting Silverlight RPG Games - Part 2
In this article, I'm going to introduce to you how to construct such a 2.5D RPG game scene editor th...

You might also be interested in the following related blog posts


Q3 2009 betas available now, Official release soon (update) read more
RadControls for WPF/Silverlight Q3 Beta 2 release is live! read more
Silverlight MVP read more
Telerik Releases New Controls for Silverlight 3 and WPF read more
Building a Better Windows Mobile Development Experience read more
Custom Panels in Silverlight/WPF: Introduction read more
Custom Panels in Silverlight/WPF Part 2: ArrangeOverride read more
Telerik Launches RadControls for Silverlight 3 for Line-of-Business Application Development read more
Why Embedded Silverlight Makes Sense read more
Telerik Announces Support for Microsoft Silverlight 3 read more
Top
 
 
 

Discussion


Subject Author Date
placeholder Great article Joel Neubeck 9/1/2008 1:22 PM

Please login to rate or to leave a comment.