[Feature] Controls Pagination Xaml

[humbertomoli99]

Describe the problem

Currently, the Microsoft.Toolkit.Uwp.UI.Controls package provides a set of user controls useful for developing apps for Windows 11 and WinUI 3. However, the XAML pagination control is not included in the package and this can make it difficult to development of applications that require data paging.

Therefore, it is proposed to add a XAML pagination control to the Microsoft.Toolkit.Uwp.UI.Controls package. This control would be a complete and easy-to-use solution for data pagination, and could include features such as customizable page size options, forward and back navigation buttons, and information about the total number of pages and total items.

This would be a great help to developers working with UWP and WinUI 3, as it would allow them to easily add paging functionality to their apps without having to create their own custom control or rely on third-party libraries.

Describe the solution

The solution to the problem is to add a pagination control as a default feature in the Microsoft.Toolkit.Uwp.UI.Controls package. This would make it easier for developers to implement pagination in their UWP and WinUI 3 applications without having to create a custom control or use third-party libraries.

The pagination control should include basic features such as the ability to set the number of items per page, navigate to the first, last, previous and next pages, and display a summary of the current page and total number of pages.

In addition, the pagination control should be customizable to allow developers to style it to fit their application's design and branding. This could be achieved through the use of styles and templates.

By including a pagination control as a default feature in the Microsoft.Toolkit.Uwp.UI.Controls package, developers would have access to a reliable and consistent way of implementing pagination in their applications. This would reduce development time and improve the user experience by providing a standard way of navigating through large sets of data.
https://www.youtube.com/watch?v=AisI7MCVrC8&ab_channel=AndrewKeepCoding

https://www.youtube.com/watch?v=1s5aKJ0-dos&ab_channel=Desarrollodeinterfaces

https://www.youtube.com/watch?v=yrW6Yt3tC7g&t=195s&ab_channel=AndrewKeepCoding

<UserControl
    x:Class="PriceTrendCam.Controls.ControlPager"
    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:local="using:PriceTrendCam.Controls"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid HorizontalAlignment="Right">
        <StackPanel VerticalAlignment="Center" Orientation="Horizontal">
            <TextBlock
                x:Uid="txtShowRows"
                Margin="0,0,10,0"
                VerticalAlignment="Center" />
            <ComboBox
                x:Name="RowsPerPageOptions"
                Margin="0,0,10,0"
                IsEditable="True"
                ItemsSource="{x:Bind ViewModel.RowsPerPageOptions}"
                SelectedIndex="0"
                SelectionChanged="RowsPerPageOptions_SelectionChanged" />
            <TextBlock
                Grid.Column="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="{Binding PageSummary}" />
            <Button Margin="0,0,5,0" Command="{x:Bind ViewModel.MoveToFirstPageCommand}">
                <FontIcon
                    FontFamily="{StaticResource BootstrapIcons}"
                    FontSize="18"
                    Glyph="&#xF276;" />
            </Button>
            <Button Margin="0,0,5,0" Command="{x:Bind ViewModel.MoveToPreviousPageCommand}">
                <FontIcon
                    FontFamily="{StaticResource BootstrapIcons}"
                    FontSize="18"
                    Glyph="&#xF284;" />
            </Button>
            <Button Margin="0,0,5,0" Command="{x:Bind ViewModel.MoveToNextPageCommand}">
                <FontIcon
                    FontFamily="{StaticResource BootstrapIcons}"
                    FontSize="18"
                    Glyph="&#xF285;" />
            </Button>
            <Button Margin="0,0,0,0" Command="{x:Bind ViewModel.MoveToLastPageCommand}">
                <FontIcon
                    FontFamily="{StaticResource BootstrapIcons}"
                    FontSize="18"
                    Glyph="&#xF277;" />
            </Button>
        </StackPanel>
    </Grid>
</UserControl>

Alternatives

No response

Additional info

No response

Help us help you

Yes, I'd like to be assigned to work on this item.

[ghost]

Hello, 'humbertomoli99! Thanks for submitting a new feature request. I've automatically added a vote 👍 reaction to help get things started. Other community members can vote to help us prioritize this feature in the future!

[niels9001]

@humbertomoli99 Thanks for opening up this issue.. I moved this issue to our new Labs repo where all the new work, related to the Windows Community Toolkit, is happening 😊.

[michael-hawker]

@humbertomoli99 this is basically a request for the feature that's specified in the WinUI repo here:

• Feature Proposal: PagerControl  microsoft/microsoft-ui-xaml#60
• Pager Control checklist microsoft/microsoft-ui-xaml#2934
• Initial Pager Control Check-In - Partial C# Prototype microsoft/microsoft-ui-xaml#2977 - initial prototype

Also related is the pips pager control from WinUI 2.7: microsoft/microsoft-ui-xaml#3464

@niels9001 probably good to sync with design and platform team to see if they've been planning to take this anywhere or if we should just bring over to labs in the meantime?

[niels9001]

@humbertomoli99 is this something you'd like to pick up and open a PR for 😊? I synced with the WinUI folks and they do not have any immediate plans to build this at the moment. The prototype that they build in the past (that @michael-hawker mentioned) (microsoft/microsoft-ui-xaml#2977) might be useful. We can obviously pull in the Design team in case we have any UI related questions :-)!