#Pagination

A Pagination control has the page buttons for a list that shows one page at a time: previous, the page numbers and next. It always shows the first page, the last page and the pages next to the current one, with "…" for the pages between.

How to page a list:

1. Add a Pagination under the list.
2. Give it the number of items and the items on one page.
3. In PageChanged, show the items of the page.

<tb:Pagination name="pages" />

const int pageSize = 10;
var pages = root.Q<Pagination>("pages");
pages.SetItemCount(saves.Count, pageSize);
pages.PageChanged += showPage;
showPage(pages.Page);

void showPage(int page)
{
    list.itemsSource = saves.Skip((page - 1) * pageSize).Take(pageSize).ToList();
    list.Rebuild();
}

• The previous and next buttons are disabled on the first and the last page.
• With more pages than fit, the control shows the same number of buttons on each page (5 + 2 × SiblingCount). The next button does not move, so the user can click it again and again.
• A gap of one page shows that page, not "…", because the two take the same room.
• The page buttons are focusable. After a page change, the focus moves to the button of the new current page.
• The control holds only the page number. It does not own the list or the data.
• The first and last buttons are disabled on the first and the last page, as previous and next are.
• A bare arrow button has a tooltip. With ShowLabels the text says it, and the tooltip is empty.
• With PageSizes, a selector shows after the buttons. A pick sets PageSize. After SetItemCount, it also sets PageCount again for the same number of items, and Page stays in range.
• The texts "Previous", "Next", "First page", "Last page" and "Per page" come from ToolboxText. See Localization.

A pager with all the parts:

<tb:Pagination name="pages" show-labels="true" show-first-last="true" page-sizes="10,25,50" />

pages.SetItemCount(saves.Count, 10);
pages.PageChanged += showPage;
// The page count is new already; show the items of the page again
pages.PageSizeChanged += _ => showPage(pages.Page);

Tips:

• Call SetItemCount again after a filter changes the number of items. The page stays valid.
• PageChanged is not raised for the first page at the start. Call your handler one time after you connect it, as in the example.
• On a narrow screen, set sibling-count="0" to show fewer buttons.

#Styling

To center the control and make the buttons round:

.tb-pagination { justify-content: center; }
.tb-pagination .tb-pagination__button { border-radius: 12px; }