From ead6e07b24eadb5bb9a64b0ac4caf197e51894d6 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Tue, 25 Jul 2023 13:35:58 +0800
Subject: [PATCH] feat: update overview page and checkbox/radiobutton samples.

---
 .../Pages/CheckBoxDemo.axaml                  | 153 ++++++------------
 demo/Semi.Avalonia.Demo/Pages/Overview.axaml  |  60 +++++--
 .../Pages/Overview.axaml.cs                   |  24 +++
 .../Pages/RadioButtonDemo.axaml               |  75 +++------
 4 files changed, 149 insertions(+), 163 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
index 204599d..9932a0e 100644
--- a/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/CheckBoxDemo.axaml
@@ -47,126 +47,79 @@
                     IsThreeState="True"
                     Theme="{StaticResource SimpleCheckBox}" />
             </StackPanel>
-            <TextBlock Margin="0,16" Text="CardCheckBox" />
+            <TextBlock Text="CardCheckBox" />
             <StackPanel Orientation="Horizontal">
-                <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                <StackPanel.Styles>
+                    <Style Selector="CheckBox">
+                        <Setter Property="Width" Value="150" />
+                        <Setter Property="Margin" Value="8" />
+                    </Style>
+                </StackPanel.Styles>
                 <CheckBox
-                    Width="300"
+                    Content="Windows"
                     IsChecked="True"
-                    Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Theme="{DynamicResource CardCheckBox}" />
                 <CheckBox
-                    Width="300"
+                    Content="macOS"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="Linux"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="iOS"
                     IsChecked="{x:Null}"
                     IsThreeState="True"
-                    Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="Android"
+                    IsChecked="{x:Null}"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}" />
+                <CheckBox
+                    Content="Wasm"
+                    IsChecked="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}" />
             </StackPanel>
+            <TextBlock Text="PureCardCheckBox" />
             <StackPanel Orientation="Horizontal">
+                <StackPanel.Styles>
+                    <Style Selector="CheckBox">
+                        <Setter Property="Width" Value="150" />
+                        <Setter Property="Margin" Value="8" />
+                    </Style>
+                </StackPanel.Styles>
                 <CheckBox
-                    Width="300"
-                    IsEnabled="False"
-                    Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Content="Windows"
+                    IsChecked="True"
+                    Theme="{DynamicResource PureCardCheckBox}" />
                 <CheckBox
-                    Width="300"
+                    Content="macOS"
                     IsChecked="True"
                     IsEnabled="False"
-                    Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Theme="{DynamicResource PureCardCheckBox}" />
                 <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>
-            <TextBlock Margin="0,16" Text="PureCardCheckBox" />
-            <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"
+                    Content="Linux"
                     IsChecked="True"
-                    Theme="{DynamicResource PureCardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Theme="{DynamicResource PureCardCheckBox}" />
                 <CheckBox
-                    Width="300"
+                    Content="iOS"
                     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">
+                    Theme="{DynamicResource PureCardCheckBox}" />
                 <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"
+                    Content="Android"
                     IsChecked="{x:Null}"
-                    IsEnabled="False"
                     IsThreeState="True"
-                    Theme="{DynamicResource PureCardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
+                    Theme="{DynamicResource PureCardCheckBox}" />
+                <CheckBox
+                    Content="Wasm"
+                    IsChecked="False"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}" />
             </StackPanel>
         </StackPanel>
     </ScrollViewer>
diff --git a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
index 0ad4538..cefbdf0 100644
--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
@@ -4,6 +4,7 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="clr-namespace:Avalonia.Markup.Xaml.Converters;assembly=Avalonia.Markup.Xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="clr-namespace:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="1000"
     d:DesignWidth="1920"
@@ -335,18 +336,53 @@
                     Classes="H5"
                     Text="Start to install"
                     Theme="{DynamicResource TitleTextBlock}" />
