Pavan's profilethe WPF way...BlogLists Tools Help

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)

    Please wait...
    Sorry, the comment you entered is too long. Please shorten it.
    You didn't enter anything. Please try again.
    Sorry, we can't add your comment right now. Please try again later.
    To add a comment, you need permission from your parent. Ask for permission
    Your parent has turned off comments.
    Sorry, we can't delete your comment right now. Please try again later.
    You've exceeded the maximum number of comments that can be left in one day. Please try again in 24 hours.
    Your account has had the ability to leave comments disabled because our systems indicate that you may be spamming other users. If you believe that your account has been disabled in error please contact Windows Live support.
    Complete the security check below to finish leaving your comment.
    The characters you type in the security check must match the characters in the picture or audio.
    Pavan Podila has turned off comments on this page.
    Stefanwrote:
    Any chance that you share some code. I'm especially interesting in the styling xaml for this iPhone interface!
    Nov. 25
    Pavan Podilawrote:
    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.
    Nov. 10
    Picture of Anonymous
    francesco wrote:
    What about transitions? Is there any control to easy create smooth iphone/itouch transitions?
    Nov. 10