Geeks With Blogs

News
Michael Crump Microsoft MVP, INETA Community Champion and XAML Advocate.

In the past when I needed to test what my application looked like with sample data. I’d create a class named Data.cs and write some code like the following:

Data.cs

public class Data
{
        public string Name { get; set; }
        public int Age { get; set; }

}

Code Behind:

List<Data> source = new List<Data>();

for (int i = 0; i < 50; i++)
{
    source.Add(new Data()
    {
        Name= "MIKE" + i,
        Age = i,


    });
}
dg.ItemsSource = source;

This would provide me with some quick and dirty sample data, but it really wasn’t what I’d expect in a real world application. What if i needed images or data formatted for a first and last name, street address and so on? I needed a mixture of strings, Boolean, images and other data types. This is where I decided to start using Expression Blend 4. I’d read about creating sample data and started using it in my applications and decided to share what I’ve learned with the community.

So our goal for today, is to create sample data add it to the LayoutRoot (grid) and bind the data to a ListBox. Sounds scary? No, its very simple with Blend 4. 

Open Expression Blend 4 and select your MainPage.xaml (or whichever xaml file you wish to add Sample Data to). On the right hand screen hit the Data button and select the button circled below.

image

You will have three choices:

New Sample Data
Import Sample Data from XML
Import Data from Class

Lets select “New Sample Data”. Once you select New Sample Data, you will get the following screen:

image

Go ahead and leave the defaults and hit OK. We now have a SampleDataSource that we can edit any way that we see fit. We are going to keep this simple by clicking the button circled below. This will allow us to change the type from a string to an Image.

image

Change this from:

image to image

We are going to do the same thing for Property2 except change it from a Boolean to a string

image to image

At this point we have a collection, that has 2 properties an Image and a String.

We can edit this Sample data if we wish by clicking the button below.

This brings us up to the Edit Sample Values screen. From this screen, we have the option to increase the number of records if we want to test lots of data. We will go ahead and hit the OK button.

image

At this point, we can go ahead and drag our Collection to the Grid and it will create a ListBox and setup the DataTemplate.

image

Its important to see the XAML below and notice how the Image is bound to Property1 and the TextBlock to Property2. You will also notice that the Listbox’s ItemSource is Bound to the Collection.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    x:Class="SilverlightApplication2.MainPage"
    Width="640" Height="480">
    <UserControl.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <StackPanel>
                <Image Source="{Binding Property1}" HorizontalAlignment="Left" Height="64" Width="64"/>
                <TextBlock Text="{Binding Property2}"/>
            </StackPanel>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="#FFFF4949" DataContext="{Binding Source={StaticResource SampleDataSource}}">
        <ListBox HorizontalAlignment="Left" ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding Collection}" Margin="0,18,0,0" Width="200"/>
    </Grid>
</UserControl>

We now have a fully functional Sample Data Source with exactly the type of data we specified. We can bind this data to any control that supports the ItemSource Property. I hope this helps other developers needing solid test data.

Posted on Friday, September 3, 2010 8:22 PM Silverlight | Back to top

Copyright © mbcrump | Powered by: GeeksWithBlogs.net