Generating Data at Design Time

For most practical scenarios, the controls that you create (and are instantiated by Blend on its design surface) are bound to data structures that are populated at run-time. Unfortunately, these result in an experience on the design surface that is not friendly to designers – for example, how can you figure out the optimal font size for rendering a label when you can’t visualize the typical value that the label would display?

Fortunately, Blend has a way to easily modify the behavior of controls when they are hosted inside the Blend design surface, as opposed to the actual application. This opens up a number of possibilities, including the ability to simulate data at design time. Let us use a simple example to describe how you can do this.

Consider that you are designing a form that visualizes stock data, with the actual data coming from a web-service.  The data structure that holds the data might look something like the following:

public class StockWidgetModel

      {

            private ObservableCollection<Quote> quoteList = new ObservableCollection<Quote>();

            public ObservableCollection<Quote> QuoteList

            {

                  get { return quoteList; }

            }

            public StockWidgetModel()

            {

            if (IsInDesignMode())

                  {

                        this.createDummyData();

                  }

            }

        private bool IsInDesignMode()

{

return (bool)DependencyPropertyDescriptor.FromProperty(DesignerProperties.IsInDesignModeProperty, typeof(FrameworkElement)).Metadata.DefaultValue;

}

            private void createDummyData()

            {

                  this.QuoteList.Add(new Quote("MSFT", "Microsoft Corporation, Redmond, WA 98052", 25.4, +1.2));

            }

        private void RefreshQuotes() { }

        public static Quote GetQuote(string symbol) { }

      }

The interesting bit is highlighted in Yellow. This function can be used to check, anywhere in your code, as to whether your control is running inside the Blend Design surface. In this case, we are conditionally executing some code that won’t execute in the actual running application to populate our Quotes data structure, so we could design the list box that is bound to this data structure better.

See this in action by downloading the sample here.

Unni