Working with Sample Data in Blend

Standard

When you are using external data sources in your app, such as a database on a remote server, one of the most common issues you encounter during development is that you may not have access to the data you’re going to use in the app. The database may not be created or populated yet, you might not have access to the database at this point or you may just want to prepare a mock-up for prototyping or presentation purposes and don’t want to spend time and effort for a database. This situation causes some minor inconveniences for developers and (especially) designers in two areas: When you are designing the app, and when you are running it.

During design time, you see the values of binded objects empty. So if you bind the text of a TextBlock object, it will be blank. To cope with this, designers would usually create the design with some placeholder values and apply the bindings after that. However, this has the following three downsides: You still can’t see how the app will look in design time; you can see what parts of the design needs to be fixed only when the app is running; and to fix the design you have to break the bindings, give placeholder values again, modify the design and then apply the bindings again, which gets annoying quite fast and makes designing process harder. For example, look at the following image from the example WinRT app we’ll create in this article:

The user information (including the picture) is binded to a data source. This is how it looks in runtime.

The user information (including the picture) is binded to a data source. This is how it looks in runtime, in a GridView.

And this is how that GridView's item template looks like in design time. The GridView itself doesn't even show anything in the XAML designer.

And this is how that GridView’s item template looks like in design time. The GridView itself doesn’t even show anything in the XAML designer.

During runtime, you need to create the sample data and set your object’s ItemsSource in the codebehind file. This has the following issues: If you are purely a designer, this requires you to mess with the code so it may be an issue for both you and your project team; you need to enter sample values yourself; and you need to remove the code you’ve added when you are able to connect to the live database.

Fortunately, to overcome these issues, Blend provides us a handy feature called Sample Data which allows us to create a sample data source that generates values based on our specifications and then bind our objects to that sample data source. Considering the benefit of using sample data without writing a single line of code and being able to see the sample values both within runtime and design time, this feature helps us solve the aforementioned problems and simplifies the designing process. And of course, in this article, we’ll create a Windows Store app in Blend that uses a sample data source.

➤ Sample data can be used in WPF, Silverlight, WinRT and Windows Phone…