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

I am not 100% clear on what you are trying to do. You could use the SketchBorderUC or a Rectangle-Sketch.

What visual representation are you trying to achieve that you would use a grid for?

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

There isn't a 'sketch' style grid, so you have 2 options:

• Use a list box and edit the template to be a grid / horizontal stack panel with borders etc.
• Use the standard grid, you can still make the text 'Buxton Sketch' font so it still looks pretty good, but it does have some chrome effects breaking the 'pure sketch' look

Use what suits you best.

Answer 4

First of all if you are using Silverlight based sketch you have a datagrid available otherwise if you are working with WPF you could use WPF Toolkit which includes one.

To make a Silverlight datagrid "sketchy" please take a look at the sample at http://cid-99b45ff02d12b84d.skydrive.live.com/self.aspx/Public/Scratch/SilverlightPrototype8.zip

I think this sample also applies to a WPF based sketch with a datagrid from WPF toolkits with only minor adjustments...

Good luck

Answer 5

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.:-)