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

时间:2012-03-26 11:51:16

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

这就是我的列表框的样子:

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

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

ObservableCollection<Top>() MainViewModelDataContext绑定{{1}}。没关系,它正在显示我的项目,但是如何设置我想在该列表框中只显示50个项目,在我点击按钮后我想要显示前50个项目和50个项目来自收集和一次又一次如果集合中没有其他项目没有显示,则隐藏按钮。感谢

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

您可以在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的属性

希望有所帮助

答案 2 :(得分:0)

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

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