Merge pull request #17 from irihitech/15-pagination

15 pagination

demo/Ursa.Demo/Pages/BannerDemo.axaml

@@ -32,7 +32,7 @@
                         Grid.Row="0"
                         Grid.Column="1"
                         MinWidth="200"
-                        Items="{Binding Types}"
+                        ItemsSource="{Binding Types}"
                         SelectedItem="{Binding SelectedType}" />
                     <Label
                         Grid.Row="1"

demo/Ursa.Demo/Pages/PaginationDemo.axaml

@@ -0,0 +1,24 @@
+<UserControl
+    x:Class="Ursa.Demo.Pages.PaginationDemo"
+    xmlns="https://github.com/avaloniaui"
+    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"
+    xmlns:u="https://irihi.tech/ursa"
+    xmlns:viewModels="clr-namespace:Ursa.Demo.ViewModels"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <Design.DataContext>
+        <viewModels:PaginationDemoViewModel />
+    </Design.DataContext>
+    <StackPanel>
+        <TextBlock Text="{Binding #page.CurrentPage}" />
+        <ToggleSwitch Name="pageSizeSelector" Content="Show Page Size Selector" />
+        <u:Pagination
+            Name="page"
+            PageSizeOptions="10, 20, 50, 100"
+            ShowPageSizeSelector="{Binding #pageSizeSelector.IsChecked}"
+            TotalCount="600" />
+    </StackPanel>
+</UserControl>

demo/Ursa.Demo/Pages/PaginationDemo.axaml.cs

@@ -0,0 +1,15 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Ursa.Demo.ViewModels;
+
+namespace Ursa.Demo.Pages;
+
+public partial class PaginationDemo : UserControl
+{
+    public PaginationDemo()
+    {
+        InitializeComponent();
+        this.DataContext = new PaginationDemoViewModel();
+    }
+}

demo/Ursa.Demo/Ursa.Demo.csproj

@@ -19,12 +19,12 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="11.0.0-preview6" />
-        <PackageReference Include="Avalonia.Desktop" Version="11.0.0-preview6" />
+        <PackageReference Include="Avalonia" Version="11.0.0-preview7" />
+        <PackageReference Include="Avalonia.Desktop" Version="11.0.0-preview7" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview6" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview7" />
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
-        <PackageReference Include="Semi.Avalonia" Version="0.1.0-preview6" />
+        <PackageReference Include="Semi.Avalonia" Version="0.1.0-preview7" />
     </ItemGroup>
 
     <ItemGroup>

demo/Ursa.Demo/ViewModels/PaginationDemoViewModel.cs

@@ -0,0 +1,11 @@
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using Avalonia.Collections;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Ursa.Demo.ViewModels;
+
+public class PaginationDemoViewModel: ObservableObject
+{
+    public AvaloniaList<int> PageSizes { get; set; } = new() { 10, 20, 50, 100 };
+}

demo/Ursa.Demo/Views/MainWindow.axaml

@@ -35,6 +35,9 @@
             <TabItem Header="IPv4Box">
                 <pages:IPv4BoxDemo />
             </TabItem>
+            <TabItem Header="Pagination">
+                <pages:PaginationDemo />
+            </TabItem>
             <TabItem Header="Timeline">
                 <pages:TimelineDemo />
             </TabItem>

src/Ursa.Themes.Semi/Controls/Pagination.axaml

