|
Silverlight 3 SketchFlow DataBinding
|
|
Rating: 7 user(s) have rated this article
Posted by: Malcolm Sheridan,
on 9/22/2009,
in category "Silverlight 2, 3 and 4"
Views: this article has been read 9516 times
Abstract: The following article demonstrates how to use SketchFlow to bind data to your controls.
Silverlight 3 SketchFlow DataBinding
SketchFlow has been out for a couple of weeks now, so I wanted to do an article on how to bind data to your controls to give the users a richer experience when they’re viewing your prototype. As quoted on the Microsoft site "Sketching and prototyping are proven techniques that enable you to explore ideas and concepts quickly without excessive investment in either time or resources. You can use drawing tools, sticky notes, WPF or Silverlight controls and components, as well as imported images to iterate on and visualize your ideas quickly".
To begin with open Microsoft Expression Blend 3 and choose New Project > Silverlight 3 SketchFlow Application:
When the solution loads, the first thing to do is add a ListBox control to the page. Seeing as though this is a prototype, it’s nice to have that look and feel, so I’m going to use the SketchStyles.xaml file. The SketchStyles.xaml resource outputs the controls with squiggly lines, giving the controls a sketch like appearance. Open the Resources tab and drag a ListBox-Sketch control onto the page:
Now it’s time to add some data. Click on the Data tab and choose Add sample data source > Define new sample data:
Name the data source ListBoxData and define it in this document and click OK:
By default, the data source is created as a collection that you can add and remove items from. There are two properties available to you straight away, Property1 and Property2. Change Property2 to be a number type:
The next step is to bind the data to the ListBox. This is easily accomplished by dragging Property1 onto the ListBox. If you ran the project now you’ll see the data in the ListBox:
That’s pretty cool by itself, but to go that extra step, I want the user to be able to select any item and have it display the corresponding Property2 value from the data in a TextBox. Add a TextBlock-Sketch control to the page. On the Properties tab click on the Advanced properties option on the DataContext property and choose Data Binding:
In the Create Data Binding screen select the Element Binding tab. We need to set the DataContext to the ListBox’s selected item:
Click OK. The final step is to bind the text property. On the Properties tab click on the Advanced properties option on the Text property and choose Data Binding. Select the Explicit Data Context tab and select Property2:
If you run the project now, you can select any item from the ListBox and the TextBox will display the related data:
The data that is displayed can be customised, so it’s possible to show real data. You can also enable this data only for designers, and when the application is running display a different set of data. Overall this is a nice feature in SketchFlow.
The entire source code of this article can be downloaded over here