From d9c39cdd057ce1cdc96ae219c3afbc6afb7e3034 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Fri, 26 Jan 2024 17:54:40 +0800
Subject: [PATCH 1/3] feat: classes Line, Left, Center, Right.

---
 src/Semi.Avalonia/Controls/Carousel.axaml     | 27 ++++++++++---------
 .../Themes/Shared/Carousel.axaml              |  8 ++++--
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/Carousel.axaml b/src/Semi.Avalonia/Controls/Carousel.axaml
index d69b82f..8ec2ae5 100644
--- a/src/Semi.Avalonia/Controls/Carousel.axaml
+++ b/src/Semi.Avalonia/Controls/Carousel.axaml
@@ -34,8 +34,8 @@
                     <Border Padding="4" Background="Transparent">
                         <Ellipse
                             Name="Container"
-                            Width="{DynamicResource CarouselIndicatorSelectedHeight}"
-                            Height="{DynamicResource CarouselIndicatorSelectedHeight}"
+                            Width="{DynamicResource CarouselIndicatorWidth}"
+                            Height="{DynamicResource CarouselIndicatorHeight}"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             Fill="{TemplateBinding Foreground}" />
@@ -61,18 +61,12 @@
         <Setter Property="ListBoxItem.Template">
             <ControlTemplate TargetType="ListBoxItem">
                 <Panel Background="Transparent">
-                    <Border Padding="4,0" Background="Transparent">
+                    <Border Padding="2,0" Background="Transparent">
                         <Border
                             Name="Container"
-                            Width="{DynamicResource CarouselIndicatorSelectedHeight}"
-                            Height="{DynamicResource CarouselIndicatorSelectedHeight}"
-                            Background="{TemplateBinding Background}"
-                            CornerRadius="99">
-                            <Border.Transitions>
-                                <Transitions>
-                                    <DoubleTransition Property="Width" Duration="0:0:0.2" />
-                                </Transitions>
-                            </Border.Transitions>
+                            Width="{DynamicResource CarouselIndicatorLineWidth}"
+                            Height="{DynamicResource CarouselIndicatorLineHeight}"
+                            Background="{TemplateBinding Background}">
                         </Border>
                     </Border>
                 </Panel>
@@ -86,7 +80,6 @@
         </Style>
         <Style Selector="^:selected /template/ Border#Container">
             <Setter Property="Background" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
-            <Setter Property="Width" Value="{DynamicResource CarouselIndicatorLineSelectedWidth}" />
         </Style>
     </ControlTheme>
 
@@ -179,6 +172,14 @@
         </Setter>
         <Style Selector="^.Line /template/ ListBox#PART_ItemsPresenter2">
             <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorLineListBoxItem}" />
+        <Style Selector="^.Left /template/ ListBox#PART_ItemsPresenter2">
+            <Setter Property="HorizontalAlignment" Value="Left" />
+        </Style>
+        <Style Selector="^.Center /template/ ListBox#PART_ItemsPresenter2">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+        </Style>
+        <Style Selector="^.Right /template/ ListBox#PART_ItemsPresenter2">
+            <Setter Property="HorizontalAlignment" Value="Right" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Shared/Carousel.axaml b/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
index c225086..845a98f 100644
--- a/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
@@ -1,7 +1,11 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <PathGeometry x:Key="CarouselButtonGlyph">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>
 
-    <x:Double x:Key="CarouselIndicatorLineSelectedWidth">48</x:Double>
-    <x:Double x:Key="CarouselIndicatorSelectedHeight">8</x:Double>
+    <x:Double x:Key="CarouselIndicatorWidth">8</x:Double>
+    <x:Double x:Key="CarouselIndicatorHeight">8</x:Double>
+
+    <x:Double x:Key="CarouselIndicatorLineWidth">78</x:Double>
+    <x:Double x:Key="CarouselIndicatorLineHeight">4</x:Double>
+
     <Thickness x:Key="CarouselButtonMargin">8</Thickness>
 </ResourceDictionary>
