How to Convert ListBox to LongListSelector

Question

Currently I have a ListBox that is wrapped horizontally, but I would like to switch this to the LongListSelector. The reason for this, other than that it may be populated with a lot of items, is that when using a ListBox there is no consistency with how the items are wrapped. I would like to see columns of three, with however many rows are required when the items are shown in the view, but with the ListBox this may either be two or three depending on the width of the item. The item contains both an image and text under it, and the text (when wider than the image) is causing the items in the list to wrap in a non uniform manner.

What I have currently is

<ListBox Name="ListBoxEffects" SelectionMode="Single" ItemsSource="{Binding}" Margin="{Binding}"
                     toolkit:TiltEffect.IsTiltEnabled="True" SelectionChanged="ListBox_SelectionChanged" >
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel ItemWidth="Auto" />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical" Margin="12,0,0,24" >
                            <Image Source="{Binding Thumbnail}" Width="128" Height="128" />
                            <TextBlock Text="{Binding Name}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

And what I was trying to accomplish is

<phone:LongListSelector Name="ListBoxEffects" Margin="{Binding}" 
                                    toolkit:TiltEffect.IsTiltEnabled="True" 
                                    LayoutMode="Grid" GridCellSize="128,128"
                                    SelectionChanged="ListBox_SelectionChanged" >
                <phone:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical" Margin="12,0,0,24" >
                            <Image Source="{Binding Thumbnail}" Width="128" Height="128" />
                            <TextBlock Text="{Binding Name}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </StackPanel>
                    </DataTemplate>
                </phone:LongListSelector.ItemTemplate>
            </phone:LongListSelector>

I could just change <toolkit:WrapPanel ItemWidth="Auto" /> in the original to a specified width, but I believe in the long run with several items being added dynamically, the LongListSelector will be a much better option. As of now, there are no errors but nothing shows in the view.

Answer 1

You may want to try changing the ListBox to Phone:LongListSelector with a LayoutMode="Grid" and GridCellSize="250,250", where the 250 is an arbitrary number you define for the page..

Answer 2

     List<LonglistSelectorPivot1<Class>> DataSource = LonglistSelectorPivot1<Class>.CreateGroups(observableSource,
            System.Threading.Thread.CurrentThread.CurrentUICulture,
            (Classs) => { return s.elementToSortAfter; }, true);
        LongListSelectorName.ItemsSource = DataSource;

And include class

 public class LonglistSelectorPivot1<T> : List<T>
{
    public delegate string GetKeyDelegate(T item);

    /// <summary>
    /// The Key of this group.
    /// </summary>
    public string Key { get; private set; }

    /// <summary>
    /// Public constructor.
    /// </summary>
    /// <param name="key">The key for this group.</param>
    public LonglistSelectorPivot1(string key)
    {
        Key = key;
    }

    /// <summary>
    /// Create a list of AlphaGroup<T> with keys set by a SortedLocaleGrouping.
    /// </summary>
    /// <param name="slg">The </param>
    /// <returns>Theitems source for a LongListSelector</returns>
    private static List<LonglistSelectorPivot1<T>> CreateGroups(SortedLocaleGrouping slg)
    {
        List<LonglistSelectorPivot1<T>> list = new List<LonglistSelectorPivot1<T>>();

        foreach (string key in slg.GroupDisplayNames)
        {
            list.Add(new LonglistSelectorPivot1<T>(key));
        }

        return list;
    }

    /// <summary>
    /// Create a list of AlphaGroup<T> with keys set by a SortedLocaleGrouping.
    /// </summary>
    /// <param name="items">The items to place in the groups.</param>
    /// <param name="ci">The CultureInfo to group and sort by.</param>
    /// <param name="getKey">A delegate to get the key from an item.</param>
    /// <param name="sort">Will sort the data if true.</param>
    /// <returns>An items source for a LongListSelector</returns>
    public static List<LonglistSelectorPivot1<T>> CreateGroups(IEnumerable<T> items, CultureInfo ci, GetKeyDelegate getKey, bool sort)
    {
        SortedLocaleGrouping slg = new SortedLocaleGrouping(ci);
        List<LonglistSelectorPivot1<T>> list = CreateGroups(slg);

        foreach (T item in items)
        {
            int index = 0;
            if (slg.SupportsPhonetics)
            {
                //check if your database has yomi string for item
                //if it does not, then do you want to generate Yomi or ask the user for this item.
                //index = slg.GetGroupIndex(getKey(Yomiof(item)));
            }
            else
            {
                index = slg.GetGroupIndex(getKey(item));
            }
            if (index >= 0 && index < list.Count)
            {
                list[index].Add(item);
            }
        }

        if (sort)
        {
            foreach (LonglistSelectorPivot1<T> group in list)
            {
                group.Sort((c0, c1) => { return ci.CompareInfo.Compare(getKey(c0), getKey(c1)); });
            }
        }

        return list;
    }

}