How to create Pagination with in XAML UWP Gridview

Question

high i'd love to create a simple pagination, where gridview items flip left and right. i currently have the Gridview displaying items.......

I,d like to be able to click or swipe next and see other items.

see XAML code below:

<Page
x:Class="IMG.InformationKiosk.Views.ProductsPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:IMG.InformationKiosk.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:y="using:IMG.InformationKiosk.Models"
mc:Ignorable="d">



<Page.Resources>
    <DataTemplate x:DataType="y:Book" x:Key="BookDataTemplate">
        <StackPanel HorizontalAlignment="Center" DragEnter="StackPanel_DragEnter" DragStarting="StackPanel_DragStarting"  Name="BookStackPanel" >
            <Image  Width="150" Source="{x:Bind CoverImage}"  />
            <TextBlock   FontSize="16" Text="{x:Bind Title}" HorizontalAlignment="Center"   />
            <TextBlock   FontSize="10" Text="{x:Bind Author}" HorizontalAlignment="Center"  />
        </StackPanel>
    </DataTemplate>
</Page.Resources>
<Page.Background>
    <ImageBrush Stretch="Fill" ImageSource="ms-appx:///Assets/background small logo.png"/>
</Page.Background>
<Grid Margin="20">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="100" />
        <RowDefinition Height="100" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*"/>
        <ColumnDefinition Width="5*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>


    <GridView   ItemsSource="{x:Bind Books}" 
              CanDragItems="True"  DragItemsCompleted="GridView_DragItemsCompleted"                                    
              DragItemsStarting="GridView_DragItemsStarting"                  
              ItemTemplate="{StaticResource BookDataTemplate}" Margin="10,143,34.5,63" Grid.Column="1" Grid.RowSpan="2"/>

    <StackPanel Grid.Column="2" HorizontalAlignment="Left" Height="365" Margin="10.5,102,0,0" VerticalAlignment="Top" Width="143" Grid.RowSpan="3" Opacity="1" CornerRadius="30">
        <TextBlock Opacity="1" Name="SelectedBooksTextBlock" Margin="12,35,-13,0" Grid.Column="1"/>
        <TextBlock  Opacity="1" Foreground="White"  Grid.Column="1">
            <Run Text="TOTAL" Foreground="White" FontWeight="Bold"/>
        </TextBlock>
    </StackPanel>
    <StackPanel Grid.Column="2" HorizontalAlignment="Left" Height="365" Margin="1.5,113,0,0" VerticalAlignment="Top" Width="152" Background="#FF4D4D4D" Grid.RowSpan="3" Opacity="0.3" CornerRadius="30">
    </StackPanel>


    <Image  Source="ms-appx:///Assets/shoppingBasket.png" AllowDrop="True" Name="ImageBasket" Drop="ImageBasket_Drop" DragOver="ImageBasket_DragOver" Margin="0,13,133,-19" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2" />
    <TextBlock x:Name="textBlock" Grid.Column="2" HorizontalAlignment="Left" Margin="60.5,128,-36,0" TextWrapping="Wrap" Text="Cart" VerticalAlignment="Top" Width="107" Height="30" FontWeight="Bold" Foreground="White"/>

</Grid>

C#

public sealed partial class ProductsPage : Page
{

    public List<Book> Books;
    public List<string> BooksSelectedList;
    public Dictionary<string, int> booksNumberSelectedDictionary;
    public ProductsPage()
    {
        this.InitializeComponent();

        Books = BookManager.GetBooks();
        BooksSelectedList = new List<string>();
        booksNumberSelectedDictionary = new Dictionary<string, int>();
    }

    private void GridView_ItemClick(object sender, ItemClickEventArgs e)
    {
        var book = (Book)e.ClickedItem;
        //    ResultTextBlock.Text = "You selected " + book.Title;
        book.NumberOfBookTypeSelected++;
        string selectedBookInfoToDisplay = $"{book.NumberOfBookTypeSelected} {book.Title}";

        if (booksNumberSelectedDictionary.ContainsKey(book.Title))
        {
            booksNumberSelectedDictionary[book.Title] = book.NumberOfBookTypeSelected;
        }
        else
        {
            booksNumberSelectedDictionary.Add(book.Title, book.NumberOfBookTypeSelected);
        }
        SelectedBooksTextBlock.Text = string.Empty;
        foreach (KeyValuePair<string, int> dictionaryItem in booksNumberSelectedDictionary)
        {
            SelectedBooksTextBlock.Text += (Environment.NewLine + $"{dictionaryItem.Value} {dictionaryItem.Key}");
        }
        //      BooksSelectedList.Add(Environment.NewLine + selectedBookInfoToDisplay);



        // SelectedBooksTextBlock.Text += Environment.NewLine + selectedBookInfoToDisplay;
        // code to trigger the item
        /*
            if (book.BookId == 1)
            {

                Frame.Navigate(typeof(MainPage));
            }*/



    }