\ No newline at end of file

From 0bf7168cbaf02c22ccbd6d4ddff6a2a55068181f Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Fri, 26 Jan 2024 18:59:40 +0800
Subject: [PATCH 2/3] feat: Columnar.

---
 .../Pages/CarouselDemo.axaml                  | 17 ++++++++
 src/Semi.Avalonia/Controls/Carousel.axaml     | 39 ++++++++++++++++++-
 .../Themes/Shared/Carousel.axaml              |  6 +++
 3 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
index 764ff66..6b419c0 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
@@ -52,5 +52,22 @@
                 <TextBlock Text="Text 4" />
             </Border>
         </Carousel>
+        <Carousel Classes="Columnar Left" Theme="{DynamicResource FullCarousel}">
+            <Carousel.PageTransition>
+                <PageSlide Orientation="Horizontal" Duration="0.25" />
+            </Carousel.PageTransition>
+            <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>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/Carousel.axaml b/src/Semi.Avalonia/Controls/Carousel.axaml
index 8ec2ae5..785808a 100644
--- a/src/Semi.Avalonia/Controls/Carousel.axaml
+++ b/src/Semi.Avalonia/Controls/Carousel.axaml
@@ -83,6 +83,39 @@
         </Style>
     </ControlTheme>
 
+    <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem" TargetType="ListBoxItem">
+        <Setter Property="ListBoxItem.Cursor" Value="Hand" />
+        <Setter Property="ListBoxItem.Background" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="ListBoxItem.Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Panel Background="Transparent">
+                    <Border Padding="2,0" Background="Transparent">
+                        <Canvas Width="{DynamicResource CarouselIndicatorColumnarWidth}"
+                                Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
+                            <Rectangle
+                                Name="Container"
+                                Width="{DynamicResource CarouselIndicatorColumnarWidth}"
+                                Height="{DynamicResource CarouselIndicatorColumnarHeight}"
+                                Fill="{TemplateBinding Background}"
+                                Canvas.Top="{DynamicResource CarouselIndicatorColumnarCanvasHeight}"/>
+                        </Canvas>
+                    </Border>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
+        </Style>
+        <Style Selector="^:pressed /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
+        </Style>
+        <Style Selector="^:selected /template/ Rectangle#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
+            <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}" />
+            <Setter Property="Canvas.Top" Value="{DynamicResource CarouselIndicatorColumnarSelectedCanvasHeight}" />
+        </Style>
+    </ControlTheme>
+
     <ControlTheme x:Key="CarouselButton" TargetType="Button">
         <Setter Property="Button.Cursor" Value="Hand" />
         <Setter Property="Button.Foreground" Value="{DynamicResource CarouselButtonForeground}" />
@@ -129,7 +162,7 @@
                         Name="PART_ItemsPresenter2"
                         Grid.Row="1"
                         Grid.Column="1"
-                        MaxHeight="20"
+                        MaxHeight="30"
                         Margin="0,8"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
@@ -172,6 +205,10 @@
         </Setter>
         <Style Selector="^.Line /template/ ListBox#PART_ItemsPresenter2">
             <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorLineListBoxItem}" />
+        </Style>
+        <Style Selector="^.Columnar /template/ ListBox#PART_ItemsPresenter2">
+            <Setter Property="ItemContainerTheme" Value="{DynamicResource CarouselIndicatorColumnarListBoxItem}" />
+        </Style>
         <Style Selector="^.Left /template/ ListBox#PART_ItemsPresenter2">
             <Setter Property="HorizontalAlignment" Value="Left" />
         </Style>
diff --git a/src/Semi.Avalonia/Themes/Shared/Carousel.axaml b/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
index 845a98f..3633801 100644
--- a/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
@@ -7,5 +7,11 @@
     <x:Double x:Key="CarouselIndicatorLineWidth">78</x:Double>
     <x:Double x:Key="CarouselIndicatorLineHeight">4</x:Double>
 
