Microsoft sketchflow tutorial

We've decided to write a simple address book application, to allow us to manage some information about our contacts. Typically, this is where we'd start to think about things like the information we want to present, how the UI might look, functional requirements and so on that we need to implement. For now, I'm going to speed things up by giving you the brief:. If you're interested in how I made the image above, then let me know.

Expression Blend has a powerful UI prototyping tool called 'SketchFlow' that makes it easier than ever to mock up UI designs, as well as add animation, gather feedback from clients, and more. This is a large topic in itself, but if there is enough interest, then I'll write an article in this series focused on SketchFlow.

The hands-on approach is great for a project like this. The sketch above is basic, but complete enough for us to have a first crack at the UI. Follow the steps below:. Hint: Speed things up by dragging copies. Select a text block and hold the Alt key. Drag the text block somewhere else. Release, and a copy will have been created. This works even when you've got groups of controls selected. At this stage, you could have a closer look at the Properties panel. The controls we've laid out can be modified extensively using the Properties panel.

We can change fonts, colours, brushes, visual effects, and more. Remember, at the bottom of each panel in the Properties window is a small bar - press it for even more advanced properties. Get used to using the search box too - it'll come in handy as you get more familiar with Blend and WPF. Hit F5. We're off to a good start, the controls are there and positioned appropriately. Re-size the window. Depending on how you laid out your controls, you'll get a variety of behaviour for how controls are repositioned and re-sized.

In any case, the re-size behaviour is probably not perfect - we'll come back to this. For now, we'll move on to getting some functionality done. From the specification, we have a fairly good idea of what sort of data objects we'll need. A Contact object will hold a name, email address, and phone number. The application as a whole will contain a set of contacts.

It doesn't get much easier than this. If you have already played around with Model-View-ViewModel, then don't worry - we'll be coming to that soon. For now, we're keeping things as simple as possible. We're now getting to the first real WPF challenge - where do we put contacts? Are they in the XAML? In the App class? In the MainWindow class? This is the sort of question that causes confusion - you may have heard that the place to put data is in the model and present it with the model view - but what are these entities?

And where do they exist? We're going to come back to this shortly; for now, we'll go for what seems to be the quickest solution - then, we'll look at how to do it the WPF way, which it turns out is even quicker! We're going to want some data to make sure our UI is working, so add a few contacts in the constructor of the MainWindow object. Finally, we need to tie this into the window.

WPF has its own way of doing this, called Data Binding. We'll get into this in detail later on. In a typical WinForms application, we'd probably go through the list of contacts, create a list view item for each one, set the tag to the data object, and insert it into a list box. With WPF, we'll tell the list view 'this is your data' and let it take over from there.

We can do that with the data as we have it here, but it's a little bit convoluted. Build the project. Open the MainWindow. Click on the list box on the left hand side and locate the ' ItemsSource ' property. Open the advanced properties by pressing the little square next to it, and choose 'Data Binding'. We can bind to the ' Contacts ' property of the MainWindow object by selecting ' Element ' at the top and finding the ' Contacts ' property.

Press OK and hit F5. We can see three contact objects in the list control. Not particularly useful. Also, finding that property was a bit tricky. What happens when we have more and more properties and we want to maybe interlink them.

The Model is the application data. It could be from a database, a file, memory, or whatever. The model may well contain business logic and some very complicated entities. The View is the presentation layer of the application. In this case, it is the XAML file that controls what is displayed and how it is rendered. The ViewModel is the object that ties the two together. In our case, the ViewModel would contain the list of contacts we're showing, the current contact, and anything else that we might need the view to connect to.

This is the very basic outline of MVVM. As with the previous concepts, we're going to learn this pattern by using it. We know from the above points that a ViewModel is an object that ties the content to the presentation. So, let's go ahead and write one. The view must show the contacts and the details for the selected contact, so we'll put that data in a model view class. Create a new class called ' AddressBookViewModel '.

This class will hold all the data that we're going to present. Delete the ' contacts ' member and ' Contacts ' property from the MainWindow. Also remove the lines we added to the constructor adding the contacts.

Where is the ViewModel instance stored? This is another question that causes confusion. How do we tie it together? The short answer is that we're going to have a single instance of the ViewModel in the window object. But we're going to do it without adding a single line of code. The next few steps are really important - you'll probably use them for every window in your app. Delete the binding we set before by clicking on the 'Reset' advanced properties popup on the list box ' ItemsSource ' property.

