From b3b74590880fb2fa38d61e6736308978f0df7f55 Mon Sep 17 00:00:00 2001
From: Dong Bin <14807942+rabbitism@users.noreply.github.com>
Date: Sat, 21 Mar 2026 17:58:35 +0800
Subject: [PATCH] Pr3/carousel page (#772)

* feat: add CarouselPage and PipsPager.

* feat: add PipsPager control and integrate into index

* feat: add PipsPagerDemo and integrate into MainView

---------

Co-authored-by: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
---
 .../Pages/CarouselPageDemo.axaml              |  69 ++++++++++
 .../Pages/CarouselPageDemo.axaml.cs           |  34 +++++
 .../Pages/PipsPagerDemo.axaml                 |  99 +++++++++++++
 .../Pages/PipsPagerDemo.axaml.cs              |  12 ++
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  |   6 +
 src/Semi.Avalonia/Controls/Carousel.axaml     |   7 +-
 src/Semi.Avalonia/Controls/CarouselPage.axaml |  19 +++
 src/Semi.Avalonia/Controls/PipsPager.axaml    | 130 ++++++++++++++++++
 src/Semi.Avalonia/Controls/_index.axaml       |   2 +
 src/Semi.Avalonia/Themes/Dark/PipsPager.axaml |   9 ++
 src/Semi.Avalonia/Themes/Dark/_index.axaml    |   1 +
 .../Themes/HighContrast/PipsPager.axaml       |   4 +
 .../Themes/HighContrast/_index.axaml          |   1 +
 .../Themes/Light/PipsPager.axaml              |   9 ++
 src/Semi.Avalonia/Themes/Light/_index.axaml   |   1 +
 15 files changed, 400 insertions(+), 3 deletions(-)
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/CarouselPageDemo.axaml
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/CarouselPageDemo.axaml.cs
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/PipsPagerDemo.axaml
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/PipsPagerDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/CarouselPage.axaml
 create mode 100644 src/Semi.Avalonia/Controls/PipsPager.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Dark/PipsPager.axaml
 create mode 100644 src/Semi.Avalonia/Themes/HighContrast/PipsPager.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/PipsPager.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/CarouselPageDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CarouselPageDemo.axaml
new file mode 100644
index 0000000..d736ef0
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/CarouselPageDemo.axaml
@@ -0,0 +1,69 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             x:Class="Semi.Avalonia.Demo.Pages.CarouselPageDemo">
+    <DockPanel>
+        <ScrollViewer DockPanel.Dock="Right" Width="220">
+            <StackPanel Margin="12" Spacing="8">
+                <TextBlock Text="Configuration" FontWeight="SemiBold" FontSize="16"
+                           Foreground="{DynamicResource SystemControlHighlightAccentBrush}" />
+
+                <TextBlock Text="Navigation" FontWeight="SemiBold" FontSize="13" />
+                <StackPanel Spacing="6">
+                    <Button Content="Previous" Click="OnPrevious" HorizontalAlignment="Stretch" />
+                    <Button Content="Next" Click="OnNext" HorizontalAlignment="Stretch" />
+                </StackPanel>
+
+                <Separator />
+
+                <TextBlock Text="Status" FontWeight="SemiBold" FontSize="13" />
+                <TextBlock Name="StatusText" Text="Page 1 of 3" Opacity="0.7" TextWrapping="Wrap" />
+            </StackPanel>
+        </ScrollViewer>
+
+        <Border DockPanel.Dock="Right" Width="1"
+                Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" />
+
+        <Border Margin="12"
+                BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
+                BorderThickness="1" CornerRadius="6" ClipToBounds="True">
+            <Panel>
+                <CarouselPage Name="DemoCarousel"
+                              SelectionChanged="OnSelectionChanged">
+                    <ContentPage Header="Welcome">
+                        <StackPanel Margin="24" Spacing="12"
+                                    HorizontalAlignment="Center" VerticalAlignment="Center">
+                            <TextBlock Text="Welcome" FontSize="28" FontWeight="Bold"
+                                       HorizontalAlignment="Center" />
+                            <TextBlock Text="Swipe left or use the buttons to navigate."
+                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
+                        </StackPanel>
+                    </ContentPage>
+                    <ContentPage Header="Explore">
+                        <StackPanel Margin="24" Spacing="12"
+                                    HorizontalAlignment="Center" VerticalAlignment="Center">
+                            <TextBlock Text="Explore" FontSize="28" FontWeight="Bold"
+                                       HorizontalAlignment="Center" />
+                            <TextBlock Text="CarouselPage supports scroll-based and transition-based navigation modes."
+                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
+                        </StackPanel>
+                    </ContentPage>
+                    <ContentPage Header="Get Started">
+                        <StackPanel Margin="24" Spacing="12"
+                                    HorizontalAlignment="Center" VerticalAlignment="Center">
+                            <TextBlock Text="Get Started" FontSize="28" FontWeight="Bold"
+                                       HorizontalAlignment="Center" />
+                            <TextBlock Text="Use SelectedIndex to jump to any page, or assign a PageTransition for animated switching."
+                                       TextWrapping="Wrap" Opacity="0.7" TextAlignment="Center" MaxWidth="280" />
+                        </StackPanel>
+                    </ContentPage>
+                </CarouselPage>
+                <PipsPager HorizontalAlignment="Center"
+                           VerticalAlignment="Bottom" Margin="0,0,0,20"
+                           NumberOfPages="3"
+                           SelectedPageIndex="{Binding #DemoCarousel.SelectedIndex}" />
+            </Panel>
+        </Border>
+
+
+    </DockPanel>
+</UserControl>
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/CarouselPageDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/CarouselPageDemo.axaml.cs
new file mode 100644
index 0000000..672f242
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/CarouselPageDemo.axaml.cs
@@ -0,0 +1,34 @@
+using System.Collections;
+using Avalonia.Controls;
+using Avalonia.Interactivity;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class CarouselPageDemo : UserControl
+{
+    public CarouselPageDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void OnPrevious(object? sender, RoutedEventArgs e)
+    {
+        if (DemoCarousel.SelectedIndex > 0)
+            DemoCarousel.SelectedIndex--;
+    }
+
+    private void OnNext(object? sender, RoutedEventArgs e)
+    {
+        var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0;
+        if (DemoCarousel.SelectedIndex < pageCount - 1)
+            DemoCarousel.SelectedIndex++;
+    }
+
+    private void OnSelectionChanged(object? sender, PageSelectionChangedEventArgs e)
+    {
+        if (StatusText == null)
+            return;
+        var pageCount = (DemoCarousel.Pages as IList)?.Count ?? 0;
+        StatusText.Text = $"Page {DemoCarousel.SelectedIndex + 1} of {pageCount}";
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/PipsPagerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/PipsPagerDemo.axaml
new file mode 100644
index 0000000..1e74885
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/PipsPagerDemo.axaml
@@ -0,0 +1,99 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.PipsPagerDemo"
+    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"
+    d:DesignHeight="600"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="16" Margin="0,0,0,20">
+
+            <!-- Horizontal PipsPager -->
+            <TextBlock Classes="H6" Text="Horizontal" />
+            <PipsPager
+                NumberOfPages="8"
+                Orientation="Horizontal" />
+
+            <!-- Vertical PipsPager -->
+            <TextBlock Classes="H6" Text="Vertical" />
+            <PipsPager
+                NumberOfPages="8"
+                Orientation="Vertical" />
+
+            <!-- Linked with Carousel -->
+            <TextBlock Classes="H6" Text="Linked with Carousel" />
+            <Panel>
+                <Carousel
+                    Name="DemoCarousel"
+                    Height="160">
+                    <Border Background="#EAF5FF">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 1" />
+                    </Border>
+                    <Border Background="#F9F9F9">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 2" />
+                    </Border>
+                    <Border Background="#FFF8EA">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 3" />
+                    </Border>
+                    <Border Background="#FEF2ED">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 4" />
+                    </Border>
+                    <Border Background="#F0F5FF">
+                        <TextBlock
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Foreground="#1C1F23"
+                            Text="Page 5" />
+                    </Border>
+                </Carousel>
+                <ThemeVariantScope RequestedThemeVariant="Light">
+                    <PipsPager
+                        Name="LinkedPager"
+                        NumberOfPages="5"
+                        Orientation="Horizontal"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Bottom"
+                        Margin="0,0,0,8"
+                        SelectedPageIndex="{Binding #DemoCarousel.SelectedIndex}" />
+                </ThemeVariantScope>
+            </Panel>
+
+            <!-- Various page counts -->
+            <TextBlock Classes="H6" Text="Various Page Counts" />
+            <StackPanel Spacing="12">
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock VerticalAlignment="Center" Width="80" Text="3 pages" />
+                    <PipsPager NumberOfPages="3" Orientation="Horizontal" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock VerticalAlignment="Center" Width="80" Text="5 pages" />
+                    <PipsPager NumberOfPages="5" Orientation="Horizontal" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal" Spacing="8">
+                    <TextBlock VerticalAlignment="Center" Width="80" Text="10 pages" />
+                    <PipsPager NumberOfPages="10" Orientation="Horizontal" />
+                </StackPanel>
+            </StackPanel>
+
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>
+
diff --git a/demo/Semi.Avalonia.Demo/Pages/PipsPagerDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/PipsPagerDemo.axaml.cs
new file mode 100644
index 0000000..1247fc4
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/PipsPagerDemo.axaml.cs
@@ -0,0 +1,12 @@
+using Avalonia.Controls;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class PipsPagerDemo : UserControl
+{
+    public PipsPagerDemo()
+    {
+        InitializeComponent();
+    }
+}
+
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index 0a6d806..d8d48d0 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -200,6 +200,9 @@
             <TabItem Header="ContentPage">
                 <pages:ContentPageDemo />
             </TabItem>
+            <TabItem Header="CarouselPage">
+                <pages:CarouselPageDemo />
+            </TabItem>
             <TabItem Header="DrawerPage">
                 <pages:DrawerPageDemo />
             </TabItem>
@@ -222,6 +225,9 @@
             <TabItem Header="Carousel">
                 <pages:CarouselDemo />
             </TabItem>
+            <TabItem Header="PipsPager">
+                <pages:PipsPagerDemo />
+            </TabItem>
             <TabItem Header="Expander">
                 <pages:ExpanderDemo />
             </TabItem>
diff --git a/src/Semi.Avalonia/Controls/Carousel.axaml b/src/Semi.Avalonia/Controls/Carousel.axaml
index d07459a..8bf031b 100644
--- a/src/Semi.Avalonia/Controls/Carousel.axaml
+++ b/src/Semi.Avalonia/Controls/Carousel.axaml
@@ -156,7 +156,7 @@
                     Theme="{DynamicResource InnerPathIcon}"
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Data="{DynamicResource CarouselButtonGlyph}"
+                    Data="{TemplateBinding Content}"
                     Foreground="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
@@ -213,6 +213,7 @@
                         Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
+                        Content="{StaticResource SemiIconChevronLeft}"
                         IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
                         Command="{Binding $parent[Carousel].Previous}" />
                     <Button
@@ -222,9 +223,9 @@
                         Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
+                        Content="{StaticResource SemiIconChevronRight}"
                         IsVisible="{TemplateBinding ItemCount, Converter={x:Static semi:ItemConverter.ItemVisibleConverter}}"
-                        Command="{Binding $parent[Carousel].Next}"
-                        RenderTransform="rotate(180deg)" />
+                        Command="{Binding $parent[Carousel].Next}" />
                 </Grid>
             </ControlTemplate>
         </Setter>
diff --git a/src/Semi.Avalonia/Controls/CarouselPage.axaml b/src/Semi.Avalonia/Controls/CarouselPage.axaml
new file mode 100644
index 0000000..1e6da26
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/CarouselPage.axaml
@@ -0,0 +1,19 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type CarouselPage}" TargetType="CarouselPage">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Carousel
+                    Name="PART_Carousel"
+                    Background="{TemplateBinding Background}"
+                    ItemTemplate="{TemplateBinding PageTemplate}"
+                    PageTransition="{TemplateBinding PageTransition}"
+                    ItemsPanel="{TemplateBinding ItemsPanel}"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/PipsPager.axaml b/src/Semi.Avalonia/Controls/PipsPager.axaml
new file mode 100644
index 0000000..54d0d38
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/PipsPager.axaml
@@ -0,0 +1,130 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    
+    <Design.PreviewWith>
+        <StackPanel Margin="20" >
+            <PipsPager NumberOfPages="10" />
+        </StackPanel>
+    </Design.PreviewWith>
+    
+    <ControlTheme x:Key="PipsPagerButton" TargetType="Button">
+        <Setter Property="Width" Value="24" />
+        <Setter Property="Height" Value="24" />
+        <Setter Property="Foreground" Value="{DynamicResource PipsPagerButtonForeground}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="Button">
+                <PathIcon
+                    Theme="{DynamicResource InnerPathIcon}"
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Data="{TemplateBinding Content}"
+                    Foreground="{TemplateBinding Foreground}" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ PathIcon">
+            <Setter Property="Foreground" Value="{DynamicResource PipsPagerButtonPointeroverForeground}" />
+        </Style>
+    </ControlTheme>
+    
+    <ControlTheme x:Key="PipsPagerIndicatorDotListBoxItem" TargetType="ListBoxItem">
+        <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorForeground}" />
+        <Setter Property="Margin" Value="4" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Ellipse
+                    Name="Container"
+                    Width="{DynamicResource CarouselIndicatorDotWidth}"
+                    Height="{DynamicResource CarouselIndicatorDotHeight}"
+                    Fill="{TemplateBinding Foreground}" />
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover">
+            <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorPointeroverForeground}" />
+        </Style>
+        <Style Selector="^:pressed">
+            <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorPressedForeground}" />
+        </Style>
+        <Style Selector="^:selected">
+            <Setter Property="Foreground" Value="{DynamicResource PipsPagerIndicatorSelectedForeground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type PipsPager}" TargetType="PipsPager">
+        <Setter Property="IsTabStop" Value="False" />
+        <Setter Property="PreviousButtonStyle" Value="{StaticResource PipsPagerButton}" />
+        <Setter Property="NextButtonStyle" Value="{StaticResource PipsPagerButton}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <StackPanel
+                    Name="PART_RootPanel"
+                    Orientation="{TemplateBinding Orientation}"
+                    Background="{TemplateBinding Background}"
+                    ClipToBounds="False">
+                    <Button
+                        Name="PART_PreviousButton"
+                        Theme="{TemplateBinding PreviousButtonStyle}"
+                        IsVisible="{TemplateBinding IsPreviousButtonVisible}"
+                        Foreground="{DynamicResource PipsPagerButtonForeground}"
+                        Content="{StaticResource SemiIconSmallTriangleLeft}" />
+
+                    <ListBox
+                        Name="PART_PipsPagerList"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        ScrollViewer.HorizontalScrollBarVisibility="Hidden"
+                        ScrollViewer.VerticalScrollBarVisibility="Hidden"
+                        ItemsSource="{Binding TemplateSettings.Pips, RelativeSource={RelativeSource TemplatedParent}}"
+                        SelectedIndex="{TemplateBinding SelectedPageIndex, Mode=TwoWay}"
+                        AutoScrollToSelectedItem="False"
+                        ItemContainerTheme="{StaticResource PipsPagerIndicatorDotListBoxItem}">
+                        <ListBox.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <StackPanel Orientation="{Binding $parent[PipsPager].Orientation}" />
+                            </ItemsPanelTemplate>
+                        </ListBox.ItemsPanel>
+                    </ListBox>
+
+                    <Button
+                        Name="PART_NextButton"
+                        Theme="{TemplateBinding NextButtonStyle}"
+                        Foreground="{DynamicResource PipsPagerButtonForeground}"
+                        Content="{StaticResource SemiIconSmallTriangleRight}"
+                        IsVisible="{TemplateBinding IsNextButtonVisible}" />
+                </StackPanel>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:horizontal /template/ StackPanel#PART_RootPanel">
+            <Setter Property="Orientation" Value="Horizontal" />
+        </Style>
+
+        <Style Selector="^:vertical">
+
+            <Style Selector="^ /template/ StackPanel#PART_RootPanel">
+                <Setter Property="Orientation" Value="Vertical" />
+                <Setter Property="HorizontalAlignment" Value="Center" />
+            </Style>
+
+            <Style Selector="^ /template/ Button#PART_PreviousButton">
+                <Setter Property="Content" Value="{DynamicResource SemiIconSmallTriangleTop}" />
+            </Style>
+            <Style Selector="^ /template/ Button#PART_NextButton">
+                <Setter Property="Content" Value="{DynamicResource SemiIconSmallTriangleDown}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:first-page /template/ Button#PART_PreviousButton">
+            <Setter Property="Opacity" Value="0" />
+            <Setter Property="IsHitTestVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^:last-page /template/ Button#PART_NextButton">
+            <Setter Property="Opacity" Value="0" />
+            <Setter Property="IsHitTestVisible" Value="False" />
+        </Style>
+    </ControlTheme>
+
+</ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/_index.axaml b/src/Semi.Avalonia/Controls/_index.axaml
index 7b389c8..612ab61 100644
--- a/src/Semi.Avalonia/Controls/_index.axaml
+++ b/src/Semi.Avalonia/Controls/_index.axaml
@@ -11,6 +11,7 @@
         <ResourceInclude Source="Calendar.axaml" />
         <ResourceInclude Source="CalendarDatePicker.axaml" />
         <ResourceInclude Source="Carousel.axaml" />
