如何将列表框转换为长列表选择器

本文关键字：列表 选择器 转换 | 更新日期: 2023-09-27 18:34:08

目前我有一个水平包装的列表框，但我想将其切换到 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 将是一个更好的选择。截至目前，没有错误，但视图中未显示任何内容。

如何将列表框转换为长列表选择器

您可能想尝试将ListBox更改为带有LayoutMode="Grid"和GridCellSize="250,250"的Phone:LongListSelector，其中 250 是您为页面定义的任意数字。

     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;
    }
}
相关文章：