From 237fe724753ad8e4923d782b980ce1a76470702f 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.

(cherry picked from commit fa8b2d1f2170dc778fe5ac3cfe5974d3c264214b)
---
 .../Pages/CarouselDemo.axaml                  |  90 +++----
 src/Semi.Avalonia/Controls/Carousel.axaml     | 233 ++++++++++--------
 src/Semi.Avalonia/Converters/ItemConverter.cs |  14 ++
 .../Converters/ItemToObjectConverter.cs       |  26 --
 src/Semi.Avalonia/Themes/Dark/Carousel.axaml  |   5 +-
 src/Semi.Avalonia/Themes/Light/Carousel.axaml |   5 +-
 .../Themes/Shared/Carousel.axaml              |   7 +-
 7 files changed, 198 insertions(+), 182 deletions(-)
 create mode 100644 src/Semi.Avalonia/Converters/ItemConverter.cs
 delete mode 100644 src/Semi.Avalonia/Converters/ItemToObjectConverter.cs

diff --git a/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
index 6b419c0..d295307 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
@@ -8,20 +8,26 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <UserControl.Styles>
-        <Style Selector="Border">
+        <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}">
-            <Carousel.PageTransition>
-                <PageSlide Orientation="Horizontal" Duration="0.25" />
-            </Carousel.PageTransition>
+        <Carousel Theme="{DynamicResource FullCarousel}"
+                  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>
@@ -35,39 +41,39 @@
                 <TextBlock Text="Text 4" />
             </Border>
         </Carousel>
-        <Carousel Classes="Line" Theme="{DynamicResource FullCarousel}">
-            <Carousel.PageTransition>
-                <PageSlide Orientation="Horizontal" Duration="0.25" />
-            </Carousel.PageTransition>
-            <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>
-        <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>
     </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 1f17eec..cf805c3 100644
--- a/src/Semi.Avalonia/Controls/Carousel.axaml
+++ b/src/Semi.Avalonia/Controls/Carousel.axaml
@@ -1,10 +1,66 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:converters="clr-namespace:Semi.Avalonia.Converters"
+    xmlns:converter="clr-namespace:Semi.Avalonia.Converters"
     x:CompileBindings="True">
-    <!--  Add Resources Here  -->
-    <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>
@@ -13,6 +69,7 @@
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
+                    BringIntoViewOnFocusChange="True"
                     HorizontalScrollBarVisibility="Hidden"
                     VerticalScrollBarVisibility="Hidden">
                     <ItemsPresenter
@@ -25,126 +82,94 @@
     </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 CarouselIndicatorDotWidth}"
+                    Height="{DynamicResource CarouselIndicatorDotHeight}"
+                    Fill="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover /template/ Ellipse#Container">
-            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
+        <Style Selector="^:pointerover">
+            <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
         </Style>
-        <Style Selector="^:pressed /template/ Ellipse#Container">
-            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
+        <Style Selector="^:pressed">
+            <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
         </Style>
-        <Style Selector="^:selected /template/ Ellipse#Container">
-            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
+        <Style Selector="^:selected">
+            <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
         </Style>
     </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="Cursor" Value="Hand" />
-        <Setter Property="Background" Value="{DynamicResource CarouselIndicatorForeground}" />
+    <ControlTheme x:Key="CarouselIndicatorLineListBoxItem"
+                  BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
+                  TargetType="ListBoxItem">
+        <Setter Property="Margin" Value="2 0"/>
         <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>
-                    </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>
-        <Style Selector="^:pressed /template/ Border#Container">
-            <Setter Property="Background" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
-        </Style>
-        <Style Selector="^:selected /template/ Border#Container">
-            <Setter Property="Background" Value="{DynamicResource CarouselIndicatorSelectedForeground}" />
-        </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem" TargetType="ListBoxItem">
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="Background" Value="{DynamicResource CarouselIndicatorForeground}" />
+    <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem"
+                  BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
+                  TargetType="ListBoxItem">
+        <Setter Property="Width" Value="{DynamicResource CarouselIndicatorColumnarWidth}"/>
+        <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}"/>
+        <Setter Property="Margin" Value="2 0"/>
         <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"></DoubleTransition>
-                                    </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">
-            <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}" />
         </Style>
     </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">
@@ -167,16 +192,15 @@
                     <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, Converter={x:Static converter:ItemConverter.ItemToObjectConverter}}"
+                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
+                        SelectedIndex="{TemplateBinding SelectedIndex, Mode=TwoWay}">
                         <ListBox.ItemsPanel>
                             <ItemsPanelTemplate>
                                 <StackPanel Orientation="Horizontal" />
