From 2c90d24cc5b507c93d5cf50ea044a3cea6369cca Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 16 Dec 2022 14:47:05 +0800
Subject: [PATCH] feat: Add Expander Theme.

---
 src/Semi.Avalonia.Demo/MainWindow.axaml       |   3 +
 .../Pages/ExpanderDemo.axaml                  |  32 ++++
 .../Pages/ExpanderDemo.axaml.cs               |  18 ++
 src/Semi.Avalonia/Controls/Controls.axaml     |   1 +
 src/Semi.Avalonia/Controls/Expander.axaml     | 164 ++++++++++++++++++
 src/Semi.Avalonia/Themes/Light/Expander.axaml |  26 +++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |   1 +
 7 files changed, 245 insertions(+)
 create mode 100644 src/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml
 create mode 100644 src/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/Expander.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/Expander.axaml

diff --git a/src/Semi.Avalonia.Demo/MainWindow.axaml b/src/Semi.Avalonia.Demo/MainWindow.axaml
index f549e15..553004b 100644
--- a/src/Semi.Avalonia.Demo/MainWindow.axaml
+++ b/src/Semi.Avalonia.Demo/MainWindow.axaml
@@ -17,6 +17,9 @@
         <TabItem Header="CheckBox">
             <pages:CheckBoxDemo />
         </TabItem>
+        <TabItem Header="Expander">
+            <pages:ExpanderDemo />
+        </TabItem>
         <TabItem Header="RadioButton">
             <pages:RadioButtonDemo />
         </TabItem>