    private void StackPanel_DropCompleted(UIElement sender, DropCompletedEventArgs args)
    {

    }

    private void StackPanel_Drop(object sender, DragEventArgs e)
    {
        //  var book = (Book)e.ClickedItem;
        var book = (Book)sender;
        // var book = (Book)e.;
        book.NumberOfBookTypeSelected++;
        string selectedBookInfoToDisplay = $"{book.NumberOfBookTypeSelected} {book.Title}";

        if (booksNumberSelectedDictionary.ContainsKey(book.Title))
        {
            booksNumberSelectedDictionary[book.Title] = book.NumberOfBookTypeSelected;
        }
        else
        {
            booksNumberSelectedDictionary.Add(book.Title, book.NumberOfBookTypeSelected);
        }
        SelectedBooksTextBlock.Text = string.Empty;
        foreach (KeyValuePair<string, int> dictionaryItem in booksNumberSelectedDictionary)
        {
            SelectedBooksTextBlock.Text += (Environment.NewLine + $"{dictionaryItem.Value} {dictionaryItem.Key}");
        }
    }

    private void StackPanel_DragEnter(object sender, DragEventArgs e)
    {

    }

    private void StackPanel_DragStarting(UIElement sender, DragStartingEventArgs args)
    {
        args.Data.RequestedOperation = DataPackageOperation.Copy;

    }

    private async void ImageBasket_DragOver(object sender, DragEventArgs e)
    {
         e.AcceptedOperation = DataPackageOperation.Copy;
        try
        {

            if (e.DataView == null) { return; }
            string draggedBookTitle = await e.DataView.GetTextAsync();
            e.DragUIOverride.Caption = $"Add {draggedBookTitle} to cart";
        }
        catch(COMException comex)
        {

        }
    }

    private async void ImageBasket_Drop(object sender, DragEventArgs e)
    {
        if(e.Data == null) { return; }
        var data = e.DataView;
        string dataText = data.ToString();
     //   IAsyncOperation<string> textAsyncTask = e.DataView.GetTextAsync();
        string draggedBookTitle = await e.DataView.GetTextAsync();
        Book draggedBook = Books.Where(b => b.Title == draggedBookTitle).FirstOrDefault();
        draggedBook.NumberOfBookTypeSelected++;

        if (booksNumberSelectedDictionary.ContainsKey(draggedBook.Title))
        {
            booksNumberSelectedDictionary[draggedBook.Title] = draggedBook.NumberOfBookTypeSelected;
        }
        else
        {
            booksNumberSelectedDictionary.Add(draggedBook.Title, draggedBook.NumberOfBookTypeSelected);
        }
        SelectedBooksTextBlock.Text = string.Empty;
        foreach (KeyValuePair<string, int> dictionaryItem in booksNumberSelectedDictionary)
        {
            SelectedBooksTextBlock.Text += (Environment.NewLine + $"{dictionaryItem.Value} {dictionaryItem.Key}");
        }         
    }

    private void GridView_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
    {
        Book draggedBook = (Book)e.Items[0];
        e.Data.SetText(draggedBook.Title);
        e.Data.RequestedOperation = DataPackageOperation.Copy;
    }

    private void MyLV_DragItemsStarting(object sender, DragItemsStartingEventArgs e)
    {
      Book draggedBook = (Book) e.Items[0];
        e.Data.SetText(draggedBook.Title);
        e.Data.RequestedOperation = DataPackageOperation.Copy ;
    }

Answer 1

You could handle the pagination of data through your BookManager.GetBooks() method. Change it to pass in an int which identifies the page you are on and return X number of books.

GetBooks(int page) {
    // Return x number of books
}

Then on a swipe of the grid or button press you could recall the BookManager.GetBooks(int page) method and pass your new page number to get the next list of books.