This project is read-only.

MVVM-friendly usage of SimpleLongListSelector?

May 2, 2011 at 1: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">
    <phoney:SimpleLongListSelector.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Description}" />
                <TextBlock Text="{Binding Movie}" />
            </StackPanel>
        </DataTemplate>
    </phoney:SimpleLongListSelector.ItemTemplate>
</phoney:SimpleLongListSelector>

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()
        {
            InitializeComponent();

            PopulateSoundClipsList();

            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.