Thursday, February 3, 2011

How to Make a Sketchy DataGrid in SketchFlow

I've taken SketchFlow for a ride lately, while mocking up the user interface of a small webapp. It's actually easy to work with once you get it, yet it's got great capabilities.

I was amazed though that Microsoft didn't provide a DataGrid control in sketchy style just out-of-the-box. Of course you can use the standard DataGrid control and tweak it a bit, but I couldn't get it totally sketchy.

That's when it occurred to me you could use a ListBox-Sketch control binded to multi-column data source. And this is how I did it...

First I draw the ListBox-Sketch.



Then I created the multi-column data source.



Next I binded the listbox to the data source.



That places the list items bellow each other instead of side-by-side. So we need to change the item template. First I set the template in edit mode.



Then I changed the layout of the container to a Grid.



Next I rearranged the TextBlock generated for the different columns of the datasource to get them side by side. I found this was best done by aligning them top-left and giving them left margin. You will probably also want to remove the Grids height to set it to Auto.



After that I come out of the template edit mode. The result is already looking good.



To make it even better I add a header using a Rectangle-Sketch with a grayed-out background and several TextBlock-Sketch.




That's it.