IT Bytes

 

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,
                                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;

 

 

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!