WP7 - Showing some items in listbox after button click show more items

Question

This is how looks my listbox:

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

I edited template for listbox so I have button at the end:

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

And I have ObservableCollection<Top>() in MainViewModel which I Bind to DataContext. It´s okay and it´s showing my items but how can I set that I want show just 50 items in that listbox and after I clicked on button I want to show that first 50 items and 50items more from collection and again and again and where there are no more items in collection which are no shown then hide button. Thanks

Answer 1

was able to hide the button using following code

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

Answer 2

Try this sample project. Instead of having listbox vertical offset in this sample , have a button as you wish.

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

Answer 3

You could have a variable in your ViewModel that keeps track of how many times the button is clicked. Then in your getter for the ObservableCollection, you could use LINQ and the Take operator. Something like this:

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

And then in 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();
        }
    }

And just bind your ListBox to the the Property called TheList

Hope that helps