Develop Windows universal apps rapidly with the power of dynamic design time sample data

Blend and the visual designer in Visual Studio is relying on the content first principle. Therefor will most of the UI Elements be invisible when we data bind them to a ViewModel without data. This blog post will discuss the common ways to solve this with static sample data and then presents a better way by using Sunflower, a new .NET library for Windows Universal Apps, to dynamically generate sample data.

Common ways to generate sample data

  1. We can use Blend to create sample data stored in XML files. But there are several problems working with Blend Sample data.
    • The sample data tend to be out of sync with the ViewModel very quickly.
    • If we change the existing ViewModel too much we usually end up with a lot of errors and warnings in Visual Studio.
    • If we change a string to int in the ViewModel. This change cannot be seen in Blend or in the designer in Visual Studio. The sample data will still feed our UI with the old string data.
    • We don’t have sample data for new properties that we add to the ViewModel.
    • To update the sample data we are either forced to hack sample data XML by hand or delete the sample data before regenerating new sample data from the ViewModel and set it to the pages data context again.

All the problems often leads to that we stop maintaining the sample data and the sample data will become out of sync with the ViewModel. Finally we often stop using it for designing our views.

  1. When the Blend sample data have failed us we usually starts to create sample data in code in our ViewModels because it is easier to maintain when we change and evolve the ViewModel.
    • It works, but it is not fun and if we have deep complex ViewModels with a lot of collections then it can take a lot of time to code sample data. Time that we want to use on more productive things.

The solution – Sunflower

When I realized the limitations of the current tools to create sample data I decided to create Sunflower. Sunflower is a new .NET library for Windows Universal Apps that dynamically generates sample data by analyzing the ViewModel. Add one line of code in the constructor of the ViewModel, rebuild the project and we have sample data that is in sync with the ViewModel. Any future changes in the ViewModels properties is automatically handled by SunFlower after rebuilding the solution.

Another benefit with Sunflower is that the sample data generated by Sunflower is not just dumb lprem ipsum text. If we have a TextBlock that is data bound to a Street property on a ViewModel class named AddressVmi. Then Sunflower will generate “Street(AddressVmi)” as sample data. By just looking at the view in the designer we know where the data is coming from and we can directly see if it is bound to the right property on the ViewModel.

VSDesignerWithSunflower

 

Richer sample data with Sunflower Attributes

Sunflower have seven attributes that can be used to control and extend the sample data that Sunflower generates. Sunflower don’t need any attributes to generate data. The attributes is only to enhance the control over the generated sample data.

 

TextLength attribute

The TextLength attribute is used on string properties to control how the sample data will be generated.

[TextLength(400)]

Sets the length of the generated sample data text to 400.

[TextLength(400, true)]

Sets the length of the generated sample data text to 400. If randomSize is set to true, then the text will be generated with random size where textLength defines the maximum size.

Example:

 

SunflowerSampleAppWP2

 

CollectionLength attribute

The CollectionLength attribute is used on ObservableCollection<T> to control how many items to generate for the ObservableCollection.

[CollectionLength(4)]

Sets the length of the generated collection to 4 items.

Default Sunflower generates 30 items if CollectionLength attribute is not used.

Example:

 

ImageSize attribute

The ImageSize attribute is used on BitmapImages to control the size of the generated BitmapImage.

[ImageSize(300,200)]

Sets the size of the generated BitmapImage to width 300 and height 200.

Example:

 

CustomSampleData attribute

Use CustomSampleData attribute to set the exact sample data that you want. Sunflower will take the custom sample data instead of generating something for you.

[CustomSampleData(“My sample data”)]

Sets sample data on a string property to “My sample data”.

[CustomSampleData(2)]

Sets sample data on an int property to 2.

Use the CustomSampleData attribute to point out a resource on the internet.

Example:

 

ImageSourceAsset attribute

The ImageSourceAsset attribute should be used on string properties containing the URI location of an image file used for binding to Image UIElement. The ImageSourceAsset attribute informs Sunflower that this string property should be used for binding to an Image UIElement.

Add a new sample image to the projects Assets folder or use an existing image in the Assets folder. The ImageSourceAsset attribute takes an asset file name without a path as in parameter.

[ImageSourceAsset(“StoreLogo.scale-100.png”)]

Sets an image from Assets. Only image name is needed.

Example:

 

GenerateType attribute

The GenerateType attribute instruct Sunflower to generate sample data of another type then the declared type. This can be useful if we have an ObservableCollection<> with a base type and have different types of objects added to the ObservableCollection<>. If we have a ListView that uses a DataTemplateSelector to show different DataTemplates depending on the types of objects in the ObservableCollection<>. Using this attribute will make it easy for us to switch between different types of data when we are designing various Data Templates.

[GenerateType(typeof(ProductVmi))]

Sets a type to be used for sample data generation instead of the declared type.

Example:

 

NoSampleDataGeneration attribute

The NoSampleDataGeneration attribute will prevent Sunflower from changing the property value. This will come handy if you want to set a ViewModel property in code and you don’t want Sunflower to overwrite it.

[NoSampleDataGeneration]

Prevent Sunflower from changing the property value.

Example:

 

Start using Sunflower

Add Sunflower to your project using Nuget.

Go to the Sunflower website for complete Sunflower documentation and download the example project for Windows and Windows Phone to get started.

Lars-Håkan Jönsson

1 Comment

  1. Philip Colmer

    This is amazing! Thank you!

Leave a Reply