@@ -0,0 +1,123 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:u="https://irihi.tech/ursa">
+    <Design.PreviewWith>
+        <StackPanel Margin="20">
+            <u:PaginationButton Page="3" />
+        </StackPanel>
+    </Design.PreviewWith>
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type u:Pagination}" TargetType="u:Pagination">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:Pagination">
+                <StackPanel Orientation="Horizontal">
+                    <u:PaginationButton Name="{x:Static u:Pagination.PART_PreviousButton}">
+                        <PathIcon
+                            Width="12"
+                            Height="12"
+                            Data="{DynamicResource PaginationBackwardGlyph}"
+                            Foreground="{DynamicResource PaginationButtonIconForeground}" />
+                    </u:PaginationButton>
+                    <StackPanel Name="{x:Static u:Pagination.PART_ButtonPanel}" Orientation="Horizontal" />
+                    <u:PaginationButton Name="{x:Static u:Pagination.PART_NextButton}">
+                        <PathIcon
+                            Width="12"
+                            Height="12"
+                            Data="{DynamicResource PaginationForwardGlyph}"
+                            Foreground="{DynamicResource PaginationButtonIconForeground}" />
+                    </u:PaginationButton>
+                    <ComboBox
+                        Name="{x:Static u:Pagination.PART_SizeChangerComboBox}"
+                        IsVisible="{TemplateBinding ShowPageSizeSelector}"
+                        ItemsSource="{TemplateBinding PageSizeOptions}"
+                        SelectedItem="{TemplateBinding PageSize,
+                                                       Mode=TwoWay}" />
+                </StackPanel>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type u:PaginationButton}" TargetType="u:PaginationButton">
+        <Setter Property="Content" Value="{Binding $self.Page}" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="MinWidth" Value="32" />
+        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="Background" Value="{DynamicResource PaginationButtonDefaultBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource PaginationButtonDefaultForeground}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:PaginationButton">
+                <Border
+                    Padding="4"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="1"
+                    CornerRadius="3">
+                    <ContentPresenter
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Content="{TemplateBinding Content}"
+                        FontWeight="{TemplateBinding FontWeight}"
+                        Foreground="{TemplateBinding Foreground}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover">
+            <Setter Property="u:PaginationButton.Background" Value="{DynamicResource PaginationButtonPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="u:PaginationButton.Background" Value="{DynamicResource PaginationButtonPressedBackground}" />
+        </Style>
+        <Style Selector="^:left">
+            <Setter Property="u:PaginationButton.Content">
+                <Template>
+                    <PathIcon
+                        Width="12"
+                        Height="12"
+                        Data="{DynamicResource PaginationMoreGlyph}"
+                        Foreground="{DynamicResource PaginationButtonIconForeground}" />
+                </Template>
+            </Setter>
+            <Style Selector="^:pointerover">
+                <Setter Property="u:PaginationButton.Content">
+                    <Template>
+                        <PathIcon
+                            Width="12"
+                            Height="12"
+                            Data="{DynamicResource PaginationFastBackwardGlyph}"
+                            Foreground="{DynamicResource PaginationButtonIconForeground}" />
+                    </Template>
+                </Setter>
+            </Style>
+        </Style>
+        <Style Selector="^:right">
+            <Setter Property="u:PaginationButton.Content">
+                <Template>
+                    <PathIcon
+                        Width="12"
+                        Height="12"
+                        Data="{DynamicResource PaginationMoreGlyph}"
+                        Foreground="{DynamicResource PaginationButtonIconForeground}" />
+                </Template>
+            </Setter>
+            <Style Selector="^:pointerover">
+                <Setter Property="u:PaginationButton.Content">
+                    <Template>
+                        <PathIcon
+                            Width="12"
+                            Height="12"
+                            Data="{DynamicResource PaginationFastForwardGlyph}"
+                            Foreground="{DynamicResource PaginationButtonIconForeground}" />
+                    </Template>
+                </Setter>
+            </Style>
+        </Style>
+        <Style Selector="^:selected">
+            <Setter Property="u:PaginationButton.Background" Value="{DynamicResource PaginationButtonSelectedBackground}" />
+            <Setter Property="u:PaginationButton.Foreground" Value="{DynamicResource PaginationButtonSelectedForeground}" />
+            <Setter Property="u:PaginationButton.FontWeight" Value="600" />
+        </Style>
+    </ControlTheme>
+
+</ResourceDictionary>

src/Ursa.Themes.Semi/Controls/_index.axaml

@@ -5,6 +5,7 @@
         <ResourceInclude Source="Banner.axaml" />
         <ResourceInclude Source="Divider.axaml" />
         <ResourceInclude Source="IPv4Box.axaml" />
+        <ResourceInclude Source="Pagination.axaml" />
         <ResourceInclude Source="Timeline.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Ursa.Themes.Semi/Index.axaml

@@ -7,8 +7,8 @@
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
-                <ResourceInclude x:Key="Dark" Source="./Themes/Dark/_index.axaml" />
-                <ResourceInclude x:Key="Light" Source="./Themes/Light/_index.axaml" />
+                <MergeResourceInclude x:Key="Dark" Source="./Themes/Dark/_index.axaml" />
+                <MergeResourceInclude x:Key="Light" Source="./Themes/Light/_index.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="../Controls/_index.axaml" />

src/Ursa.Themes.Semi/Themes/Dark/Pagination.axaml

