Building a SketchFlow Demo with Expression Blend 3

Building a SketchFlow demo with Expression Blend is easy. You can even add data to the demo and add navigation without writing any code.

This post shows you how to build a simple demo for searching and editing an employee database.

1. Start Blend and select “New Project -> WPF SketchFlow Application”
2. In the “SketchFlow Map” section, right-click on the item labeled “Screen 1″ and select “Rename”. Rename the screen to “SearchEmployees”.
3. You will find the SketchFlow controls in the “Assets” section under “SketchFlow -> Styles -> SketchStyles”
   
4. Now add the controls for the search form. You can paste the following XAML:

   <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" x:Name="Screen_1_Name"
       mc:Ignorable="d"
       x:Class="SketchFlowScreens.Screen_1"
       Width="260" Height="260">
   
       <Grid x:Name="LayoutRoot" Background="White">
           <TextBlock HorizontalAlignment="Left" Margin="8,8,0,0"
            Style="{DynamicResource TextBlock-Sketch}" VerticalAlignment="Top"
            Width="79" Height="25" Text="Name:"/>
           <TextBlock HorizontalAlignment="Left" Margin="8,37,0,0"
            Style="{DynamicResource TextBlock-Sketch}" VerticalAlignment="Top"
            Width="79" Height="25" Text="Department:"/>
           <TextBox HorizontalAlignment="Left" Margin="91,8,0,0"
            Style="{DynamicResource TextBox-Sketch}" VerticalAlignment="Top"
            Width="162" Height="25" TextWrapping="Wrap"/>
           <TextBlock HorizontalAlignment="Left" Margin="8,78,0,0"
            Style="{DynamicResource TextBlock-Sketch}" VerticalAlignment="Top"
            Width="79" Height="25" Text="Results:"/>
           <ListBox HorizontalAlignment="Left" Margin="8,103,0,0"
            Style="{DynamicResource ListBox-Sketch}" VerticalAlignment="Top"
            Width="245" Height="119"/>
           <Button HorizontalAlignment="Right" Margin="0,226,8,0"
            Style="{DynamicResource Button-Sketch}" Width="64" Content="Open"
            VerticalAlignment="Top" Height="25"/>
           <Button Margin="120,226,76,0" Style="{DynamicResource Button-Sketch}"
            Content="Cancel" VerticalAlignment="Top" Height="25"/>
           <ComboBox Margin="91,37,8,0" Style="{DynamicResource ComboBox-Sketch}"
            VerticalAlignment="Top" Height="25"/>
       </Grid>
   </UserControl>
   

5. The next step is to add data. Go to the data tab and click on the “Add sample data source” icon.
   
   Select “Define New Sample Data”. Call it “EmployeeDataSource”. Under “Define in”, make sure “Project” is selected, and make sure that “Enable sample data when application is running” is selected.
6. You will see that the data source will be listed under “Project” in the Data tab.
   
   Right-click on “Property2″ and select “Remove Property2″.
7. Rename “Property1″ to “Name” by clicking the text and editing it.
8. Click on the “Edit sample values” icon next to “Collection”.
9. Change “Number of Records” to 3.
10. Edit the values on the grid to reflect people’s names.
11. Add the following to the properties of the ListBox to bind it to the data source:

    ItemsSource="{Binding Collection, Mode=Default}" DisplayMemberPath="Name"

