How to: Create computed/custom properties for sample data in Blend/Sketchflow

I blogged about sample data in Microsoft Blend/SketchFlow previously. SketchFlow is a great tool for rapidly building interactive screen prototypes. Sample data feature helps you to create plausible screen mocks quickly. I want to emphasize words interactive prototypes. Yes, user can click here and there and sees the entire “application flow”. Previously we mocked screens in HTML, had them rendered and sent this to our customers as a package full of JPEGs. Almost as a rule we had small disputes with customers who were arguing that they just cannot “grasp the application” from JPEGs. Now we can just publish a Silverlight prototype to our server and customers browse it throughout.

Hopefully I don’t need to note that logically connected screens should play together. Having double clicked a record in a datagrid on one screen and being redirected to another screen showing detailed information on this only record, data in fields should be the same (or related) to the record I clicked on the first screen. If you use sample data, it means that you should bind the first and second screen against the very same data source.

One problem I encountered is managing data derived from other fields in sample collection. Let’s say I have a customers collection with usual data like first name, last name and birth date. The first screen shows this list but I want to have only one column for customer name showing first and last name concatenated. I need them separated in my collection because the second “customer detail” screen would show them in separate text boxes. I could create a new string field and manually type in the full name but I am lazy to do such work and frankly have personal objections to do so. I prefer the way the full name field just computes itself. That way I can modify either name and full name updates automatically.

Double clicking on the Natasha row would bring me to the second screen with separate fields:

Fortunately, this task is not difficult. Your sample data collections are stored as XML files inside the SampleData folder in the XXXScreens project. For each such XML file, Blend generates a corresponding C# file with two ordinary class, one representing the collection and one the collection item (named Item):

public class Employees : System.ComponentModel.INotifyPropertyChanged
{
    public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
        }
    }

    public Employees()
    {
        try
        {
            System.Uri resourceUri = new System.Uri("/SilverlightPrototype_Derived.Screens;component/SampleData/Employees/Employees.xaml", System.UriKind.Relative);
            if (System.Windows.Application.GetResourceStream(resourceUri) != null)
            {
                System.Windows.Application.LoadComponent(this, resourceUri);
            }
        }
        catch (System.Exception)
        {
        }
    }

    private ItemCollection _Collection = new ItemCollection();

    public ItemCollection Collection
    {
        get
        {
            return this._Collection;
        }
    }
}

public class Item : System.ComponentModel.INotifyPropertyChanged
{
    public event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
        }
    }

    private string _LastName = string.Empty;

    public string LastName
    {
        get
        {
            return this._LastName;
        }

        set
        {
            if (this._LastName != value)
            {
                this._LastName = value;
                this.OnPropertyChanged("LastName");
            }
        }
    }

    private string _FirstName = string.Empty;

    public string FirstName
    {
        get
        {
            return this._FirstName;
        }

        set
        {
            if (this._FirstName != value)
            {
                this._FirstName = value;
                this.OnPropertyChanged("FirstName");
            }
        }
    }
}

Pretty boring code. If only the Item class would be generated with the partial directive, we could add our own class with the FullName computed property.

Let’s start some hacking then. Close Blend, start your favorite text editor and open the file C:\Program Files\Microsoft Expression\Blend 3\Templates\en\SampleDataCode.cs. This is the template Blend uses for generating C# code from the sample data XML source file.

Change line 43 from:

public class COMPOSITE_TYPE : System.ComponentModel.INotifyPropertyChanged //CompositeTypeHeader - BEGIN

to:

public partial class COMPOSITE_TYPE : System.ComponentModel.INotifyPropertyChanged //CompositeTypeHeader - BEGIN

Now start Blend again, open your project, force Blend to regenerate the code file (by adding a new property and removing it immediately). If you open the sample data code file, you can notice that the Item class now has the partial keyword!

Add a new class, change the namespace to exactly math the one in the original code file and write your own partial class, like mine:

namespace Expression.Blend.SampleData.Employees
{
    public partial class Item
    {
        public string FullName
        {
            get
            {
                return string.Format("{0} {1}", FirstName, LastName);
            }
        }
    }
}

Job done! I may create a new bound column to my datagrid:

<data:DataGridTextColumn Header="Full Name" Binding="{Binding FullName}"/>

Note: Blend may not recognize your new properties, so you may need to write your bound fields in XAML yourself, not in the Blend UI.

[digg]