@@ -0,0 +1,10 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="PaginationButtonDefaultForeground" Color="#FFF9F9F9" />
+    <SolidColorBrush x:Key="PaginationButtonSelectedForeground" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="PaginationButtonIconForeground" Opacity="0.6" Color="#FFF9F9F9" />
+    <SolidColorBrush x:Key="PaginationButtonDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="PaginationButtonPointeroverBackground" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="PaginationButtonPressedBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="PaginationButtonSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
+</ResourceDictionary>

src/Ursa.Themes.Semi/Themes/Dark/_index.axaml

@@ -5,6 +5,7 @@
         <MergeResourceInclude Source="Banner.axaml" />
         <MergeResourceInclude Source="Divider.axaml" />
         <MergeResourceInclude Source="IPv4Box.axaml" />
+        <MergeResourceInclude Source="Pagination.axaml" />
         <MergeResourceInclude Source="Timeline.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Ursa.Themes.Semi/Themes/Light/Pagination.axaml

@@ -0,0 +1,10 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="PaginationButtonDefaultForeground" Color="#FF1C1F23" />
+    <SolidColorBrush x:Key="PaginationButtonSelectedForeground" Color="#FF0077FA" />
+    <SolidColorBrush x:Key="PaginationButtonIconForeground" Opacity="0.62" Color="#FF1C1F23" />
+    <SolidColorBrush x:Key="PaginationButtonDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="PaginationButtonPointeroverBackground" Opacity="0.05" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="PaginationButtonPressedBackground" Opacity="0.09" Color="#FF2E3238" />
+    <SolidColorBrush x:Key="PaginationButtonSelectedBackground" Color="#FFEAF5FF" />
+</ResourceDictionary>

src/Ursa.Themes.Semi/Themes/Light/_index.axaml

@@ -5,6 +5,7 @@
         <MergeResourceInclude Source="Banner.axaml" />
         <MergeResourceInclude Source="Divider.axaml" />
         <MergeResourceInclude Source="IPv4Box.axaml" />
+        <MergeResourceInclude Source="Pagination.axaml" />
         <MergeResourceInclude Source="Timeline.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Ursa.Themes.Semi/Themes/Shared/Pagination.axaml

@@ -0,0 +1,8 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <PathGeometry x:Key="PaginationFastBackwardGlyph">M12.6185 4.39653C13.1272 4.92524 13.1272 5.78245 12.6185 6.31116L7.14483 12L12.6185 17.6888C13.1272 18.2176 13.1272 19.0748 12.6185 19.6035C12.1098 20.1322 11.285 20.1322 10.7763 19.6035L4.38153 12.9573C3.87282 12.4286 3.87282 11.5714 4.38153 11.0427L10.7763 4.39653C11.285 3.86782 12.1098 3.86782 12.6185 4.39653Z M19.6185 4.39653C20.1272 4.92524 20.1272 5.78245 19.6185 6.31116L14.1448 12L19.6185 17.6888C20.1272 18.2176 20.1272 19.0748 19.6185 19.6035C19.1098 20.1322 18.285 20.1322 17.7763 19.6035L11.3815 12.9573C10.8728 12.4286 10.8728 11.5714 11.3815 11.0427L17.7763 4.39653C18.285 3.86782 19.1098 3.86782 19.6185 4.39653Z</PathGeometry>
+    <PathGeometry x:Key="PaginationFastForwardGlyph">M4.38153 4.39653C4.89024 3.86782 5.71502 3.86782 6.22373 4.39653L12.6185 11.0427C13.1272 11.5714 13.1272 12.4286 12.6185 12.9573L6.22373 19.6035C5.71502 20.1322 4.89024 20.1322 4.38153 19.6035C3.87282 19.0748 3.87282 18.2176 4.38153 17.6888L9.85517 12L4.38153 6.31116C3.87282 5.78245 3.87282 4.92524 4.38153 4.39653Z M11.3815 4.39653C11.8902 3.86782 12.715 3.86782 13.2237 4.39653L19.6185 11.0427C20.1272 11.5714 20.1272 12.4286 19.6185 12.9573L13.2237 19.6035C12.715 20.1322 11.8902 20.1322 11.3815 19.6035C10.8728 19.0748 10.8728 18.2176 11.3815 17.6888L16.8552 12L11.3815 6.31116C10.8728 5.78245 10.8728 4.92524 11.3815 4.39653Z</PathGeometry>
+    <PathGeometry x:Key="PaginationForwardGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
+    <PathGeometry x:Key="PaginationBackwardGlyph">M16.2782 4.23933C16.864 4.82511 16.864 5.77486 16.2782 6.36065L10.6213 12.0175L16.2782 17.6744C16.864 18.2601 16.864 19.2099 16.2782 19.7957C15.6924 20.3815 14.7426 20.3815 14.1569 19.7957L7.43934 13.0782C6.85355 12.4924 6.85355 11.5426 7.43934 10.9568L14.1569 4.23933C14.7426 3.65354 15.6924 3.65354 16.2782 4.23933Z</PathGeometry>
+    <PathGeometry x:Key="PaginationMoreGlyph">M7 12C7 13.3807 5.88071 14.5 4.5 14.5C3.11929 14.5 2 13.3807 2 12C2 10.6193 3.11929 9.5 4.5 9.5C5.88071 9.5 7 10.6193 7 12Z M14.5 12C14.5 13.3807 13.3807 14.5 12 14.5C10.6193 14.5 9.5 13.3807 9.5 12C9.5 10.6193 10.6193 9.5 12 9.5C13.3807 9.5 14.5 10.6193 14.5 12Z M19.5 14.5C20.8807 14.5 22 13.3807 22 12C22 10.6193 20.8807 9.5 19.5 9.5C18.1193 9.5 17 10.6193 17 12C17 13.3807 18.1193 14.5 19.5 14.5Z</PathGeometry>
+</ResourceDictionary>

