MVVM-friendly usage of SimpleLongListSelector?

May 2, 2011 at 12:43 AM

I'm working on using the SimpleLongListSelector in an MVVM app, and I'm having some trouble getting the bindings set up correctly. I would like to be able to bind the control from XAML to a property in my viewmodel. If I bind in the XAML to the ItemsSource property, the list populates but the group headers don't.

I created a sample project using the codebehind approach so I could focus on trying to bind the view using a property. Here's what my XAML looks like:

<phoney:SimpleLongListSelector x:Name="MoviesListGroup">
                <TextBlock Text="{Binding Description}" />
                <TextBlock Text="{Binding Movie}" />

And my codebehind looks like this:

public partial class MainPage : PhoneApplicationPage
        private List<SoundClip> unfilteredSoundClipsList;

        public List<IGrouping<string, SoundClip>> ByCategoryList { get; set; }
        public MainPage()


            var query = from clip in unfilteredSoundClipsList
                orderby clip.Category, clip.Description
                group clip by clip.Category into category
                select category;

            ByCategoryList = query.ToList();
            this.MoviesListGroup.SetGroupingItemsSource(ByCategoryList); //This works

However, setting .SetGroupingItemsSource() on the control couples the view and viewmodel. Instead, I'd like to be able to bind the control via a public property.  If I change my XAML to bind the ItemsSource property of phoney:SimpleLongListSelector to ByCategoryQuery, the list populates but the group headers don't.

I think I either need to find a way to do the equivalent of SetGroupingItemsSource by setting a property in XAML, or I need to create a custom group header template. I'm fine with the latter approach, but I can't figure out what to bind the textblock in the custom template to.

Any suggestions would be much appreciated.