Simulating Sample Data in Blend 2 SP1

  • Article

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