From 36d096d813fae9af1b316ecbc01453871cc28189 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:06:08 +0800
Subject: [PATCH] feat: redesign CarouselDemo.

---
 .../Pages/CarouselDemo.axaml                  | 77 +++++++++++--------
 1 file changed, 45 insertions(+), 32 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
index ca93d4d..d295307 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
@@ -10,30 +10,24 @@
     <UserControl.Styles>
         <Style Selector="Carousel">
             <Setter Property="Height" Value="200" />
+            <Style Selector="^ TextBlock">
+                <Setter Property="HorizontalAlignment" Value="Center" />
+                <Setter Property="VerticalAlignment" Value="Center" />
+                <Setter Property="Foreground" Value="#1C1F23" />
+            </Style>
         </Style>
-        <Style Selector="TextBlock">
-            <Setter Property="HorizontalAlignment" Value="Center" />
-            <Setter Property="VerticalAlignment" Value="Center" />
-            <Setter Property="Foreground" Value="#1C1F23" />
+        <Style Selector="RadioButton">
+            <Setter Property="Theme" Value="{DynamicResource ButtonRadioButton}" />
         </Style>
     </UserControl.Styles>
     <StackPanel Spacing="20">
-        <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">
+                  Classes.Dot="{Binding #DotButton.IsChecked}"
+                  Classes.Columnar="{Binding #ColumnarButton.IsChecked}"
+                  Classes.Line="{Binding #LineButton.IsChecked}"
+                  Classes.Left="{Binding #LeftButton.IsChecked}"
+                  Classes.Center="{Binding #CenterButton.IsChecked}"
+                  Classes.Right="{Binding #RightButton.IsChecked}">
             <Border Background="#EAF5FF">
                 <TextBlock Text="Text 1" />
             </Border>
@@ -47,20 +41,39 @@
                 <TextBlock Text="Text 4" />
             </Border>
         </Carousel>
-        <Carousel Theme="{DynamicResource FullCarousel}"
-                  Classes="Columnar Left">
-            <Border Background="#EAF5FF">
-                <TextBlock Text="Text 1" />
+        <StackPanel Orientation="Horizontal" Spacing="8">
+            <TextBlock VerticalAlignment="Center" Text="Type" />
+            <Border Theme="{DynamicResource RadioButtonGroupBorder}">
+                <StackPanel Orientation="Horizontal">
+                    <RadioButton
+                        Name="DotButton"
+                        IsChecked="True"
+                        Content="Dot" />
+                    <RadioButton
+                        Name="ColumnarButton"
+                        Content="Columnar" />
+                    <RadioButton
+                        Name="LineButton"
+                        Content="Line" />
+                </StackPanel>
             </Border>
-            <Border Background="#F9F9F9">
-                <TextBlock Text="Text 2" />
+        </StackPanel>
+        <StackPanel Orientation="Horizontal" Spacing="8">
+            <TextBlock VerticalAlignment="Center" Text="Position" />
+            <Border Theme="{DynamicResource RadioButtonGroupBorder}">
+                <StackPanel Orientation="Horizontal">
+                    <RadioButton
+                        Name="LeftButton"
+                        IsChecked="True"
+                        Content="Left" />
+                    <RadioButton
+                        Name="CenterButton"
+                        Content="Center" />
+                    <RadioButton
+                        Name="RightButton"
+                        Content="Right" />
+                </StackPanel>
             </Border>
-            <Border Background="#FFF8EA">
-                <TextBlock Text="Text 3" />
-            </Border>
-            <Border Background="#FEF2ED">
-                <TextBlock Text="Text 4" />
-            </Border>
-        </Carousel>
+        </StackPanel>
     </StackPanel>
 </UserControl>
\ No newline at end of file