Binding data in LongListSelector

Question

I am referring to the example here : http://dotnet.dzone.com/articles/using-longlistselector-control

Here is my code :

public class Chapters
    {
        private string mainTitle;

        public string MainTitle
        {
            get { return mainTitle; }
            set { mainTitle = value; }
        }

        private List<string> subTitle;

        public List<string> SubTitle
        {
            get { return subTitle; }
            set { subTitle = value; }
        }


    }

private static IEnumerable<HighwayCode> GetCityList()
        {
            return myList;
             // Which already contains data:

              MainTitle : Chapters
              subtitle : ABC
              subtitle : X

              MainTitle : Chapters Two
              subtitle : ASDF
              subtitle : GHIJK

        }

        public class GroupingLayer<TKey, TElement> : IGrouping<TKey, TElement>
        {

            private readonly IGrouping<TKey, TElement> grouping;

            public GroupingLayer(IGrouping<TKey, TElement> unit)
            {
                grouping = unit;
            }

            public TKey Key
            {
                get { return grouping.Key; }
            }

            public IEnumerator<TElement> GetEnumerator()
            {
                return grouping.GetEnumerator();
            }

            System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
            {
                return grouping.GetEnumerator();
            }
        }

XAML:

<phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="GroupHeader">
            <Border Background="{StaticResource PhoneAccentBrush}" Margin="{StaticResource PhoneTouchTargetOverhang}" Padding="{StaticResource PhoneTouchTargetOverhang}">
                <TextBlock Text="{Binding Key}"/>
            </Border>
        </DataTemplate>

        <DataTemplate x:Key="ItemTmpl">
        <Grid>
            <TextBlock Style="{StaticResource PhoneTextLargeStyle}" 
                       Foreground="Black" 
                       Text="{Binding SubTitle}"></TextBlock>
        </Grid>
    </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

<phone:LongListSelector x:Name="longListSelector"
                                    IsGroupingEnabled="True" LayoutMode="List" HideEmptyGroups="False"
                                    ItemTemplate="{StaticResource ItemTmpl}"
                                    GroupHeaderTemplate="{StaticResource GroupHeader}"/>

and i am setting it like this :

var selected = (from c in myList
                group c by c.MainTitle into n
                select new GroupingLayer<string, MyObject>(n)).ToList();

longListSelector.ItemsSource = selected;

But for me its only displaying the Main Title but Sub titles are not displaying at all.

What is wrong here ?

Answer 1

I believe you should set your items source to an observablecollection

I didn't do it exactly like you, but here is my xaml and here is a viewmodel for an app I build for the windows phone store.

I also believe it is key to clear and then set your items source on update. When I was building a WPF app, I seem to remember spending a lot of time trouble shooting the observablecollection not updating.

Answer 2

When you do this

var selected = (from c in myList group c by c.MainTitle into n select new GroupingLayer<string, MyObject>(n)).ToList();

you get a list where every item has:

• a Key property (in your case containing MainTitle value) because you group by MainTitle!
• a list of "child" items

When you define your DataTemplate, you can bind the property "Key" because exists in this new list, but SubTitle does not exists, so you can't show it!

You can take a look at this sample:

http://code.msdn.microsoft.com/wpapps/PhotoHub-Windows-Phone-8-fd7a1093