diff --git a/src/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml b/src/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml
new file mode 100644
index 0000000..3b4a8b0
--- /dev/null
+++ b/src/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml
@@ -0,0 +1,32 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ExpanderDemo" xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="450"
+    d:DesignWidth="800" mc:Ignorable="d">
+    <StackPanel Margin="20" Spacing="20">
+        <StackPanel>
+            <Expander Header="Expander 1">
+                <TextBlock Text="Hello Avalonia!" />
+            </Expander>
+            <Expander Header="Expander 2">
+                <TextBox Text="Hello Avalonia!" />
+            </Expander>
+            <Expander Header="Expander 3">
+                <Button Content="Hello Avalonia World!" />
+            </Expander>
+        </StackPanel>
+        <Grid ColumnDefinitions="* *">
+            <Expander
+                Height="200" ExpandDirection="Right"
+                Header="Right">
+                <TextBlock>Right Content</TextBlock>
+            </Expander>
+            <Expander
+                Grid.Column="1" Height="200"
+                HorizontalAlignment="Right" ExpandDirection="Left"
+                Header="Left">
+                <TextBlock>Left Content</TextBlock>
+            </Expander>
+        </Grid>
+    </StackPanel>
+</UserControl>
diff --git a/src/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml.cs b/src/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml.cs
new file mode 100644
index 0000000..98b8616
--- /dev/null
+++ b/src/Semi.Avalonia.Demo/Pages/ExpanderDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ExpanderDemo : UserControl
+{
+    public ExpanderDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index e21551f..01ceddf 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -4,6 +4,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Border.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Button.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/PathIcon.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/RadioButton.axaml" />
diff --git a/src/Semi.Avalonia/Controls/Expander.axaml b/src/Semi.Avalonia/Controls/Expander.axaml
new file mode 100644
index 0000000..3dc81be
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/Expander.axaml
@@ -0,0 +1,164 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <Design.PreviewWith>
+        <StackPanel Margin="20" Spacing="20">
+            <TextBox>Hello</TextBox>
+            <Expander Header="Hello">Content</Expander>
+        </StackPanel>
+    </Design.PreviewWith>
+    <ControlTheme x:Key="ExpanderHeaderToggleButtonTheme" TargetType="ToggleButton">
+        <Setter Property="ToggleButton.Template">
+            <ControlTemplate TargetType="ToggleButton">
+                <ContentPresenter
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    Content="{TemplateBinding Content}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+    <ControlTheme x:Key="{x:Type Expander}" TargetType="Expander">
+        <Setter Property="Expander.BorderThickness" Value="1" />
+        <Setter Property="Expander.BorderBrush" Value="{DynamicResource ExpanderSeparatorBorderBrush}" />
+        <Setter Property="Expander.CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
+        <Setter Property="Expander.HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Expander.HorizontalContentAlignment" Value="Left" />
+        <Setter Property="Expander.VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Expander.Template">
+            <ControlTemplate TargetType="Expander">
+                <DockPanel>
+                    <LayoutTransformControl x:Name="ExpanderHeaderLayoutContainer" Margin="{DynamicResource ExpanderHeaderMargin}">
+                        <ToggleButton
+                            x:Name="ExpanderHeader"
+                            Padding="{DynamicResource ExpanderHeaderPadding}"
+                            HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
+                            Background="{DynamicResource ExpanderHeaderDefaultBackground}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            IsChecked="{TemplateBinding IsExpanded,
+                                                        Mode=TwoWay}"
+                            IsEnabled="{TemplateBinding IsEnabled}"
+                            TextElement.FontWeight="{DynamicResource ExpanderHeaderFontWeight}"
+                            TextElement.Foreground="{DynamicResource ExpanderHeaderForeground}"
+                            Theme="{StaticResource ExpanderHeaderToggleButtonTheme}">
+                            <Grid Background="Transparent" ColumnDefinitions="*, Auto">
+                                <ContentPresenter
+                                    Grid.Column="0"
+                                    Content="{TemplateBinding Header}"
+                                    ContentTemplate="{TemplateBinding HeaderTemplate}" />
+                                <ContentPresenter
+                                    Name="PART_IconContentPresenter" Grid.Column="1"
+                                    Margin="{DynamicResource ExpanderEndIconMargin}" />
+                            </Grid>
+                        </ToggleButton>
+                    </LayoutTransformControl>
+                    <LayoutTransformControl Name="ExpanderContentLayoutContainer" MinHeight="1">
+                        <Border
+                            x:Name="ExpanderContent" MinHeight="2"
+                            BorderBrush="{DynamicResource ExpanderSeparatorBorderBrush}"
+                            BorderThickness="0,0,0,1">
+                            <ContentPresenter
+                                x:Name="PART_ContentPresenter"
+                                Margin="{DynamicResource ExpanderContentMargin}"
+                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                Content="{TemplateBinding Content}"
+                                ContentTemplate="{TemplateBinding ContentTemplate}"
+                                Foreground="{DynamicResource ExpanderContentForeground}"
+                                IsVisible="{TemplateBinding IsExpanded,
+                                                            Mode=TwoWay}" />
+                        </Border>
+                    </LayoutTransformControl>
+                </DockPanel>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:expanded /template/ ContentPresenter#PART_IconContentPresenter">
+            <Setter Property="ContentPresenter.Content">
+                <Template>
+                    <PathIcon
+                        Width="{DynamicResource ExpanderIconSize}"
+                        Height="{DynamicResource ExpanderIconSize}"
+                        Data="M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z" />
+                </Template>
+            </Setter>
+        </Style>
+
+        <Style Selector="^:not(:expanded) /template/ ContentPresenter#PART_IconContentPresenter">
+            <Setter Property="ContentPresenter.Content">
+                <Template>
+                    <PathIcon
+                        Width="{DynamicResource ExpanderIconSize}"
+                        Height="{DynamicResource ExpanderIconSize}"
+                        Data="M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z">
+                        <PathIcon.RenderTransform>
+                            <TransformGroup>
+                                <RotateTransform Angle="180" CenterX="0.6" CenterY="0.6" />
+                            </TransformGroup>
+                        </PathIcon.RenderTransform>
+                    </PathIcon>
+                </Template>
+            </Setter>
+        </Style>
+
+        <Style Selector="^:right">
+            <Style Selector="^ /template/ LayoutTransformControl#ExpanderHeaderLayoutContainer">
+                <Setter Property="LayoutTransformControl.LayoutTransform">
+                    <RotateTransform Angle="-90" />
+                </Setter>
+                <Setter Property="VerticalAlignment" Value="Stretch" />
+            </Style>
+            <Setter Property="Expander.HorizontalAlignment" Value="Left" />
+            <Setter Property="Expander.VerticalAlignment" Value="Stretch" />
+        </Style>
+
+        <Style Selector="^:left">
+            <Style Selector="^ /template/ LayoutTransformControl#ExpanderHeaderLayoutContainer">
+                <Setter Property="LayoutTransformControl.LayoutTransform">
+                    <RotateTransform Angle="90" />
+                </Setter>
+                <Setter Property="VerticalAlignment" Value="Stretch" />
+            </Style>
+            <Setter Property="Expander.HorizontalAlignment" Value="Stretch" />
+            <Setter Property="Expander.VerticalAlignment" Value="Stretch" />
+        </Style>
+
+        <Style Selector="^:left /template/ LayoutTransformControl#ExpanderHeaderLayoutContainer">
+            <Setter Property="DockPanel.Dock" Value="Right" />
+        </Style>
+        <Style Selector="^:up /template/ LayoutTransformControl#ExpanderHeaderLayoutContainer">
+            <Setter Property="DockPanel.Dock" Value="Bottom" />
+        </Style>
+        <Style Selector="^:right /template/ LayoutTransformControl#ExpanderHeaderLayoutContainer">
+            <Setter Property="DockPanel.Dock" Value="Left" />
+        </Style>
+        <Style Selector="^:down /template/ LayoutTransformControl#ExpanderHeaderLayoutContainer">
+            <Setter Property="DockPanel.Dock" Value="Top" />
+        </Style>
+
+        <Style Selector="^:left /template/ Border#ExpanderContent">
+            <Setter Property="Border.MinWidth" Value="2" />
+            <Setter Property="Border.BorderThickness" Value="{DynamicResource ExpanderLeftContentBorderThickness}" />
+        </Style>
+        <Style Selector="^:up /template/ Border#ExpanderContent">
+            <Setter Property="Border.MinHeight" Value="2" />
+            <Setter Property="Border.BorderThickness" Value="{DynamicResource ExpanderUpContentBorderThickness}" />
+        </Style>
+        <Style Selector="^:right /template/ Border#ExpanderContent">
+            <Setter Property="Border.MinWidth" Value="2" />
+            <Setter Property="Border.BorderThickness" Value="{DynamicResource ExpanderRightContentBorderThickness}" />
+        </Style>
+        <Style Selector="^:down /template/ Border#ExpanderContent">
+            <Setter Property="Border.MinHeight" Value="2" />
+            <Setter Property="Border.BorderThickness" Value="{DynamicResource ExpanderDownContentBorderThickness}" />
+        </Style>
+
+        <Style Selector="^ /template/ ToggleButton#ExpanderHeader:pointerover">
+            <Setter Property="ToggleButton.Background" Value="{DynamicResource ExpanderHeaderHoverBackground}" />
+        </Style>
+        <Style Selector="^ /template/ ToggleButton#ExpanderHeader:pressed">
+            <Setter Property="ToggleButton.Background" Value="{DynamicResource ExpanderHeaderPressedBackground}" />
+        </Style>
+        <Style Selector="^ /template/ ToggleButton#ExpanderHeader:disabled">
+            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ExpanderHeaderDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Expander.axaml b/src/Semi.Avalonia/Themes/Light/Expander.axaml
new file mode 100644
index 0000000..a4dc506
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/Expander.axaml
@@ -0,0 +1,26 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
+    <SolidColorBrush x:Key="ExpanderSeparatorBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ExpanderHeaderForeground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ExpanderHeaderDisabledForeground" Opacity="0.35" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ExpanderIconForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ExpanderHeaderDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="ExpanderHeaderHoverBackground" Opacity="0.05" Color="#2E3238" />
+    <SolidColorBrush x:Key="ExpanderHeaderPressedBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="ExpanderContentForeground" Opacity="0.8" Color="#1C1F23" />
+
+    <FontWeight x:Key="ExpanderHeaderFontWeight">600</FontWeight>
+    <sys:Double x:Key="ExpanderIconSize">8</sys:Double>
+
+    <CornerRadius x:Key="ExpanderHeaderCornerRadius">3</CornerRadius>
+    <Thickness x:Key="ExpanderHeaderMargin">8 4</Thickness>
+    <Thickness x:Key="ExpanderHeaderPadding">8</Thickness>
+    <Thickness x:Key="ExpanderEndIconMargin">0 0 8 0</Thickness>
+    <Thickness x:Key="ExpanderContentMargin">16 4 16 8</Thickness>
+    <Thickness x:Key="ExpanderFrontIconMargin">8 0 0 0</Thickness>
+    <Thickness x:Key="ExpanderDownContentBorderThickness">0 0 0 1</Thickness>
+    <Thickness x:Key="ExpanderUpContentBorderThickness">0 1 0 0</Thickness>
+    <Thickness x:Key="ExpanderLeftContentBorderThickness">1 0 0 0</Thickness>
+    <Thickness x:Key="ExpanderRightContentBorderThickness">0 0 1 0</Thickness>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index e903dfa..15d962d 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -5,6 +5,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Border.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Button.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/CheckBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/RadioButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ScrollViewer.axaml" />