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] 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