Как преобразовать ListBox в LongListSelector

В настоящее время у меня есть ListBox, который обернут горизонтально, но я хотел бы переключить его на LongListSelector. Причина этого, помимо того, что он может быть заполнен большим количеством элементов, заключается в том, что при использовании ListBox нет согласованности с тем, как элементы упакованы. Я хотел бы видеть столбцы из трех, сколько строк требуется, когда элементы отображаются в представлении, но с ListBox это может быть либо два, либо три, в зависимости от ширины элемента. Элемент содержит как изображение, так и текст под ним, а текст (когда он шире изображения) приводит к тому, что элементы в списке переносятся неравномерно.

То, что у меня есть в настоящее время,

<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>

И то, что я пытался сделать, это

<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>

Я мог бы просто изменить <toolkit:WrapPanel ItemWidth="Auto" /> в оригинале на указанную ширину, но я считаю, что в долгосрочной перспективе, когда несколько элементов добавляются динамически, LongListSelector будет гораздо лучшим вариантом. На данный момент ошибок нет, но в представлении ничего не отображается.


c# listbox windows-phone-7 windows-phone-8 longlistselector
person Matthew    schedule 06.10.2013    source источник
comment
Привет, у тебя есть какое-нибудь решение твоей проблемы, так как я тоже столкнулся с той же проблемой.   -  person shubhi1910    schedule 08.11.2013

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете попробовать изменить ListBox на Phone:LongListSelector с помощью LayoutMode="Grid" и GridCellSize="250,250", где 250 — это произвольное число, которое вы определяете для страницы.

person dBlisse    schedule 06.10.2013
comment
Ну, выше у меня есть то, что я уже изменил ListBox на LongListSelector с этими изменениями. Я предполагаю, что моя проблема в том, что ничего не отображается в представлении. Мне пришлось удалить ItemsSource="{Binding}" из исходного ListBox, но я не знаю, как правильно добавить это в LongListSelector? Я считаю, что это проблема. - person Matthew; 06.10.2013

arrow_upward
0
arrow_downward 

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

И включить класс

 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;
    }

}
person JTIM    schedule 06.10.2013