winui3 pagination control for paging in datagrid

Question

can someone please suggest a component for pagination purpose? Not able to find any in the winui3 desktop app and in the community toolkit I just found PipPager- https://learn.microsoft.com/en-us/windows/apps/design/controls/pipspager.

Looking for something similar paging image

Is there any other component I can look into? Thanks in advance.

Answer 1

I guess you need to create one.

This is a pagination control I created a while ago. I just changed it a bit to look closer to your image.

PaginationControl.xaml

<UserControl
    x:Class="WinUI3Pagination.PaginationControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal">
        <HyperlinkButton
            x:Name="PreviousPageButton"
            Click="PreviousPageButton_Click"
            Content="&lt; Prev" />
        <TextBlock
            VerticalAlignment="Center"
            Text="Page" />
        <NumberBox
            Maximum="{x:Bind MaxPage, Mode=OneWay}"
            Minimum="{x:Bind MinPage, Mode=OneWay}"
            ValueChanged="CurrentPageNumberBox_ValueChanged"
            Value="{x:Bind CurrentPage, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <TextBlock
            VerticalAlignment="Center"
            Text=" / " />
        <TextBlock
            VerticalAlignment="Center"
            Text="{x:Bind MaxPage, Mode=OneWay}" />
        <HyperlinkButton
            x:Name="NextPageButton"
            Click="NextPageButton_Click"
            Content="Next &gt;" />
    </StackPanel>

</UserControl>

PaginationControl.xaml.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using Windows.Foundation;

namespace UserControls;

public sealed class PaginationControlValueChangedEventArgs
{
    public PaginationControlValueChangedEventArgs(int oldValue, int newValue)
    {
        OldValue = oldValue;
        NewValue = newValue;
    }

    public int OldValue { get; }

    public int NewValue { get; }
}

public sealed partial class PaginationControl : UserControl
{
    public static readonly DependencyProperty PageCountProperty = DependencyProperty.Register(
        nameof(MinPage),
        typeof(int),
        typeof(PaginationControl),
        new PropertyMetadata(1));

    public static readonly DependencyProperty MaxPageProperty = DependencyProperty.Register(
        nameof(MaxPage),
        typeof(int),
        typeof(PaginationControl),
        new PropertyMetadata(1));

    public static readonly DependencyProperty CurrentPageProperty = DependencyProperty.Register(
        nameof(CurrentPage),
        typeof(int),
        typeof(PaginationControl),
        new PropertyMetadata(1));

    public static readonly DependencyProperty IsPreviousPageButtonEnabledProperty = DependencyProperty.Register(
        nameof(IsPreviousPageButtonEnabled),
        typeof(bool),
        typeof(PaginationControl),
        new PropertyMetadata(true, (d, e) => (d as PaginationControl)?.UpdateButtons()));

    public static readonly DependencyProperty IsNextPageButtonEnabledProperty = DependencyProperty.Register(
        nameof(IsNextPageButtonEnabled),
        typeof(bool),
        typeof(PaginationControl),
        new PropertyMetadata(true, (d, e) => (d as PaginationControl)?.UpdateButtons()));

    public PaginationControl()
    {
        this.InitializeComponent();
    }

    public event TypedEventHandler<PaginationControl, PaginationControlValueChangedEventArgs>? PageChanged;

    public bool IsPreviousPageButtonEnabled
    {
        get => (bool)GetValue(IsPreviousPageButtonEnabledProperty);
        set => SetValue(IsPreviousPageButtonEnabledProperty, value);
    }

    public bool IsNextPageButtonEnabled
    {
        get => (bool)GetValue(IsNextPageButtonEnabledProperty);
        set => SetValue(IsNextPageButtonEnabledProperty, value);
    }

    public int CurrentPage
    {
        get => (int)GetValue(CurrentPageProperty);
        set => SetValue(CurrentPageProperty, value);
    }

    public int MinPage
    {
        get => (int)GetValue(PageCountProperty);
        set => SetValue(PageCountProperty, value);
    }

    public int MaxPage
    {
        get => (int)GetValue(MaxPageProperty);
        set => SetValue(MaxPageProperty, value);
    }

    private void UpdateButtons()
    {
        PreviousPageButton.IsEnabled = (CurrentPage > MinPage) && IsPreviousPageButtonEnabled;
        NextPageButton.IsEnabled = (CurrentPage < MaxPage) && IsNextPageButtonEnabled;
    }

    private void PreviousPageButton_Click(object sender, RoutedEventArgs e)
    {
        CurrentPage = Math.Max(CurrentPage - 1, MinPage);
    }

    private void NextPageButton_Click(object sender, RoutedEventArgs e)
    {
        CurrentPage = Math.Min(CurrentPage + 1, MaxPage);
    }

    private void CurrentPageNumberBox_ValueChanged(NumberBox sender, NumberBoxValueChangedEventArgs args)
    {
        UpdateButtons();
        PageChanged?.Invoke(
            this,
            new PaginationControlValueChangedEventArgs(
                (int)args.OldValue,
                (int)args.NewValue));
    }
}

And you can use it like this.

<Grid RowDefinitions="*,Auto">
    <Frame
        x:Name="PageFrame"
        Grid.Row="0" />
    <custom:PaginationControl
        Grid.Row="1"
        VerticalAlignment="Bottom"
        MaxPage="5"
        MinPage="1"
        PageChanged="PaginationControl_PageChanged" />
</Grid>