More servicesWindows Live
HomeHotmailSpacesOneCare
 
MSN
Sign in
 
 
Spaces home  the WPF way...ProfileFriendsBlogMore Tools Explore the Spaces community

Blog

8/27/2007

The iPhone (-like) interface in WPF

Sometime back I had worked on an internal Instant Messaging client for our company. We were looking for some inspiration for our client interface and at about the same time the iPhone was introduced. After a lot of thought (which was like "few minutes"), we decided to mimic the iPhone interface for our client.

The enabling UI technology was Windows Presentation Foundation (WPF). With WPF we could rapidly build something that looks a lot like iPhone in a very short time. I was playing the dual role of a Designer + Developer and tools like Blend and Design greatly helped in skinning the app. Below you can see a bunch of screenshots and a short video of accepting a call.

 

Notification received. You can talk, IM or just ignore.

image

 

In an audio chat (call)

image

 

Contact list

image

 

Video of accepting a notification (via Talk)

 

How was it built?

  • Blend and Design were used for creating the skin of the app. The XAML UI was created in Blend and the graphics were developed in Design. I had made a post earlier about how the icons for the app were created in Design.
  • The GlassWindow control was used for creating the window chrome.
  • Although you cannot see in the screenshots above, the Drag 'n' Drop library was also used
  • I missed out using the ElementFlow, but that can be easily added. I only need to find a business case for that ;)

 

This example only goes to show how powerful WPF can be. With greater tool support from Blend + Design, lot can be achieved in a far lesser time. Now until I get my own iPhone, I will continue to use the WPF version ;)

 

Technorati Tags: , , ,
Comments (3)
  • View space
    (geen naam)
    11/25/2007 1:41 PM
    Any chance that you share some code. I'm especially interesting in the styling xaml for this iPhone interface!
  • View space
    Pavan Podila
    11/10/2007 8:26 PM
    I have written a custom control just for transitions called TransitionContainer: http://pavanpodila.spaces.live.com/blog/cns!9C9E888164859398!483.entry

    The iPhone app I show in the post uses that.
  • francesco
    11/10/2007 10:44 AM
    What about transitions? Is there any control to easy create smooth iphone/itouch transitions?
Trackbacks

The trackback URL for this entry is:
http://pavanpodila.spaces.live.com/blog/cns!9C9E888164859398!480.trak
Weblogs that reference this entry