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>

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>

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>

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>

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

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>

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

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>

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

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>

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