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;

image 

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

image

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,
                                System.Threading.Thread.CurrentThread.CurrentUICulture,
                                (Item i) => { return i.Name; }, true);
        }
        private List<AlphaKeyGroup<Item>> dataSource;
        public List<AlphaKeyGroup<Item>> DataSource
        {
            get
            {
                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;

<Application.Resources>
        <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;

<phone:LongListSelector
                DataContext="{Binding Source={StaticResource LongListSelectorData}}"
                ItemsSource="{Binding DataSource}"

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

 

image 

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!

image

Advertisements
This entry was posted in Windows Phone and tagged , , , . Bookmark the permalink.

9 Responses to How to use Blend sample data with a LongListSelector

  1. Pingback: How to use Blend sample data with a LongListSelector

  2. gyle says:

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

    • pauliom says:

      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.

  3. Myles says:

    Can this be done in WP7?

    • pauliom says:

      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 🙂

  4. Pingback: How to use wp7 LongListSelector with Blend Sample Data | IT Bytes

  5. Myles says:

    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?

  6. arhimakkonen says:

    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!

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s