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>