Using Sketchflow to create iPhone UX Prototypes

 

I’ve been using Expression Sketchflow for many things over the past few weeks for both prototyping Winforms, mobile, web and sometimes even Silverlight applications.

Once you give up on the idea of reusing your prototype it’s amazing what it can be used for.

I’ve found the creation of an iPhone usercontrol useful in prototyping.  Simply add iPhone.xaml to your project and drop this onto your screens.

To create iPhone.xaml, create a blank usercontrol, then use the following xaml (remember to change MyProject to the name of your project):

 

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:ps="clr-namespace:Microsoft.Expression.Prototyping.SketchControls;assembly=Microsoft.Expression.Prototyping.SketchControls"
    x:Class="MyProject.iPhone"
    d:DesignWidth="341" d:DesignHeight="685" Width="341" Height="685">

    <Grid x:Name="LayoutRoot">
        <Rectangle Fill="#FF0A0000" Stroke="Black" RadiusX="21" RadiusY="21"/>
        <ps:SketchRectangleSL Margin="11,103,10,102" Style="{StaticResource Rectangle-Sketch}" Height="480" Width="320"/>
        <Ellipse Fill="White" Stroke="Black" Height="59" Margin="139,0,139,20" VerticalAlignment="Bottom"/>
        <Rectangle Fill="White" Stroke="Black" Height="26" Margin="157,0,157,36" VerticalAlignment="Bottom" RadiusX="2.75" RadiusY="2.75"/>
        <Rectangle Stroke="Black" RadiusX="3.5" RadiusY="3.5" Height="7" Margin="139,51,139,0" VerticalAlignment="Top" Fill="White"/>
        <ps:SketchRectangleSL Height="24" Margin="11,103,10,0" Style="{StaticResource Rectangle-Sketch}" VerticalAlignment="Top" Background="#FF020000"/>
        <ps:SketchRectangleSL Height="13" HorizontalAlignment="Right" Margin="0,109,23,0" Style="{StaticResource Rectangle-Sketch}" VerticalAlignment="Top" Width="27" Background="#FFFCFCFC"/>
        <ps:SketchRectangleSL Height="7" HorizontalAlignment="Right" Margin="0,112,20,0" Style="{StaticResource Rectangle-Sketch}" VerticalAlignment="Top" Width="5"/>
        <TextBlock Margin="41,107,0,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Text="Carrier" TextWrapping="Wrap" Foreground="#FFFCFCFC" HorizontalAlignment="Left" Width="41"/>
        <ps:SketchRectangleSL Height="10" HorizontalAlignment="Left" Margin="33,111,0,0" Style="{StaticResource Rectangle-Sketch}" VerticalAlignment="Top" Width="4" BorderBrush="#FFFFFDFD"/>
        <ps:SketchRectangleSL Height="8" HorizontalAlignment="Left" Margin="29,113,0,0" Style="{StaticResource Rectangle-Sketch}" VerticalAlignment="Top" Width="4" BorderBrush="#FFFFFDFD"/>
        <ps:SketchRectangleSL Height="6" HorizontalAlignment="Left" Margin="25,115,0,0" Style="{StaticResource Rectangle-Sketch}" VerticalAlignment="Top" Width="4" BorderBrush="#FFFFFDFD"/>
        <ps:SketchRectangleSL Height="5" HorizontalAlignment="Left" Margin="21,116,0,0" Style="{StaticResource Rectangle-Sketch}" VerticalAlignment="Top" Width="4" BorderBrush="#FFFFFDFD"/>
        <ps:SketchRectangleSL Height="3" HorizontalAlignment="Left" Margin="17,118,0,0" Style="{StaticResource Rectangle-Sketch}" VerticalAlignment="Top" Width="4" BorderBrush="#FFFFFDFD"/>
        <TextBlock Margin="141,107,121,0" Style="{StaticResource BasicTextBlock-Sketch}" VerticalAlignment="Top" Foreground="#FFFCFCFC" Text="12:00 PM" TextWrapping="Wrap"/>
    </Grid>
</UserControl>

Alright, I admit it, Now I have an iPhone!

 

Dear Windows Mobile,

 

By the time you read this blog post, I’ll be gone.  I’m sorry for doing this but you left me no other choice.  I know comes as a bit of a shock to you – especially because things have been going so well.  But I’m sorry – I cant stand watching all those iPhone users giggling in the corridors anymore.  I think you’re swell, but I don’t think we’re right for each other.  First of all, we’re not compatible.  You’re a a bit too clunky and I’ve lost patience.   Secondly, I’m tired of waiting for Windows Mobile 7.  It’s too late isn’t it?

Anyway, I want to try another smart phone.  But you know what?  I still want to be friends.  We had some good times, developing software on the brilliant compact framework.  I’m very sad it has to be this way.  But please, don’t cold boot like last time.  Maybe I could still answer questions on the Compact Framework from time to time.  I still code in .net!  Look I wont even make issue of the fact that I had to buy you a replacement battery.

So, take care of yourself and all the best.

Sincerely

Me