How to use Blend sample data with a LongListSelector


The LongListSelector for Windows Phone is a great control. However, it can be a real pain to design especially when you want to use the Sample Data feature of Blend.

For example, you can  create Sample Data in Blend using a string Property called Name. When you drop it onto a List Box you are shown the data at Design time, this is really useful;


However, if you try the same trick with a Long List Selector your are faced with a blank page. If you try to edit any of the templates you are faced with more blank screens. It is far from ideal. So here is one method to make your Long List Selector projects Blend friendly.

1) Create your Sample Data – if you follow my example create the default Blend Sample with a Property called Name using the format for Name


2) Follow the MSDN article for creating a Long List Selector, this way you can test the result and be sure you haven’t made any errors, very easy to do. Don’t worry we’ll use our Sample Data soon

3) Once you have a Long List Selector working we’ll do some surgery. Derive a new class based on our SampleDataSource (if you renamed the SampleDataSource when creating it in Blend, you’ll need to use that name)

namespace Expression.Blend.SampleData.SampleDataSource
    public class LongListSampleData : SampleDataSource
        public LongListSampleData() : base()
            dataSource = AlphaKeyGroup<Item>.CreateGroups(base.Collection,
                                (Item i) => { return i.Name; }, true);
        private List<AlphaKeyGroup<Item>> dataSource;
        public List<AlphaKeyGroup<Item>> DataSource
                return this.dataSource;

4) Add a reference to this new Data Source in App.xaml. Add it to the Resources just like the one Blend added for you;

        <SampleData:SampleDataSource x:Key="SampleDataSource" d:IsDataSource="True"/>
        <SampleData:LongListSampleData x:Key="LongListSelectorData" d:IsDataSource="True"/>

5) Change the various data templates binding from using FirstName to Name

<DataTemplate x:Key="AddrBookItemTemplate">
           <StackPanel VerticalAlignment="Top">
               <TextBlock Text="{Binding FirstName}" />
               <TextBlock Text="{Binding Name}" />

6) Add Binding references to the LongListSelector control;

                DataContext="{Binding Source={StaticResource LongListSelectorData}}"
                ItemsSource="{Binding DataSource}"

7) Build and run. You should now see something like;



8) View it in Blend or Visual Studio designer. Please note, both designers are a bit flaky – especially Blend. You normally have to close any open window showing the page, in fact it’s often easier to just close the apps down and re-open then. You should then be able to view the selector and all of its templates at Design Time!


9 thoughts on “How to use Blend sample data with a LongListSelector

  1. gyle April 25, 2013 / 7:06 pm

    Unfortunately, the link to the MSDN Long List Selector article does not match up with this article. making this article somewhat useless..

    • pauliom April 26, 2013 / 2:17 pm

      Sorry if you’re having trouble but the link does still work. If the link is still causing you problems I suggest you start from the MSDN site, then the Phone developer site and then under User Interface for Windows Phone.

  2. Myles July 30, 2013 / 5:15 pm

    Can this be done in WP7?

    • pauliom July 31, 2013 / 9:22 pm

      Mostly yes and a little no. The MSDN link has two hurdles; it uses the new LongListSelector and uses the SortedLocalGrouping which I believe is wp8 only. Neither are that difficult to overcome. You can replace the SortedLocalGrouping with a simple array from #abc…xyz. Once you do that, and follow an example for correctly creating a Toolkit LLS the blend part of the post remains the same. If I get some more wp7 requests I’ll post the example..I have just tried it out myself 🙂

  3. Myles August 10, 2013 / 12:13 pm

    In step 3 what do you mean by derive a new class based on our SampleDataSource? Do I have to create a new class? If so, what do I name it?

  4. arhimakkonen February 5, 2014 / 12:25 pm

    Hey, I’m making band list for rock festival. MSDN LongListSelector works just fine, but after the step 3 I’ll get errors everywhere. I think I put codes wrong places. Can you tell where to put every code more accurate? Like MainPage.xaml and so on. What means “Derive a new class”?

    Thank you so much for tutorial!

    • pauliom February 7, 2014 / 11:11 pm

      You create a new sample data source that uses the original sample class as its base class

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s