From 309dc7ed23d2bdfe2ae93078b0869884dfa256c1 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Fri, 17 Mar 2023 23:20:39 +0800
Subject: [PATCH] feat: add pure card theme.

---
 .../Pages/CheckBoxDemo.axaml                  | 176 ++++++++++++------
 src/Semi.Avalonia/Controls/CheckBox.axaml     |  86 +++++++++
 2 files changed, 204 insertions(+), 58 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
index 789e110..172d2c7 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
@@ -7,7 +7,7 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <ScrollViewer>
+    <ScrollViewer HorizontalScrollBarVisibility="Auto">
         <StackPanel HorizontalAlignment="Left">
             <CheckBox>Unchecked</CheckBox>
             <CheckBox IsEnabled="False">Unchecked</CheckBox>
@@ -20,63 +20,123 @@
                 IsThreeState="True">
                 Indeterminate
             </CheckBox>
-            <CheckBox Width="120">Checkbox should wrap its text</CheckBox>
-            <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
-            <CheckBox
-                Width="300"
-                IsChecked="True"
-                Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
-            <CheckBox
-                Width="300"
-                IsEnabled="False"
-                Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
-            <CheckBox
-                Width="300"
-                IsChecked="True"
-                IsEnabled="False"
-                Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
-            <CheckBox
-                Width="300"
-                IsChecked="{x:Null}"
-                IsEnabled="True"
-                IsThreeState="True"
-                Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
-            <CheckBox
-                Width="300"
-                IsChecked="{x:Null}"
-                IsEnabled="False"
-                IsThreeState="True"
-                Theme="{DynamicResource CardCheckBox}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </CheckBox>
+            <CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="True"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox Width="300" Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="True"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+            </StackPanel>
         </StackPanel>
     </ScrollViewer>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/CheckBox.axaml b/src/Semi.Avalonia/Controls/CheckBox.axaml
index 6f12fd2..be6f058 100644
--- a/src/Semi.Avalonia/Controls/CheckBox.axaml
+++ b/src/Semi.Avalonia/Controls/CheckBox.axaml
@@ -308,6 +308,9 @@
         </Style>
 
         <Style Selector="^:indeterminate">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
+            </Style>
             <Style Selector="^ /template/ Border#NormalRectangle">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCheckedDefaultBorderBrush}" />
                 <Setter Property="Background" Value="{DynamicResource CheckboxCheckedDefaultBackground}" />
@@ -336,6 +339,9 @@
 
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
+                </Style>
                 <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
                 </Style>
@@ -350,4 +356,84 @@
             </Style>
         </Style>
     </ControlTheme>
+
+    <ControlTheme x:Key="PureCardCheckBox" TargetType="CheckBox">
+        <Setter Property="Padding" Value="{DynamicResource CheckboxCardPadding}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource CheckboxCardBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckboxCardCornerRadius}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="CheckBox.Template">
+            <ControlTemplate TargetType="CheckBox">
+                <Border
+                    Name="RootBorder"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <ContentPresenter
+                        x:Name="ContentPresenter"
+                        Grid.Column="1"
+                        Margin="8,0,0,0"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="Center"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        IsVisible="{TemplateBinding Content,
+                                                    Converter={x:Static ObjectConverters.IsNotNull}}"
+                        RecognizesAccessKey="True"
+                        TextWrapping="Wrap" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Unchecked PointerOver State  -->
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource CheckboxCardPointeroverBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="Background" Value="{DynamicResource CheckboxCardPressedBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckboxCardCheckedBackground}" />
+            </Style>
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource CheckboxDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:indeterminate">
+            <!--  Checked Disabled State  -->
+            <Style Selector="^ /template/ Border#RootBorder">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedBorderBrush}" />
+            </Style>
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckboxCardCheckedDisabledBorderBrush}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>