From fa8b2d1f2170dc778fe5ac3cfe5974d3c264214b Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Tue, 19 Nov 2024 14:49:56 +0800
Subject: [PATCH] feat: enhance Carousel.

---
 .../Pages/CarouselDemo.axaml                  |  19 +-
 src/Semi.Avalonia/Controls/Carousel.axaml     | 199 +++++++++++-------
 2 files changed, 126 insertions(+), 92 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
index 6b419c0..ca93d4d 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
@@ -8,7 +8,7 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <UserControl.Styles>
-        <Style Selector="Border">
+        <Style Selector="Carousel">
             <Setter Property="Height" Value="200" />
         </Style>
         <Style Selector="TextBlock">
@@ -19,9 +19,6 @@
     </UserControl.Styles>
     <StackPanel Spacing="20">
         <Carousel Theme="{DynamicResource FullCarousel}">
-            <Carousel.PageTransition>
-                <PageSlide Orientation="Horizontal" Duration="0.25" />
-            </Carousel.PageTransition>
             <Border Background="#EAF5FF">
                 <TextBlock Text="Text 1" />
             </Border>
@@ -35,10 +32,8 @@
                 <TextBlock Text="Text 4" />
             </Border>
         </Carousel>
-        <Carousel Classes="Line" Theme="{DynamicResource FullCarousel}">
-            <Carousel.PageTransition>
-                <PageSlide Orientation="Horizontal" Duration="0.25" />
-            </Carousel.PageTransition>
+        <Carousel Theme="{DynamicResource FullCarousel}"
+                  Classes="Line">
             <Border Background="#EAF5FF">
                 <TextBlock Text="Text 1" />
             </Border>
@@ -52,10 +47,8 @@
                 <TextBlock Text="Text 4" />
             </Border>
         </Carousel>
-        <Carousel Classes="Columnar Left" Theme="{DynamicResource FullCarousel}">
-            <Carousel.PageTransition>
-                <PageSlide Orientation="Horizontal" Duration="0.25" />
-            </Carousel.PageTransition>
+        <Carousel Theme="{DynamicResource FullCarousel}"
+                  Classes="Columnar Left">
             <Border Background="#EAF5FF">
                 <TextBlock Text="Text 1" />
             </Border>
@@ -70,4 +63,4 @@
             </Border>
         </Carousel>
     </StackPanel>
-</UserControl>
+</UserControl>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/Carousel.axaml b/src/Semi.Avalonia/Controls/Carousel.axaml
index 86c58c8..fb41129 100644
--- a/src/Semi.Avalonia/Controls/Carousel.axaml
+++ b/src/Semi.Avalonia/Controls/Carousel.axaml
@@ -4,6 +4,64 @@
     xmlns:converters="clr-namespace:Semi.Avalonia.Converters"
     x:CompileBindings="True">
     <converters:ItemToObjectConverter x:Key="ItemsConverter" />
+    <Design.PreviewWith>
+        <StackPanel Spacing="20" Width="800" Height="800">
+            <StackPanel.Styles>
+                <Style Selector="Carousel">
+                    <Setter Property="Height" Value="200" />
+                </Style>
+                <Style Selector="TextBlock">
+                    <Setter Property="HorizontalAlignment" Value="Center" />
+                    <Setter Property="VerticalAlignment" Value="Center" />
+                    <Setter Property="Foreground" Value="#1C1F23" />
+                </Style>
+            </StackPanel.Styles>
+            <Carousel Theme="{DynamicResource FullCarousel}">
+                <Border Background="#EAF5FF">
+                    <TextBlock Text="Text 1" />
+                </Border>
+                <Border Background="#F9F9F9">
+                    <TextBlock Text="Text 2" />
+                </Border>
+                <Border Background="#FFF8EA">
+                    <TextBlock Text="Text 3" />
+                </Border>
+                <Border Background="#FEF2ED">
+                    <TextBlock Text="Text 4" />
+                </Border>
+            </Carousel>
+            <Carousel Theme="{DynamicResource FullCarousel}"
+                      Classes="Line">
+                <Border Background="#EAF5FF">
+                    <TextBlock Text="Text 1" />
+                </Border>
+                <Border Background="#F9F9F9">
+                    <TextBlock Text="Text 2" />
+                </Border>
+                <Border Background="#FFF8EA">
+                    <TextBlock Text="Text 3" />
+                </Border>
+                <Border Background="#FEF2ED">
+                    <TextBlock Text="Text 4" />
+                </Border>
+            </Carousel>
+            <Carousel Theme="{DynamicResource FullCarousel}"
+                      Classes="Columnar Left">
+                <Border Background="#EAF5FF">
+                    <TextBlock Text="Text 1" />
+                </Border>
+                <Border Background="#F9F9F9">
+                    <TextBlock Text="Text 2" />
+                </Border>
+                <Border Background="#FFF8EA">
+                    <TextBlock Text="Text 3" />
+                </Border>
+                <Border Background="#FEF2ED">
+                    <TextBlock Text="Text 4" />
+                </Border>
+            </Carousel>
+        </StackPanel>
+    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type Carousel}" TargetType="Carousel">
         <Setter Property="Template">
             <ControlTemplate>
