From 08f8ccd215c7be90036d6b18d039a2a4718601ce Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Sun, 5 Feb 2023 22:30:01 +0800
Subject: [PATCH] feat: Add FullCarousel theme.

---
 .../Pages/CarouselDemo.axaml                  |  60 ++++---
 .../Pages/CarouselDemo.axaml.cs               |  12 --
 src/Semi.Avalonia/Controls/Carousel.axaml     | 163 +++++++++++++++++-
 .../Converters/ItemToObjectConverter.cs       |  25 +++
 src/Semi.Avalonia/Themes/Dark/Carousel.axaml  |  16 ++
 src/Semi.Avalonia/Themes/Dark/Dark.axaml      |   1 +
 src/Semi.Avalonia/Themes/Light/Carousel.axaml |  16 ++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 8 files changed, 260 insertions(+), 34 deletions(-)
 create mode 100644 src/Semi.Avalonia/Converters/ItemToObjectConverter.cs
 create mode 100644 src/Semi.Avalonia/Themes/Dark/Carousel.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/Carousel.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
index 0388518..5c8a804 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml
@@ -7,31 +7,49 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
+    <UserControl.Styles>
+        <Style Selector="Border">
+            <Setter Property="Height" Value="200" />
+        </Style>
+        <Style Selector="TextBlock">
+            <Setter Property="HorizontalAlignment" Value="Center" />
+            <Setter Property="VerticalAlignment" Value="Center" />
+        </Style>
+    </UserControl.Styles>
     <StackPanel Spacing="20">
-        <TextBlock Classes="Strong" Text="This is still WIP" />
-        <Grid
-            HorizontalAlignment="Stretch"
-            VerticalAlignment="Top"
-            ColumnDefinitions="Auto, *, Auto">
-            <RepeatButton
-                Name="Previous"
-                Grid.Column="0"
-                Content="Previous" />
-            <Carousel Name="carousel" Grid.Column="1">
-                <Carousel.PageTransition>
-                    <PageSlide Orientation="Horizontal" Duration="0.25" />
-                </Carousel.PageTransition>
+        <Carousel 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" />
-            </Carousel>
-            <RepeatButton
-                Name="Next"
-                Grid.Column="2"
-                Content="Next" />
-        </Grid>
-
-        <TextBlock Text="{Binding #carousel.SelectedIndex}" />
+            </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" />
+            </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/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml.cs
index 1f96477..e785e7a 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/CarouselDemo.axaml.cs
@@ -10,17 +10,5 @@ public partial class CarouselDemo : UserControl
     public CarouselDemo()
     {
         InitializeComponent();
-        Previous.Click += OnPreviousClick;
-        Next.Click += OnNextClick;
-    }
-
-    private void OnPreviousClick(object sender, RoutedEventArgs args)
-    {
-        carousel.Previous();
-    }
-    
-    private void OnNextClick(object sender, RoutedEventArgs args)
-    {
-        carousel.Next();
     }
 }
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/Carousel.axaml b/src/Semi.Avalonia/Controls/Carousel.axaml
index e72b5c2..579face 100644
--- a/src/Semi.Avalonia/Controls/Carousel.axaml
+++ b/src/Semi.Avalonia/Controls/Carousel.axaml
@@ -1,5 +1,9 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="clr-namespace:Semi.Avalonia.Converters">
     <!--  Add Resources Here  -->
+    <converters:ItemToObjectConverter x:Key="ItemsConverter" />
     <ControlTheme x:Key="{x:Type Carousel}" TargetType="Carousel">
         <Setter Property="Template">
             <ControlTemplate>
@@ -18,4 +22,161 @@
             </ControlTemplate>
         </Setter>
     </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="ListBoxItem.Cursor" Value="Hand" />