-                <TextBlock Text="Install via nuget: " />
-                <Border Margin="0,16" Classes="CodeBlock">
-                    <SelectableTextBlock FontFamily="Consolas" Text="dotnet add package Semi.Avalonia --version 0.1.0-preview8" />
-                </Border>
-                <TextBlock Text="Reference styles: " />
-                <Border Margin="0,16" Classes="CodeBlock">
-                    <StackPanel>
-                        <SelectableTextBlock FontFamily="Consolas" Text="&lt;Application.Styles&gt;" />
-                        <SelectableTextBlock FontFamily="Consolas" Text="    &lt;StyleInclude Source=&quot;avares://Semi.Avalonia/Themes/Index.axaml&quot; /&gt;" />
-                        <SelectableTextBlock FontFamily="Consolas" Text="&lt;/Application.Styles&gt;" />
-                    </StackPanel>
-                </Border>
+                <TabControl Padding="8">
+                    <TabItem Header="Main">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].MainInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    FontFamily="Consolas"
+                                    Text="{Binding $parent[local:Overview].MainStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                    <TabItem Header="DataGrid">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].DataGridInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    FontFamily="Consolas"
+                                    Text="{Binding $parent[local:Overview].DataGridStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                    <TabItem Header="ColorPicker">
+                        <StackPanel>
+                            <TextBlock Text="Install via nuget: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock FontFamily="Consolas" Text="{Binding $parent[local:Overview].ColorPickerInstall}" />
+                            </Border>
+                            <TextBlock Text="Reference styles: " />
+                            <Border Margin="0,16" Classes="CodeBlock">
+                                <SelectableTextBlock
+                                    FontFamily="Consolas"
+                                    Text="{Binding $parent[local:Overview].ColorPickerStyle}"
+                                    TextWrapping="Wrap" />
+                            </Border>
+                        </StackPanel>
+                    </TabItem>
+                </TabControl>
             </StackPanel>
         </StackPanel>
     </ScrollViewer>
diff --git a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
index 160fb34..09fc362 100644
--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
@@ -12,4 +12,28 @@ public partial class Overview : UserControl
     {
         InitializeComponent();
     }
+
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.0.0";
+
+    public string MainStyle { get; set; } = """
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
+</Application.Styles>
+""";
+    
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.0.0";
+
+    public string DataGridStyle { get; set; } = """
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia.DataGrid/Index.axaml" />
+</Application.Styles>
+""";
+    
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.0.0";
+
+    public string ColorPickerStyle { get; set; } = """
+<Application.Styles>
+    <StyleInclude Source="avares://Semi.Avalonia.ColorPicker/Index.axaml" />
+</Application.Styles>
+""";
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
index f884c40..a374323 100644
--- a/demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/RadioButtonDemo.axaml
@@ -107,81 +107,54 @@
             </StackPanel>
             <TextBlock Text="Radio Button as Card" />
             <StackPanel Orientation="Horizontal">
-                <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
                 <RadioButton
                     Width="300"
+                    Content="Avalonia"
                     IsChecked="True"
-                    Theme="{DynamicResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                    Theme="{DynamicResource CardRadioButton}" />
+                <RadioButton
+                    Width="300"
+                    Content="WPF"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardRadioButton}" />
             </StackPanel>
             <StackPanel Orientation="Horizontal">
                 <RadioButton
                     Width="300"
+                    Content="Avalonia"
                     IsEnabled="False"
-                    Theme="{DynamicResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                    Theme="{DynamicResource CardRadioButton}" />
                 <RadioButton
                     Width="300"
+                    Content="WPF"
                     IsChecked="True"
                     IsEnabled="False"
-                    Theme="{DynamicResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                    Theme="{DynamicResource CardRadioButton}" />
             </StackPanel>
             <TextBlock Text="Radio Button as Pure Card" />
             <StackPanel Orientation="Horizontal">
-                <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
                 <RadioButton
                     Width="300"
+                    Content="Avalonia"
                     IsChecked="True"
-                    Theme="{DynamicResource PureCardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                    Theme="{DynamicResource PureCardRadioButton}" />
+                <RadioButton
+                    Width="300"
+                    Content="WPF"
+                    Theme="{DynamicResource PureCardRadioButton}" />
             </StackPanel>
             <StackPanel Orientation="Horizontal">
                 <RadioButton
                     Width="300"
-                    IsEnabled="False"
-                    Theme="{DynamicResource PureCardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
-                <RadioButton
-                    Width="300"
+                    Content="Avalonia"
                     IsChecked="True"
                     IsEnabled="False"
-                    Theme="{DynamicResource PureCardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                    Theme="{DynamicResource PureCardRadioButton}" />
+                <RadioButton
+                    Width="300"
+                    Content="WPF"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardRadioButton}" />
             </StackPanel>
         </StackPanel>
     </ScrollViewer>