+    <x:Double x:Key="CarouselIndicatorColumnarWidth">4</x:Double>
+    <x:Double x:Key="CarouselIndicatorColumnarHeight">12</x:Double>
+    <x:Double x:Key="CarouselIndicatorColumnarSelectedHeight">20</x:Double>
+    <x:Double x:Key="CarouselIndicatorColumnarCanvasHeight">8</x:Double>
+    <x:Double x:Key="CarouselIndicatorColumnarSelectedCanvasHeight">0</x:Double>
+
     <Thickness x:Key="CarouselButtonMargin">8</Thickness>
 </ResourceDictionary>
\ No newline at end of file

From 2ec97c023f53cc5952762cf202bc2ae98fdfb052 Mon Sep 17 00:00:00 2001
From: rabbitism <dongbin@irihi.tech>
Date: Fri, 26 Jan 2024 19:48:46 +0800
Subject: [PATCH 3/3] feat: simplify template

---
 src/Semi.Avalonia/Controls/Carousel.axaml      | 15 ++++++++++-----
 src/Semi.Avalonia/Themes/Shared/Carousel.axaml |  2 --
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/Semi.Avalonia/Controls/Carousel.axaml b/src/Semi.Avalonia/Controls/Carousel.axaml
index 785808a..d6beab9 100644
--- a/src/Semi.Avalonia/Controls/Carousel.axaml
+++ b/src/Semi.Avalonia/Controls/Carousel.axaml
@@ -90,15 +90,21 @@
             <ControlTemplate TargetType="ListBoxItem">
                 <Panel Background="Transparent">
                     <Border Padding="2,0" Background="Transparent">
-                        <Canvas Width="{DynamicResource CarouselIndicatorColumnarWidth}"
+                        <Border Width="{DynamicResource CarouselIndicatorColumnarWidth}"
                                 Height="{DynamicResource CarouselIndicatorColumnarSelectedHeight}">
                             <Rectangle
                                 Name="Container"
                                 Width="{DynamicResource CarouselIndicatorColumnarWidth}"
                                 Height="{DynamicResource CarouselIndicatorColumnarHeight}"
-                                Fill="{TemplateBinding Background}"
-                                Canvas.Top="{DynamicResource CarouselIndicatorColumnarCanvasHeight}"/>
-                        </Canvas>
+                                VerticalAlignment="Bottom"
+                                Fill="{TemplateBinding Background}">
+                                <Rectangle.Transitions>
+                                    <Transitions>
+                                        <DoubleTransition Property="Height" Duration="0:0:0.2"></DoubleTransition>
+                                    </Transitions>
+                                </Rectangle.Transitions>
+                            </Rectangle>
+                        </Border>
                     </Border>
                 </Panel>
             </ControlTemplate>
@@ -112,7 +118,6 @@
         <Style Selector="^:selected /template/ Rectangle#Container">
             <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
             <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}" />
-            <Setter Property="Canvas.Top" Value="{DynamicResource CarouselIndicatorColumnarSelectedCanvasHeight}" />
         </Style>
     </ControlTheme>
 
diff --git a/src/Semi.Avalonia/Themes/Shared/Carousel.axaml b/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
index 3633801..f32bfdc 100644
--- a/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
@@ -10,8 +10,6 @@
     <x:Double x:Key="CarouselIndicatorColumnarWidth">4</x:Double>
     <x:Double x:Key="CarouselIndicatorColumnarHeight">12</x:Double>
     <x:Double x:Key="CarouselIndicatorColumnarSelectedHeight">20</x:Double>
-    <x:Double x:Key="CarouselIndicatorColumnarCanvasHeight">8</x:Double>
-    <x:Double x:Key="CarouselIndicatorColumnarSelectedCanvasHeight">0</x:Double>
 
     <Thickness x:Key="CarouselButtonMargin">8</Thickness>
 </ResourceDictionary>
\ No newline at end of file