How to draw a grid in SketchFlow?

Question

Since there is no grid asset in SketchFlow, what is the best way to represent one? Does everyone just use the rectangle asset?

Answer 1

At the time the question was posed, there were workarounds and kludges. But now--with the advent of the just-released (June 7, 2010) SketchFlow/Blend version 4 there is a great solution: Sketchables from Philipp Sumi. This add-on to SketchFlow 4 lets you use concise markup to customize and tailor a control to display sophisticated output--including the SketchableDataGrid.

Sketchables is a completely new package, due to be released the week of June 21, 2010, according to his blog. He has a startling demo video on his site, though. For a snapshot of the SketchableDataGrid take a look at Figure 12 in my just-published article Creating WPF Prototypes with SketchFlow, June 18, 2010.

(I have no connection with Philipp Sumi other than admiration for his Sketchables product.:-)

Answer 2

There should be a DataGrid Asset (defined in System.Windows.Control.Data.dll -Might need to add a reference?) which I think is what you're looking for.

The first thing you need to do is create a datasource.

You can create a data source by choosing the data tab in the top right corner and clicking on the "define new sample data" icon. Under the collection you should be able to add/edit the field properties for the data source. The data source will have auto-generated data for you (a very cool feature!). This can be replaced by selecting the "Edit Sample Values" icon beside the collection if desired.

Next you can drag a data grid onto your screen and set the data source by choosing the ItemsSource property on the grid (the data binding option should be chosen). On the data field tab you can choose your data source. Make sure to select the actual "Collection(array)" option on the right hand side. By default it should auto generate the columns for you. This can be changed if you want more control the column header names, etc.

Hope this helps.

Answer 3

I did it using a ListBox-Sketch.

Check it out here.