Total votes: 0
Print: Print Article
Please login to rate or to leave a comment.
Published: 29 Aug 2008
Download Sample Code
Designing the IPhone user interface in Silverlight with the efficient use of XAML.
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
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
Right click the SilverlightIPhoneUI project and add a UserControl like this:
Figure 3: 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
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
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
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
- 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
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
Resource in the Properties panel. For your convenience here’s a screen shot:
Figure 7: 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
Figure 8: IPhoneUI after adding buttons in the main
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
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.
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.
Please login to rate or to leave a comment.