+        <Setter Property="ListBoxItem.Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="ListBoxItem.Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Panel>
+                    <Border Padding="4" Background="Transparent">
+                        <Ellipse
+                            Name="Container"
+                            Width="{DynamicResource CarouselIndicatorSelectedHeight}"
+                            Height="{DynamicResource CarouselIndicatorSelectedHeight}"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            Fill="{TemplateBinding Foreground}" />
+                    </Border>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ Ellipse#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPointeroverForeground}" />
+        </Style>
+        <Style Selector="^:pressed /template/ Ellipse#Container">
+            <Setter Property="Fill" Value="{DynamicResource CarouselIndicatorPressedForeground}" />
+        </Style>
+        <Style Selector="^:selected /template/ Ellipse#Container">
+            <Setter Property="Fill" 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="ListBoxItem.Cursor" Value="Hand" />
+        <Setter Property="ListBoxItem.Background" Value="{DynamicResource CarouselIndicatorForeground}" />
+        <Setter Property="ListBoxItem.Template">
+            <ControlTemplate TargetType="ListBoxItem">
+                <Panel Background="Transparent">
+                    <Border Padding="4,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>
+                        </Border>
+                    </Border>
+                </Panel>
+            </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}" />
+            <Setter Property="Width" Value="{DynamicResource CarouselIndicatorLineSelectedWidth}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="CarouselButton" TargetType="Button">
+        <Setter Property="Button.Cursor" Value="Hand" />
+        <Setter Property="Button.Foreground" Value="{DynamicResource CarouselButtonForeground}" />
+        <Setter Property="Button.Template">
+            <ControlTemplate TargetType="Button">
+                <Grid Background="Transparent">
+                    <PathIcon
+                        Width="24"
+                        Height="24"
+                        Data="{DynamicResource CarouselButtonGlyph}"
+                        Foreground="{TemplateBinding Foreground}" />
+                </Grid>
+            </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="Template">
+            <ControlTemplate TargetType="Carousel">
+                <Grid ColumnDefinitions="Auto, *, Auto" RowDefinitions="*, Auto">
+                    <ScrollViewer
+                        Name="PART_ScrollViewer"
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Grid.Column="0"
+                        Grid.ColumnSpan="3"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        HorizontalScrollBarVisibility="Hidden"
+                        VerticalScrollBarVisibility="Hidden">
+                        <ItemsPresenter
+                            Name="PART_ItemsPresenter"
+                            Margin="{TemplateBinding Padding}"
+                            ItemsPanel="{TemplateBinding ItemsPanel}" />
+                    </ScrollViewer>
+                    <ListBox
+                        Name="PART_ItemsPresenter2"
+                        Grid.Row="1"
+                        Grid.Column="1"
+                        MaxHeight="20"
+                        Margin="0,8"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}"
+                        Items="{TemplateBinding Items,
+                                                Converter={StaticResource ItemsConverter}}"
+                        SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
+                        <ListBox.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <StackPanel Orientation="Horizontal" />
+                            </ItemsPanelTemplate>
+                        </ListBox.ItemsPanel>
+                    </ListBox>
+                    <Button
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Grid.Column="0"
+                        Margin="{DynamicResource CarouselButtonMargin}"
+                        VerticalAlignment="Center"
+                        Background="{DynamicResource CarouselButtonPointeroverForeground}"
+                        BorderBrush="{DynamicResource CarouselButtonPressedForeground}"
+                        Command="{Binding $parent[Carousel].Previous}"
+                        Foreground="{DynamicResource CarouselButtonForeground}"
+                        Theme="{DynamicResource CarouselButton}" />
+                    <Button
+                        Grid.Row="0"
+                        Grid.RowSpan="2"
+                        Grid.Column="2"
+                        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}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^.Line /template/ ListBox#PART_ItemsPresenter2">
+            <Setter Property="ListBox.ItemContainerTheme" Value="{DynamicResource CarouselIndicatorLineListBoxItem}" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Converters/ItemToObjectConverter.cs b/src/Semi.Avalonia/Converters/ItemToObjectConverter.cs
new file mode 100644
index 0000000..a7f7b0c
--- /dev/null
+++ b/src/Semi.Avalonia/Converters/ItemToObjectConverter.cs
@@ -0,0 +1,25 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using System.Linq;
+using Avalonia.Collections;
+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 AvaloniaList<object> list)
+        {
+            return list.Select(a => new object());
+        }
+        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
new file mode 100644
index 0000000..fb02b11
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Dark/Carousel.axaml
@@ -0,0 +1,16 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <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>
+
+    <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="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="CarouselIndicatorSelectedForeground" Color="Black" />
+
+    <x:Double x:Key="CarouselIndicatorLineSelectedWidth">48</x:Double>
+    <x:Double x:Key="CarouselIndicatorSelectedHeight">8</x:Double>
+    <Thickness x:Key="CarouselButtonMargin">8</Thickness>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Dark/Dark.axaml b/src/Semi.Avalonia/Themes/Dark/Dark.axaml
index 458b0f5..7a79024 100644
--- a/src/Semi.Avalonia/Themes/Dark/Dark.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/Dark.axaml
@@ -10,6 +10,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Calendar.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/CalendarDatePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/CaptionButtons.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Carousel.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DatePicker.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/Carousel.axaml b/src/Semi.Avalonia/Themes/Light/Carousel.axaml
new file mode 100644
index 0000000..fb02b11
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/Carousel.axaml
@@ -0,0 +1,16 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <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>
+
+    <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="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="CarouselIndicatorSelectedForeground" Color="Black" />
+
+    <x:Double x:Key="CarouselIndicatorLineSelectedWidth">48</x:Double>
+    <x:Double x:Key="CarouselIndicatorSelectedHeight">8</x:Double>
+    <Thickness x:Key="CarouselButtonMargin">8</Thickness>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 22a620e..55ffb9f 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -9,6 +9,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Calendar.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CalendarDatePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CaptionButtons.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Carousel.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/DatePicker.axaml" />