LongListSelector shows only 1 group

Question

I have been trying to get the most basic example of grouping to work using LongListSelector, but am only seeing my first group.

Here is my xaml:

        <toolkit:LongListSelector x:Name="MainListBox" Background="Transparent"
            ItemsSource="{Binding Items}">
            <toolkit:LongListSelector.GroupHeaderTemplate>
                <DataTemplate>
                    <Border Background="Transparent">
                        <Border Background="{StaticResource PhoneAccentBrush}" Width="475" Height="35" HorizontalAlignment="Left">
                            <TextBlock Text="{Binding Key}" 
                                       Foreground="{StaticResource PhoneForegroundBrush}" 
                                       Style="{StaticResource PhoneTextGroupHeaderStyle}"
                                       VerticalAlignment="Bottom"/>
                        </Border>
                    </Border>
                </DataTemplate>
            </toolkit:LongListSelector.GroupHeaderTemplate>


            <toolkit:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,0,0,17" Width="432" Orientation="Horizontal">
                        <TextBlock Text="{Binding name}" TextWrapping="Wrap" Width="345"/>
                    </StackPanel>
                </DataTemplate>
            </toolkit:LongListSelector.ItemTemplate>

        </toolkit:LongListSelector>

Here is my c# code:

        List<ItemViewModel> l1 = new List<ItemViewModel>();
        List<ItemViewModel> l2= new List<ItemViewModel>();
        l1.Add(new ItemViewModel(){ name="test1" });
        l1.Add(new ItemViewModel(){ name="test2" });
        l2.Add(new ItemViewModel(){ name="test3" });
        this.Items.Add(new Group<ItemViewModel>("A", l1));
        this.Items.Add(new Group<ItemViewModel>("B", l2));

ItemViewModel is just a container class.

When I run the code, I basically see:

A
test1
test2

but no sign of B.

Any help is appreciated.

Group is defined as:

public class Group<T> : ObservableCollection<T>
{
    public Group(string name, IEnumerable<T> items)
    {
        this.Key = name;
        foreach (T item in items)
        {
            this.Add(item);
        }
    }

    public override bool Equals(object obj)
    {
        Group<T> that = obj as Group<T>;

        return (that != null) && (this.Key.Equals(that.Key));
    }

    public string Key
    {
        get;
        set;
    }
}

Try binding the Group properties in the templates separately. If you have done so, could you post the templates as well? Here is a basic example, if this is the first time you've tried longlistselector — abhinav
Thanks for reply, updated the above post to include full xaml (hopefully that is what you are referring to). As mentioned, I am seeing 1 GroupHeader and the 2 Items underneath...just not the second groups and its items. — user1053873
SOLVED -- The issue was the Binding in the xaml. Rather than doing it that way, I needed to programmatically set MainListBox.ItemsSource. — user1053873

JTIM JTIM · Accepted Answer · 2013-09-22T15:04:07

Where T is the type. ItemsSource is your source of items that consists of elements of type T. And specify the element you want to sorted after from your ItemsSource

    List<LonglistSelectorPivot1<T>> DataSource = LonglistSelectorPivot1<T>.CreateGroups(ItemsSource,
               System.Threading.Thread.CurrentThread.CurrentUICulture,
               (T s) => { return s.WHAT_YOU_WANNER_SORT_FOR; }, true);
            MainListBox.ItemsSource = DataSource;

LongListSelector shows only 1 group

1 Answers