Select the MainWindow in the designer by double clicking on the MainWindow. Below it is an 'Objects and Timeline' panel. This shows a visual tree of what is in the window.

The window is the top level object. Once it's selected, go to the Properties panel and find 'Data Context'. Isn't the search feature useful? If you haven't used it, give it a try - it'll save you lots of time. The DataContext can be thought of as the object or data that we're going to be binding UI elements to. It is hierarchical, so by setting it in the window, we set the data context for all of the controls - we can set it once and forget about it.

The plan is to set the data context of the window to an instance of the ViewModel - this will greatly simplify things.

Click 'New'. We can set almost anything to be the data context. Search for 'view' or 'viewmodel' and select the AddressBookViewModel class. Choose 'OK'. Now that we've set the data context, select the list box on the left hand side and go back to the 'Items Source' property. Press the Advanced button and choose 'Data Binding'. Select 'Contacts' and press 'OK'.

We are now using the data context and binding directly to the contacts. What has this actually done? Go to 'Split' view by pressing the small icon shown below, at the top right of the window. The data context has been set near the top of the XAML:. We've told the window that its data context is an instance of our AddressBookViewModel class. If we add the ' x:Name ' attribute, we can even use it in the code-behind.

Change the XAML to this:. We've now named this instance. Go to the MainWindow constructor in MainWindow. Let's get even more clever. In the same way as we set the data binding before, set the bindings below:. We have the list as before - but because we told the list to bind its selected item to the ' SelectedContact ' property in our ViewModel, selecting an item in the list sets the ' SelectedContact ' property. The three text boxes are bound to various properties of the ' SelectedObject ' - so when we change, the text boxes are updated.

Edit the text in each of the boxes and change to another contact - then change back. Our changes have persisted - the selected object is simply a reference to one of the items in our 'Contacts' list, so everything ties in together perfectly. Remember - the only code we've done to get the UI of the app working is setting some simple contacts in the constructor - we've actually tied in the text boxes and list control without ever leaving the designer. We have missed out on something subtle.

If you were to continue building the app with this approach, you'd soon notice something that is lacking - when we change ViewModel properties programmatically, the UI doesn't update. As a demonstration of this, we're going to update the program so that when the window has loaded, the first contact is automatically selected. In the 'Objects and Timeline' panel, double click on the 'Window' item at the top of the tree to select the main window. Go to the Properties panel and choose 'Events'.

The events icon is at the top right, as shown below:. There are a stack of events we can handle, but for now, we want the ' Loaded ' event.

Learn how to add feedback to a prototype in SketchFlow player and then import that feedback into SketchFlow in order to evolve your prototype. Learn how to package your SketchFlow project for external use.

Additionally, you'll learn how to export your project to Microsoft Word for a more traditional hard copy use. Jeremy Osborn has more than 15 years of experience in web and graphic design, filmmaking, writing and publication development for both print and digital media.

At AGI, Jeremy has provided in-depth training and custom consulting for students and corporate clients. Web Dev Zone. Thanks for visiting DZone today,. Edit Profile. Sign Out View Profile. Over 2 million developers have joined DZone.

Like 0. Join the DZone community and get the full member experience. Join For Free. Part 4: Using SketchStyle controls to enhance a SketchFlow layout Learn how to add interactive controls to your online snowboard application.

Part 6: Adding Navigation to buttons in SketchFlow learn how to create interactive buttons in your SketchFlow projects using the 'Navigate To' feature. Part 7: Working with States in SketchFlow Learn how to use the States panel to record layout changes and create animations that users can view and interact with in the SketchFlow player.

Part 8: Working with the SketchFlow Animation panel Learn how to create animations in SketchFlow that simulate user behaviours such as adding a product to a shopping cart.

Part 9: Working with Behaviors in SketchFlow Learn how to work with behaviours in SketchFlow to add simple interactivity to buttons or to a plain animation upon loading a screen. Part Adding feedback and annotations in the SketchFlow player Learn how to add feedback to a prototype in SketchFlow player and then import that feedback into SketchFlow in order to evolve your prototype.

About the Presenter Jeremy Osborn has more than 15 years of experience in web and graphic design, filmmaking, writing and publication development for both print and digital media.