@@ -187,30 +211,31 @@
                         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}" />
+                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
+                        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}" />
+                        IsVisible="{TemplateBinding ItemCount, Converter={x:Static converter:ItemConverter.ItemVisibleConverter}}"
+                        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}" />
diff --git a/src/Semi.Avalonia/Converters/ItemConverter.cs b/src/Semi.Avalonia/Converters/ItemConverter.cs
new file mode 100644
index 0000000..396972e
--- /dev/null
+++ b/src/Semi.Avalonia/Converters/ItemConverter.cs
@@ -0,0 +1,14 @@
+using System.Collections;
+using System.Linq;
+using Avalonia.Data.Converters;
+
+namespace Semi.Avalonia.Converters;
+
+public static class ItemConverter
+{
+    public static readonly IValueConverter ItemVisibleConverter =
+        new FuncValueConverter<int?, bool>(count => count is > 1);
+
+    public static readonly IValueConverter ItemToObjectConverter =
+        new FuncValueConverter<int?, IEnumerable>(count => Enumerable.Repeat(new object(), count ?? 0));
+}
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Converters/ItemToObjectConverter.cs b/src/Semi.Avalonia/Converters/ItemToObjectConverter.cs
deleted file mode 100644
index 455f030..0000000
--- a/src/Semi.Avalonia/Converters/ItemToObjectConverter.cs
+++ /dev/null
@@ -1,26 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using System.Linq;
-using Avalonia.Collections;
-using Avalonia.Controls;
-using Avalonia.Data.Converters;
-
-namespace Semi.Avalonia.Converters;
-
-public class ItemToObjectConverter: IValueConverter
-{
-    public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
-    {
-        if (value is int i)
-        {
-            return Enumerable.Repeat(new object(), i).ToList();
-        }
-        return new List<object>();
-    }
-
-    public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
-    {
-        throw new NotImplementedException();
-    }
-}
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Dark/Carousel.axaml b/src/Semi.Avalonia/Themes/Dark/Carousel.axaml
index 561a92f..4f990b9 100644
--- a/src/Semi.Avalonia/Themes/Dark/Carousel.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Carousel.axaml
@@ -1,9 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <SolidColorBrush x:Key="CarouselButtonForeground" Opacity="0.5" Color="Black" />
-    <SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Opacity="0.7" Color="Black" />
-    <SolidColorBrush x:Key="CarouselButtonPressedForeground" Opacity="0.7" Color="Black" />
+    <SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorForeground" Opacity="0.5" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorPointeroverForeground" Opacity="0.7" Color="Black" />
-    <SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Opacity="0.7" Color="Black" />
+    <SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorSelectedForeground" Color="Black" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Light/Carousel.axaml b/src/Semi.Avalonia/Themes/Light/Carousel.axaml
index 561a92f..4f990b9 100644
--- a/src/Semi.Avalonia/Themes/Light/Carousel.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Carousel.axaml
@@ -1,9 +1,8 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <SolidColorBrush x:Key="CarouselButtonForeground" Opacity="0.5" Color="Black" />
-    <SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Opacity="0.7" Color="Black" />
-    <SolidColorBrush x:Key="CarouselButtonPressedForeground" Opacity="0.7" Color="Black" />
+    <SolidColorBrush x:Key="CarouselButtonPointeroverForeground" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorForeground" Opacity="0.5" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorPointeroverForeground" Opacity="0.7" Color="Black" />
-    <SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Opacity="0.7" Color="Black" />
+    <SolidColorBrush x:Key="CarouselIndicatorPressedForeground" Color="Black" />
     <SolidColorBrush x:Key="CarouselIndicatorSelectedForeground" Color="Black" />
 </ResourceDictionary>
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Themes/Shared/Carousel.axaml b/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
index 62ba3e0..db828ba 100644
--- a/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Carousel.axaml
@@ -1,15 +1,14 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <StreamGeometry 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</StreamGeometry>
 
-    <x:Double x:Key="CarouselIndicatorWidth">8</x:Double>
-    <x:Double x:Key="CarouselIndicatorHeight">8</x:Double>
+    <x:Double x:Key="CarouselIndicatorDotWidth">8</x:Double>
+    <x:Double x:Key="CarouselIndicatorDotHeight">8</x:Double>
 
-    <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>
 
-    <Thickness x:Key="CarouselButtonMargin">8</Thickness>
+    <Thickness x:Key="CarouselButtonMargin">20</Thickness>
 </ResourceDictionary>
\ No newline at end of file