12. You will now see items in the search results box, and this can be used to show your client what the screen will look like.
13. Now we want to show how the user will move from the search screen to the employee property screen. Add a new screen called “EmployeeDetails” to the SketchFlow map.
    You can use the following XAML for the new screen:

    <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" x:Name="Screen_1_1_Name"
    	mc:Ignorable="d"
    	x:Class="SketchFlowScreens.Screen_1_1"
    	Width="260" Height="110">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<TextBlock HorizontalAlignment="Left" Margin="8,8,0,0"
                     Style="{DynamicResource TextBlock-Sketch}"
                     VerticalAlignment="Top"
                     Width="79" Height="25" Text="Name:"/>
    		<TextBlock HorizontalAlignment="Left" Margin="8,37,0,0"
                     Style="{DynamicResource TextBlock-Sketch}"
                     VerticalAlignment="Top"
                     Width="79" Height="25" Text="Department:"/>
    		<TextBox HorizontalAlignment="Left" Margin="91,8,0,0"
                     Style="{DynamicResource TextBox-Sketch}"
                     VerticalAlignment="Top"
                     Width="162" Height="25" TextWrapping="Wrap"
                     d:LayoutOverrides="HorizontalAlignment"/>
    		<ComboBox Margin="91,37,0,0"
                     Style="{DynamicResource ComboBox-Sketch}"
                     VerticalAlignment="Top" Height="25"
                     HorizontalAlignment="Left"
                     Width="161">
    			<ComboBoxItem>Finance</ComboBoxItem>
    			<ComboBoxItem>Human Resources</ComboBoxItem>
    			<ComboBoxItem>Development</ComboBoxItem>
    		</ComboBox>
    		<Button HorizontalAlignment="Left" Margin="188,75,0,0"
                     Style="{DynamicResource Button-Sketch}" Width="64"
                     Content="Update"
                     VerticalAlignment="Top" Height="25"
                     d:LayoutOverrides="VerticalAlignment"/>
    		<Button Margin="120,75,0,0"
                     Style="{DynamicResource Button-Sketch}"
                     Content="Cancel" VerticalAlignment="Top" Height="25"
                     HorizontalAlignment="Left"
                     Width="64" d:LayoutOverrides="VerticalAlignment"/>
    	</Grid>
    </UserControl>

14. Now we want to set up the flow in the demo. Go to the SearchEmployees screen, right-click the “Open” button, go to “Navigate to” and select “EmployeeDetails”
15. If you run the demo by pressing F5, and you click on the “Open” button, it will now open the EmployeeDetails screen.
16. In the same way you can let the “Update” and “Cancel” buttons in the EmployeeDetails screen navigate to the SearchEmployees screen.
17. You can package the demo for redistribution by clicking on “File -> Package SketchFlow Project”.
18. You can also export your screen designs to Word by clicking on “File -> Export to Microsoft Word”.

<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″ x:Name=”Screen_1_Name”
mc:Ignorable=”d”
x:Class=”SketchFlowScreens.Screen_1″
Width=”260″ Height=”260″><Grid x:Name=”LayoutRoot” Background=”White”>
<TextBlock HorizontalAlignment=”Left” Margin=”8,8,0,0″ Style=”{DynamicResource TextBlock-Sketch}” VerticalAlignment=”Top” Width=”79″ Height=”25″ Text=”Name:”/>
<TextBlock HorizontalAlignment=”Left” Margin=”8,37,0,0″ Style=”{DynamicResource TextBlock-Sketch}” VerticalAlignment=”Top” Width=”79″ Height=”25″ Text=”Department:”/>
<TextBox HorizontalAlignment=”Left” Margin=”91,8,0,0″ Style=”{DynamicResource TextBox-Sketch}” VerticalAlignment=”Top” Width=”162″ Height=”25″ TextWrapping=”Wrap”/>
<TextBox HorizontalAlignment=”Left” Margin=”91,37,0,0″ Style=”{DynamicResource TextBox-Sketch}” VerticalAlignment=”Top” Width=”162″ Height=”25″ TextWrapping=”Wrap”/>
<TextBlock HorizontalAlignment=”Left” Margin=”8,78,0,0″ Style=”{DynamicResource TextBlock-Sketch}” VerticalAlignment=”Top” Width=”79″ Height=”25″ Text=”Results:”/>
<ListBox HorizontalAlignment=”Left” Margin=”8,103,0,0″ Style=”{DynamicResource ListBox-Sketch}” VerticalAlignment=”Top” Width=”245″ Height=”119″/>
<Button HorizontalAlignment=”Right” Margin=”0,226,8,0″ Style=”{DynamicResource Button-Sketch}” Width=”64″ Content=”Open” VerticalAlignment=”Top” Height=”25″/>
<Button Margin=”120,226,76,0″ Style=”{DynamicResource Button-Sketch}” Content=”Cancel” VerticalAlignment=”Top” Height=”25″/>
</Grid>
</UserControl>

Advertisement