WP7 - 单击按钮后在列表框中显示一些项目显示更多项目答案

【问题标题】：WP7 - Showing some items in listbox after button click show more itemsWP7 - 单击按钮后在列表框中显示一些项目显示更多项目
【发布时间】：2012-03-26 11:51:15
【问题描述】：

这是我的列表框的外观：

<ListBox x:Name="ForthListBox" 
           Margin="0,0,-12,0" 
           ItemsSource="{Binding Tops}"
           Tap="ForthListBox_Tap" Style="{StaticResource TopListBoxStyle}">
           <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,0,0,17">
                      <TextBlock Text="{Binding Title}" 
                                 TextWrapping="Wrap" 
                                 Margin="12,0,0,0" 
                                 FontSize="40"/>
                     <TextBlock Text="{Binding Rating}" 
                                TextWrapping="NoWrap" 
                                Margin="12,-6,0,0" 
                                Style="{StaticResource PhoneTextSubtleStyle}"/>
                    </StackPanel>
                 </DataTemplate>
         </ListBox.ItemTemplate>
</ListBox>

我为列表框编辑了模板，所以最后有按钮：

<Style x:Key="TopListBoxStyle" TargetType="ListBox">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <ScrollViewer x:Name="ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Padding="{TemplateBinding Padding}">
                        <StackPanel><ItemsPresenter/>
                            <Button x:Name="BtnLoadMore" Click="BtnLoadMore_Click" Content="Další" />
                        </StackPanel>
                    </ScrollViewer>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

我在MainViewModel 中有ObservableCollection<Top>()，我绑定到DataContext。没关系，它显示了我的项目，但我如何设置我只想在该列表框中显示 50 个项目，然后单击按钮后，我想显示收藏中的前 50 个项目和 50 个项目，一次又一次，如果集合中没有更多未显示的项目，则隐藏按钮。谢谢

【问题讨论】：

我尝试过为此拥有 2 个收藏品。一个用于绑定，我只添加我想要显示的项目，第二个将包含所有项目，当我单击按钮时我会从中获取项目，但我认为这个解决方案不是最好的。我希望在 {Binding} 中有一些选项

标签： windows-phone-7 listbox windows-phone-7.1 observablecollection

【解决方案1】：

能够使用以下代码隐藏按钮

private void BtnLoadMore_Click(object sender, RoutedEventArgs e)
{
    AddMoreItems();
    Button b = sender as Button;
    b.Visibility = System.Windows.Visibility.Collapsed;
}

【讨论】：

【解决方案2】：

试试这个示例项目。在此示例中没有列表框垂直偏移，而是根据需要使用按钮。

http://blogs.microsoft.co.il/blogs/shair/archive/2011/04/06/wp7-how-to-extend-listbox-when-reaching-last-item.aspx

【讨论】：

【解决方案3】：

您可以在 ViewModel 中有一个变量来跟踪按钮被点击的次数。然后在 ObservableCollection 的 getter 中，您可以使用 LINQ 和 Take 运算符。像这样的：

 public class MainPageViewModel : INotifyPropertyChanged {
        private ObservableCollection<string> _myList;
        private int _clickCount;
        private const int ItemsPerPage = 25;

        public MainPageViewModel() {
            _myList = new ObservableCollection<string>();
            _clickCount = 1;
            PopulateList();
        }

        private void PopulateList() {
            for (int i = 0; i < 100; i++) {
                _myList.Add(string.Format("item {0}", i));
            }
        }

        public ObservableCollection<string> TheList {
            get { return new ObservableCollection<string>(_myList.Take(_clickCount * ItemsPerPage).ToList()); } 
        }

        public void IncrementClickCount() {
            if (_clickCount * ItemsPerPage < _myList.Count) {
                _clickCount += 1;
                RaisePropertyChanged("TheList");
            }
        }

        protected void RaisePropertyChanged(string property) {
            if(PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(property));
        }
        public event PropertyChangedEventHandler PropertyChanged;
    }

然后在 MainPage.xaml.cs 中

  public partial class MainPage : PhoneApplicationPage {
        private MainPageViewModel _vm;
        // Constructor
        public MainPage()
        {
            InitializeComponent();
            Loaded += (s, e) => {
                          _vm = new MainPageViewModel();
                          DataContext = _vm;
                      };
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            _vm.IncrementClickCount();
        }
    }

只需将您的 ListBox 绑定到名为 TheList 的属性

希望有帮助

【讨论】：