+        <ResourceInclude Source="CarouselPage.axaml" />
         <ResourceInclude Source="CheckBox.axaml" />
         <ResourceInclude Source="ComboBox.axaml" />
         <ResourceInclude Source="CommandBar.axaml" />
@@ -37,6 +38,7 @@
         <ResourceInclude Source="NumericUpDown.axaml" />
         <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="PathIcon.axaml" />
+        <ResourceInclude Source="PipsPager.axaml" />
         <ResourceInclude Source="Popup.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
         <ResourceInclude Source="RadioButton.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Dark/PipsPager.axaml b/src/Semi.Avalonia/Themes/Dark/PipsPager.axaml
new file mode 100644
index 0000000..7912e2c
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Dark/PipsPager.axaml
@@ -0,0 +1,9 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <SolidColorBrush x:Key="PipsPagerButtonForeground" Opacity="0.5" Color="{StaticResource SemiWhiteColor}" />
+    <SolidColorBrush x:Key="PipsPagerButtonPointeroverForeground" Color="{StaticResource SemiWhiteColor}" />
+    <SolidColorBrush x:Key="PipsPagerIndicatorForeground" Opacity="0.5" Color="{StaticResource SemiWhiteColor}" />
+    <SolidColorBrush x:Key="PipsPagerIndicatorPointeroverForeground" Opacity="0.7" Color="{StaticResource SemiWhiteColor}" />
+    <SolidColorBrush x:Key="PipsPagerIndicatorPressedForeground" Color="{StaticResource SemiWhiteColor}" />
+    <SolidColorBrush x:Key="PipsPagerIndicatorSelectedForeground" Color="{StaticResource SemiWhiteColor}" />
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Dark/_index.axaml b/src/Semi.Avalonia/Themes/Dark/_index.axaml
index c74719b..6210d7f 100644
--- a/src/Semi.Avalonia/Themes/Dark/_index.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/_index.axaml
@@ -29,6 +29,7 @@
         <ResourceInclude Source="NotificationCard.axaml" />
         <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