src/Ursa.Themes.Semi/Themes/Shared/_index.axaml

@@ -5,5 +5,6 @@
         <MergeResourceInclude Source="Banner.axaml" />
         <MergeResourceInclude Source="Divider.axaml" />
         <MergeResourceInclude Source="IPv4Box.axaml" />
+        <MergeResourceInclude Source="Pagination.axaml" />
     </ResourceDictionary.MergedDictionaries>
 </ResourceDictionary>

src/Ursa.Themes.Semi/Ursa.Themes.Semi.csproj

@@ -8,7 +8,7 @@
     </PropertyGroup>
 
     <ItemGroup>
-      <PackageReference Include="Avalonia" Version="11.0.0-preview6" />
+      <PackageReference Include="Avalonia" Version="11.0.0-preview7" />
     </ItemGroup>
 
     <ItemGroup>

src/Ursa/Controls/Pagination/Pagination.cs

@@ -0,0 +1,282 @@
+using Avalonia;
+using Avalonia.Collections;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Primitives;
+using Avalonia.Interactivity;
+using Avalonia.Styling;
+
+namespace Ursa.Controls;
+
+/// <summary>
+/// Pagination is a control that displays a series of buttons that can be used to navigate to pages.
+/// CurrentPage starts from 1.
+/// Pagination only stores an approximate index internally.
+/// </summary>
+[TemplatePart(PART_PreviousButton, typeof(PaginationButton))]
+[TemplatePart(PART_NextButton, typeof(PaginationButton))]
+[TemplatePart(PART_ButtonPanel, typeof(StackPanel))]
+[TemplatePart(PART_SizeChangerComboBox, typeof(ComboBox))]
+public class Pagination: TemplatedControl
+{
+    public const string PART_PreviousButton = "PART_PreviousButton";
+    public const string PART_NextButton = "PART_NextButton";
+    public const string PART_ButtonPanel = "PART_ButtonPanel";
+    public const string PART_SizeChangerComboBox = "PART_SizeChangerComboBox";
+    private PaginationButton? _previousButton;
+    private PaginationButton? _nextButton;
+    private StackPanel? _buttonPanel;
+    private readonly PaginationButton[] _buttons = new PaginationButton[7];
+    private ComboBox? _sizeChangerComboBox;
+
+    protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+    {
+        base.OnApplyTemplate(e);
+        if (_previousButton != null) _previousButton.Click -= OnButtonClick;
+        if (_nextButton != null) _nextButton.Click -= OnButtonClick;
+        _previousButton = e.NameScope.Find<PaginationButton>(PART_PreviousButton);
+        _nextButton = e.NameScope.Find<PaginationButton>(PART_NextButton);
+        _buttonPanel = e.NameScope.Find<StackPanel>(PART_ButtonPanel);
+        _sizeChangerComboBox = e.NameScope.Find<ComboBox>(PART_SizeChangerComboBox);
+        if (_previousButton != null) _previousButton.Click += OnButtonClick;
+        if (_nextButton != null) _nextButton.Click += OnButtonClick;
+        InitializePanelButtons();
+        UpdateButtons(0);
+
+    }
+    
+    public static readonly StyledProperty<int> CurrentPageProperty = AvaloniaProperty.Register<Pagination, int>(
+        nameof(CurrentPage));
+    
+    public int CurrentPage
+    {
+        get => GetValue(CurrentPageProperty);
+        set => SetValue(CurrentPageProperty, value);
+    }
+
+    public static readonly StyledProperty<int> TotalCountProperty = AvaloniaProperty.Register<Pagination, int>(
+        nameof(TotalCount));
+
+    /// <summary>
+    /// Total count of items. 
+    /// </summary>
+    public int TotalCount
+    {
+        get => GetValue(TotalCountProperty);
+        set => SetValue(TotalCountProperty, value);
+    }
+
+    public static readonly StyledProperty<int> PageSizeProperty = AvaloniaProperty.Register<Pagination, int>(
+        nameof(PageSize), defaultValue: 10);
+    
+    /// <summary>
+    /// Page size.
+    /// </summary>
+    public int PageSize
+    {
+        get => GetValue(PageSizeProperty);
+        set => SetValue(PageSizeProperty, value);
+    }
+
+    private int _pageCount;
+
+    public static readonly DirectProperty<Pagination, int> PageCountProperty = AvaloniaProperty.RegisterDirect<Pagination, int>(
+        nameof(PageCount), o => o.PageCount);
+
+    /// <summary>
+    /// Page count.
+    /// </summary>
+    public int PageCount
+    {
+        get => _pageCount;
+        private set => SetAndRaise(PageCountProperty, ref _pageCount, value);
+    }
+
+    public static readonly StyledProperty<AvaloniaList<int>> PageSizeOptionsProperty = AvaloniaProperty.Register<Pagination, AvaloniaList<int>>(
+        nameof(PageSizeOptions));
+
+    public AvaloniaList<int> PageSizeOptions
+    {
+        get => GetValue(PageSizeOptionsProperty);
+        set => SetValue(PageSizeOptionsProperty, value);
+    }
+
+    public static readonly StyledProperty<ControlTheme> PageButtonThemeProperty = AvaloniaProperty.Register<Pagination, ControlTheme>(
+        nameof(PageButtonTheme));
+
+    public ControlTheme PageButtonTheme
+    {
+        get => GetValue(PageButtonThemeProperty);
+        set => SetValue(PageButtonThemeProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> ShowPageSizeSelectorProperty = AvaloniaProperty.Register<Pagination, bool>(
+        nameof(ShowPageSizeSelector));
+
+    public bool ShowPageSizeSelector
+    {
+        get => GetValue(ShowPageSizeSelectorProperty);
+        set => SetValue(ShowPageSizeSelectorProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> ShowQuickJumpProperty = AvaloniaProperty.Register<Pagination, bool>(
+        nameof(ShowQuickJump));
+
+    public bool ShowQuickJump
+    {
+        get => GetValue(ShowQuickJumpProperty);
+        set => SetValue(ShowQuickJumpProperty, value);
+    }
+
+    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
+    {
+        base.OnPropertyChanged(change);
+        // When page size is updated, the selected current page must be updated. 
+        if (change.Property == PageSizeProperty)
+        {
+            int oldPageSize = change.GetOldValue<int>();
+            int index = oldPageSize * CurrentPage;
+            UpdateButtons(index);
+        }
+        else if (change.Property == TotalCountProperty || change.Property == CurrentPageProperty)
+        {
+            int index = PageSize * CurrentPage;
+            UpdateButtons(index);
+        }
+    }
+
+    private void OnButtonClick(object? sender, RoutedEventArgs e)
+    {
+        if (Equals(sender, _previousButton))
+        {
+            AddCurrentPage(-1);
+        }
+        else
+        {
+            AddCurrentPage(1);
+        }
+    }
+
+    private void InitializePanelButtons()
+    {
+        if (_buttonPanel is null) return;
+        _buttonPanel.Children.Clear();
+        for (int i = 1; i <= 7; i++)
+        {
+            var button = new PaginationButton() { Page = i, IsVisible = true };
+            _buttonPanel.Children.Add(button);
+            _buttons![i - 1] = button;
+            button.Click+= OnPageButtonClick;
+        }
+    }
+
+    private void OnPageButtonClick(object sender, RoutedEventArgs args)
+    {
+        if (sender is PaginationButton pageButton)
+        {
+            if (pageButton.IsFastForward)
+            {
+                AddCurrentPage(-5);
+            }
+            else if (pageButton.IsFastBackward)
+            {
+                AddCurrentPage(5);
+            }
+            else
+            {
+                CurrentPage = pageButton.Page;
+            }
+        }
+    }
+
+    private void AddCurrentPage(int pageChange)
+    {
+        int newValue = CurrentPage + pageChange;
+        if (newValue <= 0) newValue = 1;
+        else if(newValue>=PageCount) newValue = PageCount;
+        CurrentPage = newValue;
+    }
+
+    private void UpdateButtons(int index)
+    {
+        if (_buttonPanel is null) return;
+        if (PageSize == 0) return;
+
+        int currentIndex = index;
+        
+        int pageCount = TotalCount / PageSize;
+        int residue = TotalCount % PageSize;
+        if (residue > 0)
+        {
+            pageCount++;
+        }
+        
+        PageCount = pageCount;
+        
+        int currentPage = currentIndex/ PageSize;
+        if (currentPage == 0) currentPage++;
+
+        if (pageCount <= 7)
+        {
+            for (int i = 0; i < 7; i++)
+            {
+                if (i < pageCount)
+                {
+                    _buttons[i].IsVisible = true;
+                    _buttons[i].SetStatus(i + 1, i+1 == CurrentPage, false, false);
+                }
+                else
+                {
+                    _buttons[i].IsVisible = false;
+                }
+            }
+        }
+        else
+        {
+            for (int i = 0; i < 7; i++)
+            {
+                _buttons[i].IsVisible = true;
+            }
+            int mid = currentPage;
+            if (mid < 4) mid = 4;
+            else if (mid > pageCount - 3) mid = pageCount - 3;
+            _buttons[3].Page = mid;
+            _buttons[2].Page = mid - 1;
+            _buttons[4].Page = mid + 1;
+            _buttons[0].Page = 1;
+            _buttons[6].Page = pageCount;
+            if(mid>4)
+            {
+                _buttons[1].SetStatus(0, false, true, false);
+            }
+            else
+            {
+                _buttons[1].SetStatus(mid-2, false, false, false);
+            }
+            if(mid<pageCount-3)
+            {
+                _buttons[5].SetStatus(0, false, false, true);
+            }
+            else
+            {
+                _buttons[5].SetStatus(mid+2, false, false, false);
+            }
+
+            foreach (var button in _buttons)
+            {
+                if (button.Page == currentPage)
+                {
+                    button.SetSelected(true);
+                }
+                else
+                {
+                    button.SetSelected(false);
+                }
+            }
+        }
+
+        CurrentPage = currentPage;
+        if (_previousButton != null) _previousButton.IsEnabled = CurrentPage > 1;
+        if( _nextButton!=null) _nextButton.IsEnabled = CurrentPage < PageCount;
+    }
+}

src/Ursa/Controls/Pagination/PaginationButton.cs

@@ -0,0 +1,41 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Metadata;
+using Avalonia.Controls.Primitives;
+using Avalonia.Styling;
+
+namespace Ursa.Controls;
+
+[PseudoClasses(PC_Left, PC_Right, PC_Selected)]
+public class PaginationButton: Button
+{
+    public const string PC_Left = ":left";
+    public const string PC_Right = ":right";
+    public const string PC_Selected = ":selected";
+
+    public static readonly StyledProperty<int> PageProperty = AvaloniaProperty.Register<PaginationButton, int>(
+        nameof(Page));
+
+    public int Page
+    {
+        get => GetValue(PageProperty);
+        set => SetValue(PageProperty, value);
+    }
+    internal bool IsFastForward { get; private set; }
+    internal bool IsFastBackward { get; private set; }
+    
+    internal void SetStatus(int page, bool isSelected, bool isLeft, bool isRight)
+    {
+        PseudoClasses.Set(PC_Selected, isSelected);
+        PseudoClasses.Set(PC_Left, isLeft);
+        PseudoClasses.Set(PC_Right, isRight);
+        IsFastForward = isLeft;
+        IsFastBackward = isRight;
+        Page = page;
+    }
+
+    internal void SetSelected(bool isSelected)
+    {
+        PseudoClasses.Set(PC_Selected, isSelected);
+    }
+}

src/Ursa/Ursa.csproj

@@ -8,7 +8,7 @@
     </PropertyGroup>
 
     <ItemGroup>
-      <PackageReference Include="Avalonia" Version="11.0.0-preview6" />
+      <PackageReference Include="Avalonia" Version="11.0.0-preview7" />
     </ItemGroup>
 
     <ItemGroup>