ListBox with “load more” option

I would like to know how to construct the ListBox in WP7 that only load 20 items at a single time, and have a footer that show "load more" if there is any.

When user press the "load more", it will load another 20 in the list without loading the previous loaded data?

I am using LINQ at the behind source.

my code for XMAL as follow:

<Grid>
  <ListBox name="newsIndexListBoxEN">
    <ListBoxItem>
      <DataTemplate>
        <StackPanel Width="410" Orientation="Horizontal" VerticalAlignment="Top" Margin="0,5,0,5">
          <StackPanel Background="DarkBlue" Margin="10,0,0,0" Height="100" Width="100" VerticalAlignment="Top">
            <TextBlock Name="columnsTypeTB" Text="{Binding pType}" Margin="0,0,0,0" Foreground="White" FontSize="23" HorizontalAlignment="Center" />
            <Image Width="100" Height="100" VerticalAlignment="Top" HorizontalAlignment="Center" Source="Background.png" />
          </StackPanel>
          <StackPanel Width="300" Height="100" Margin="0,0,0,0">
            <Path Margin="0,0,0,0" Data="M39,8 L389,8" Fill="DarkBlue" Height="1" Stretch="Fill" Stroke="DarkBlue" UseLayoutRounding="False" Width="400"/>
            <TextBlock Margin="8,0,0,0" Text="{Binding pTitle}" Tag="{Binding pID}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" Width="292" Height="66" />
            <TextBlock Margin="8,5,0,0" Text="{Binding pDate}" Tag="{Binding pID}" MouseEnter="NewsViewContent_mouseEnter" Style="{StaticResource PhoneTextSmallStyle}" VerticalAlignment="Bottom" TextWrapping="Wrap" Width="292" />
          </StackPanel>
        </StackPanel>
      </DataTemplate>
    </ListBoxItem>
  </ListBox>
</Grid>

C# Code as follow:

using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication())
{
    using (IsolatedStorageFileStream fs = storage.OpenFile(fileName, FileMode.Open))
    {
        XDocument menuIndex = XDocument.Load(fs);

        var menuIndexList = from query in menuIndex.Descendants("news")
                            orderby (int)query.Element("newsID") descending
                            select new mkmenu
                                   {                                                
                                       pID = query.Element("newsID").Value,
                                       pTitle = query.Element("newsTitle").Value,
                                       pDate = query.Element("newspDate").Value,
                                       pType = newsType
                                   };

        newsIndexListBoxEN = menuIndexList.Count();
    }
}

any ideas? sample code?

回答1:

You can edit your listbox template to show a "Load more" button at the end of the list. In Blend, right click on your listbox, choose Edit Template, Edit a copy. By default, your listbox has a template like this:

ScrollViewer
    ItemPresenter

Wrap your ItemPresenter into a StackPanel, then add a button at the end:

ScrollViewer
    StackPanel
        ItemPresenter
        Button

That button will always be displayed at the end of the listbox. Handle the Clicked event of that button to add items to your ObservableCollection.

回答2:

You can bind your listbox to ObservableCollection and add first 20 items on your page(app) load. Than after pressing "load more" get next 20 items and add to collection. Items will automatically be added to listbox.