+        <ResourceInclude Source="PipsPager.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
         <ResourceInclude Source="RadioButton.axaml" />
         <ResourceInclude Source="RefreshContainer.axaml" />
diff --git a/src/Semi.Avalonia/Themes/HighContrast/PipsPager.axaml b/src/Semi.Avalonia/Themes/HighContrast/PipsPager.axaml
new file mode 100644
index 0000000..aad2704
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/HighContrast/PipsPager.axaml
@@ -0,0 +1,4 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!-- Add Resources Here -->
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/HighContrast/_index.axaml b/src/Semi.Avalonia/Themes/HighContrast/_index.axaml
index 04ed1ec..9211573 100644
--- a/src/Semi.Avalonia/Themes/HighContrast/_index.axaml
+++ b/src/Semi.Avalonia/Themes/HighContrast/_index.axaml
@@ -29,6 +29,7 @@
         <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="NotificationCard.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
+        <ResourceInclude Source="PipsPager.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
         <ResourceInclude Source="RadioButton.axaml" />
         <ResourceInclude Source="RefreshContainer.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/PipsPager.axaml b/src/Semi.Avalonia/Themes/Light/PipsPager.axaml
new file mode 100644
index 0000000..b395b75
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/PipsPager.axaml
@@ -0,0 +1,9 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <SolidColorBrush x:Key="PipsPagerButtonForeground" Opacity="0.5" Color="{StaticResource SemiBlackColor}" />
+    <SolidColorBrush x:Key="PipsPagerButtonPointeroverForeground" Color="{StaticResource SemiBlackColor}" />
+    <SolidColorBrush x:Key="PipsPagerIndicatorForeground" Opacity="0.5" Color="{StaticResource SemiBlackColor}" />
+    <SolidColorBrush x:Key="PipsPagerIndicatorPointeroverForeground" Opacity="0.7" Color="{StaticResource SemiBlackColor}" />
+    <SolidColorBrush x:Key="PipsPagerIndicatorPressedForeground" Color="{StaticResource SemiBlackColor}" />
+    <SolidColorBrush x:Key="PipsPagerIndicatorSelectedForeground" Color="{StaticResource SemiBlackColor}" />
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/_index.axaml b/src/Semi.Avalonia/Themes/Light/_index.axaml
index c74719b..6210d7f 100644
--- a/src/Semi.Avalonia/Themes/Light/_index.axaml
+++ b/src/Semi.Avalonia/Themes/Light/_index.axaml
@@ -29,6 +29,7 @@
         <ResourceInclude Source="NotificationCard.axaml" />
         <ResourceInclude Source="NavigationPage.axaml" />
         <ResourceInclude Source="NumericUpDown.axaml" />
+        <ResourceInclude Source="PipsPager.axaml" />
         <ResourceInclude Source="ProgressBar.axaml" />
         <ResourceInclude Source="RadioButton.axaml" />
         <ResourceInclude Source="RefreshContainer.axaml" />