winui3分页控件实现datagrid中的分页

Question

有人可以建议用于分页目的的组件吗？在 winui3 桌面应用程序和社区工具包中找不到任何东西，我刚刚找到了 PipPager-https://learn.microsoft.com/en-us/windows/apps/design/controls/pipspager。

寻找类似的东西 paging image

我可以查看其他任何组件吗？提前致谢。

Answer 1

我猜你需要创建一个。

这是我刚才创建的分页控件。我只是稍微改变了一下，看起来更接近你的形象。

分页控件.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));
    }
}

你可以像这样使用它。

<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>