Pagination

Page buttons built from a page count, with ellipses and their page menus, as uikit:Pagination.

<StackPanel Spacing="8">
  <uikit:Pagination TotalPages="10" CurrentPage="5" />
  <uikit:Pagination TotalPages="50" CurrentPage="25" VisiblePages="7" Classes="small" />
</StackPanel>

#Usage

uikit:Pagination has the look of the Pagination and builds its page buttons from TotalPages and CurrentPage (from 1, two-way). Up to VisiblePages pages (5 by default, at least 5) it shows every page; past that it keeps the first and the last page, the pages on each side of the current one, and an ellipsis for each run of hidden pages. An ellipsis opens a menu of the pages it hides (at most the 100 nearest the current page, in a list that scrolls past 240px) to jump to one. A click on a page, Previous, Next or a menu entry sets CurrentPage and raises PageChanged with the old and the new page. Sizes: xsmall, small, large (medium without one); compact keeps the chevrons alone.

The demo has ten pages around page 5, and 50 pages with VisiblePages="7" in small.

#Examples

compact, at the default size and with small.

<StackPanel Orientation="Horizontal" Spacing="16">
  <uikit:Pagination Classes="compact" TotalPages="10" CurrentPage="1" />
  <uikit:Pagination Classes="compact small" TotalPages="10" CurrentPage="4" />
</StackPanel>