Silverlight 3 SketchFlow DataBinding
Posted by: Malcolm Sheridan
in Category Silverlight 2, 3, 4 and 5
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
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!