@@ -25,22 +83,16 @@
     </ControlTheme>
 
     <ControlTheme x:Key="CarouselIndicatorDotListBoxItem" TargetType="ListBoxItem">
-        <!--  Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected  -->
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="Margin" Value="4 0"/>
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
-                <Panel>
-                    <Border Padding="4" Background="Transparent">
-                        <Ellipse
-                            Name="Container"
-                            Width="{DynamicResource CarouselIndicatorWidth}"
-                            Height="{DynamicResource CarouselIndicatorHeight}"
-                            HorizontalAlignment="Center"
-                            VerticalAlignment="Center"
-                            Fill="{TemplateBinding Foreground}" />
-                    </Border>
-                </Panel>
+                <Ellipse
+                    Name="Container"
+                    Width="{DynamicResource CarouselIndicatorWidth}"
+                    Height="{DynamicResource CarouselIndicatorHeight}"
+                    Fill="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover /template/ Ellipse#Container">
@@ -55,56 +107,48 @@
     </ControlTheme>
 
     <ControlTheme x:Key="CarouselIndicatorLineListBoxItem" TargetType="ListBoxItem">
-        <!--  Use fit in different color themes, Use Foreground to normal, Background to hover, BorderBrush to Selected  -->
+        <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="Margin" Value="2 0"/>
         <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Background" Value="{DynamicResource CarouselIndicatorForeground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
-                <Panel Background="Transparent">
-                    <Border Padding="2,0" Background="Transparent">
-                        <Border
-                            Name="Container"
-                            Width="{DynamicResource CarouselIndicatorLineWidth}"
-                            Height="{DynamicResource CarouselIndicatorLineHeight}"
-                            Background="{TemplateBinding Background}" />
-                    </Border>
-                </Panel>
+                <Rectangle
+                    Name="Container"
+                    Height="{DynamicResource CarouselIndicatorLineHeight}"
+                    Fill="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover /template/ Border#Container">
-            <Setter Property="Background" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
+        <Style Selector="^:pointerover /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
         </Style>
-        <Style Selector="^:pressed /template/ Border#Container">
-            <Setter Property="Background" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
+        <Style Selector="^:pressed /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
         </Style>
-        <Style Selector="^:selected /template/ Border#Container">
-            <Setter Property="Background" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
+        <Style Selector="^:selected /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
         </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem" TargetType="ListBoxItem">
+        <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="Width" Value="{DynamicResource CarouselIndicatorColumnarWidth}"/>
+        <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}"/>
+        <Setter Property="Margin" Value="2 0"/>
         <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Background" Value="{DynamicResource CarouselIndicatorForeground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
-                <Panel Background="Transparent">
-                    <Border Padding="2,0" Background="Transparent">
-                        <Border Width="{DynamicResource CarouselIndicatorColumnarWidth}" Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
-                            <Rectangle
-                                Name="Container"
-                                Width="{DynamicResource CarouselIndicatorColumnarWidth}"
-                                Height="{DynamicResource CarouselIndicatorColumnarHeight}"
-                                VerticalAlignment="Bottom"
-                                Fill="{TemplateBinding Background}">
-                                <Rectangle.Transitions>
-                                    <Transitions>
-                                        <DoubleTransition Property="Height" Duration="0:0:0.2" />
-                                    </Transitions>
-                                </Rectangle.Transitions>
-                            </Rectangle>
-                        </Border>
-                    </Border>
-                </Panel>
+                <Rectangle
+                    Name="Container"
+                    Width="{DynamicResource CarouselIndicatorColumnarWidth}"
+                    Height="{DynamicResource CarouselIndicatorColumnarHeight}"
+                    VerticalAlignment="Bottom"
+                    Fill="{TemplateBinding Foreground}">
+                    <Rectangle.Transitions>
+                        <Transitions>
+                            <DoubleTransition Property="Height" Duration="0:0:0.2" />
+                        </Transitions>
+                    </Rectangle.Transitions>
+                </Rectangle>
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover /template/ Rectangle#Container">
@@ -120,29 +164,29 @@
     </ControlTheme>
 
     <ControlTheme x:Key="CarouselButton" TargetType="Button">
-        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="Width" Value="32" />
+        <Setter Property="Height" Value="32" />
         <Setter Property="Foreground" Value="{DynamicResource CarouselButtonForeground}" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
-                <Grid Background="Transparent">
-                    <PathIcon
-                        Theme="{DynamicResource InnerPathIcon}"
-                        Width="32"
-                        Height="32"
-                        Data="{DynamicResource CarouselButtonGlyph}"
-                        Foreground="{TemplateBinding Foreground}" />
-                </Grid>
+                <PathIcon
+                    Theme="{DynamicResource InnerPathIcon}"
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Data="{DynamicResource CarouselButtonGlyph}"
+                    Foreground="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover /template/ PathIcon">
             <Setter Property="Foreground" Value="{DynamicResource CarouselButtonPointeroverForeground}" />
         </Style>
-        <Style Selector="^:pointerover /template/ PathIcon">
-            <Setter Property="Foreground" Value="{DynamicResource CarouselButtonPressedForeground}" />
-        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="FullCarousel" TargetType="Carousel">
+        <Setter Property="PageTransition">
+            <PageSlide Orientation="Horizontal" Duration="0.3" />
+        </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="Carousel">
                 <Grid ColumnDefinitions="Auto, *, Auto" RowDefinitions="*, Auto">
@@ -165,16 +209,14 @@
                     <ListBox
                         Name="PART_ItemsPresenter2"
                         Grid.Row="1"
-                        Grid.Column="1"
-                        MaxHeight="30"
-                        Margin="0,8"
+                        Grid.Column="0"
+                        Grid.ColumnSpan="3"
+                        Margin="32"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}"
-                        ItemsSource="{TemplateBinding ItemCount,
-                                                      Mode=OneWay,
-                                                      Converter={StaticResource ItemsConverter}}"
-                        SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                        ItemsSource="{TemplateBinding ItemCount, Mode=OneWay, Converter={StaticResource ItemsConverter}}"
+                        SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
                         <ListBox.ItemsPanel>
                             <ItemsPanelTemplate>
                                 <StackPanel Orientation="Horizontal" />
