Using Sketchflow to create iPhone UX Prototypes

Standard

image 

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>

Advertisements

4 responses »

  1. Awesome! Have you built out any of the other iPhone controls? Thanks for the great start!

    One note, I did have to change your XAML from SketchRectangleSL to SketchRectangleUC to work with my version of SketchFlow.

  2. Hi:

    Thanks for your work. But I face a problem when I use this. The blend says:”initializecomponent does not exist in current context” for iphone.xaml.cs. I’m not familiar with c# and silverlight, just use sketchflow to create prototype. Could you help me ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s