From 0cee18f5073be046f3095389d0d70702894ba095 Mon Sep 17 00:00:00 2001
From: Zhang Dian <54255897+zdpcdt@users.noreply.github.com>
Date: Mon, 27 Mar 2023 16:00:27 +0800
Subject: [PATCH] feat: relayout CheckBoxDemo.

---
 .../Pages/CheckBoxDemo.axaml                  | 82 ++++++++++---------
 1 file changed, 45 insertions(+), 37 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
index 7adda8c..b7ef18f 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
@@ -8,21 +8,26 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
-        <StackPanel HorizontalAlignment="Left">
-            <CheckBox>Unchecked</CheckBox>
-            <CheckBox IsEnabled="False">Unchecked</CheckBox>
-            <CheckBox IsChecked="True">Checked</CheckBox>
-            <CheckBox IsChecked="True" IsEnabled="False">Checked</CheckBox>
-            <CheckBox IsChecked="{x:Null}" IsThreeState="True">Indeterminate</CheckBox>
-            <CheckBox
-                IsChecked="{x:Null}"
-                IsEnabled="False"
-                IsThreeState="True">
-                Indeterminate
-            </CheckBox>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <TextBlock Text="CheckBox" />
+            <StackPanel Orientation="Horizontal">
+                <CheckBox>Unchecked</CheckBox>
+                <CheckBox IsChecked="True">Checked</CheckBox>
+                <CheckBox IsChecked="{x:Null}" IsThreeState="True">Indeterminate</CheckBox>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox IsEnabled="False">Unchecked</CheckBox>
+                <CheckBox IsChecked="True" IsEnabled="False">Checked</CheckBox>
+                <CheckBox
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True">
+                    Indeterminate
+                </CheckBox>
+            </StackPanel>
             <CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
             <TextBlock Margin="0,16" Text="CardCheckBox" />
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Horizontal">
                 <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">复选框标题</TextBlock>
@@ -38,6 +43,18 @@
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    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"
                     IsEnabled="False"
@@ -57,17 +74,6 @@
                         <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}"
@@ -81,7 +87,7 @@
                 </CheckBox>
             </StackPanel>
             <TextBlock Margin="0,16" Text="PureCardCheckBox" />
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Horizontal">
                 <CheckBox Width="300" Theme="{DynamicResource PureCardCheckBox}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">复选框标题</TextBlock>
@@ -97,6 +103,19 @@
                         <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>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
                 <CheckBox
                     Width="300"
                     IsEnabled="False"
@@ -116,17 +135,6 @@
                         <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}"
@@ -141,4 +149,4 @@
             </StackPanel>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>
\ No newline at end of file