@@ -185,30 +227,29 @@
                         Grid.Row="0"
                         Grid.RowSpan="2"
                         Grid.Column="0"
+                        Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
-                        VerticalAlignment="Center"
-                        Background="{DynamicResource CarouselButtonPointeroverForeground}"
-                        BorderBrush="{DynamicResource CarouselButtonPressedForeground}"
-                        Command="{Binding $parent[Carousel].Previous}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
-                        Theme="{DynamicResource CarouselButton}" />
+                        Command="{Binding $parent[Carousel].Previous}" />
                     <Button
                         Grid.Row="0"
                         Grid.RowSpan="2"
                         Grid.Column="2"
+                        Theme="{DynamicResource CarouselButton}"
                         Margin="{DynamicResource CarouselButtonMargin}"
-                        VerticalAlignment="Center"
-                        Background="{DynamicResource CarouselButtonPointeroverForeground}"
-                        BorderBrush="{DynamicResource CarouselButtonPressedForeground}"
-                        Command="{Binding $parent[Carousel].Next}"
                         Foreground="{DynamicResource CarouselButtonForeground}"
-                        RenderTransform="rotate(180deg)"
-                        Theme="{DynamicResource CarouselButton}" />
+                        Command="{Binding $parent[Carousel].Next}"
+                        RenderTransform="rotate(180deg)" />
                 </Grid>
             </ControlTemplate>
         </Setter>
         <Style Selector="^.Line /template/ ListBox#PART_ItemsPresenter2">
             <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorLineListBoxItem}" />
+            <Setter Property="ItemsPanel">
+                <ItemsPanelTemplate>
+                    <UniformGrid Columns="{TemplateBinding ItemCount}" Rows="1" Width="240" />
+                </ItemsPanelTemplate>
+            </Setter>
         </Style>
         <Style Selector="^.Columnar /template/ ListBox#PART_ItemsPresenter2">
             <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorColumnarListBoxItem}" />