Simulating Sample Data in Blend 2 SP1

Using sample data can make designing your Silverlight 2 applications more predictable. Given some data, you have a lot of flexibility in designing around this data in Expression Blend. The challenge is that there are are many cases where you simply won’t be able to see your data on the design surface. Think of an example where some data is displayed only after you query a web service. One way around this would be to hard-code the data to display. The problem is that this leaves you with extra work in the end to make sure you switch out your hard-coded data with real data.

In this post, I will show you some code for a workaround where you can have sample data on the design surface while still retaining your ability to have live data when you are testing your actual app in the browser:

public class Member{ public string FullName { get; set; } public double Delta { get; set; } public int Status { get; set; }}public class MyData{ public ObservableCollection Members { get; private set; } public MyData() { this.Members = new ObservableCollection(); bool designTime = (System.Windows.Browser.HtmlPage.IsEnabled == false); if (designTime) { this.LoadDesignTimeData(); } else { // TODO: runtime } } private void LoadDesignTimeData() { this.Members.Add(new Member() { FullName = "Bunda3", Delta = -2.39, Status = 0 }); this.Members.Add(new Member() { FullName = "SneakerHead", Delta = 14.92, Status = 1 }); this.Members.Add(new Member() { FullName = "NobodyMan", Delta = -4.62, Status = 3 }); }}

The corresponding XAML will look like the following:

<UserControl.Resources>      <DesignTimeData:MyData x:Key="MyDataDS" d:IsDataSource="True"/>            <DataTemplate x:Key="MembersTemplate">            <StackPanel>                  <TextBlock Text="{Binding Path=Delta}"/>                  <TextBlock Text="{Binding Path=FullName}"/>                  <TextBlock Text="{Binding Path=Status}"/>            </StackPanel>      </DataTemplate></UserControl.Resources> <Grid Background="White">      <ListBox ItemTemplate="{StaticResource MembersTemplate}"       ItemsSource="{Binding Mode=OneWay, Path=Members, Source={StaticResource MyDataDS}}"/></Grid>

The code I have pasted above should be pretty self-explanatory. What I am doing is checking to see if I am currently editing this XAML file in Expression Blend. For Silverlight, you can do that by checking your HtmlPage.IsEnabled boolean property.

If I am currently in Expression Blend, I pull in data from my sample data class, MyData. This allows me to edit my data template and style my data easily. When I preview this application in the browser, because HtmlPage.IsEnabled will be set to true, you will not see the sample data. Instead, you would see real data!

- Evgeny

Comments

• Anonymous
  October 27, 2008
  I think this approach is flawed - HtmlPage.IsEnabled can be false if your SL app is on a page that has script access turned off, even at runtime. A better thing to check would be System.ComponentModel.DesignerProperties.GetIsInDesignMode(this) - which works in Blend, but fails in Cider currently (a known bug).

• Anonymous
  October 27, 2008
  Using sample data can make designing your Silverlight 2 applications more predictable. Given some data,

• Anonymous
  October 27, 2008
  Using sample data can make designing your Silverlight 2 applications more predictable. Given some data

• Anonymous
  October 27, 2008
  Other than the Cider bug, is there any reason one might use the HtmlPage.Isenabled call instead of GetIsInDesignMode as Austin suggests? Especially considering the GetIsInDesignMode technique is also WPF-compatible?

• Anonymous
  October 28, 2008
  In this issue: Jesse Liberty, Michael Sync, Shawn Burke, David Anson, Andy Beaulieu, Dan Wahlin, Laurent

• Anonymous
  February 11, 2009
  Add using System.Collections.ObjectModel; Change:   public ObservableCollection Members { get; private set; } To:   public ObservableCollection<Member> Members { get; private set; } Change:   this.Members = new ObservableCollection(); To:   this.Members = new ObservableCollection<Member>();

• Anonymous
  February 26, 2009
  You may have noticed the new look for the Twilight Twitter Badge on my blog a few weeks ago. I wanted