diff --git a/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
index 44d5cc6..4aa5cd0 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml
@@ -17,8 +17,7 @@
             <TextBlock
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
-                Background="Gray"
-                Text="Everest" />
+                Text="A.S.I.A" />
         </ButtonSpinner>
         <ButtonSpinner
             Height="30"
@@ -30,8 +29,7 @@
             <TextBlock
                 HorizontalAlignment="Center"
                 VerticalAlignment="Center"
-                Background="Gray"
-                Text="Everest" />
+                Text="A.S.I.A" />
         </ButtonSpinner>
     </StackPanel>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml.cs
index a6e8f51..f562d3e 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/ButtonSpinnerDemo.axaml.cs
@@ -36,15 +36,20 @@ public partial class ButtonSpinnerDemo : UserControl
 
     private readonly string[] _mountains = new[]
     {
-        "Everest",
-        "K2 (Mount Godwin Austen)",
-        "Kangchenjunga",
-        "Lhotse",
-        "Makalu",
-        "Cho Oyu",
-        "Dhaulagiri",
-        "Manaslu",
-        "Nanga Parbat",
-        "Annapurna"
+        "A.S.I.A",
+        "饕餮人间",
+        "七步咙咚呛",
+        "大惊小怪",
+        "The ONE",
+        "以梦为马 (壮志骄阳版)",
+        "emo了",
+        "一眼万年",
+        "冲刺吧",
+        "爱的赏味期限",
+        "COSMIC ANTHEM / 手紙",
+        "世界晚安",
+        "明年也要好好长大",
+        "320万年前",
+        "W.O.R.L.D.",
     };
 }
\ No newline at end of file
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/ComboBoxDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
index c73cc17..6fccb90 100644
--- a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
@@ -9,45 +9,59 @@
     mc:Ignorable="d">
     <StackPanel Spacing="20">
         <ComboBox Width="150">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
         </ComboBox>
         <ComboBox Width="150" PlaceholderText="Please Select">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
         </ComboBox>
         <ComboBox Width="150" IsEnabled="False">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
         </ComboBox>
         <ComboBox
             Width="150"
             Classes="Large"
             IsEnabled="False">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
         </ComboBox>
         <ComboBox Width="150" Classes="Small">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
         </ComboBox>
         <ComboBox Width="150" Classes="Bordered">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
         </ComboBox>
         <ComboBox
             Width="150"
             Classes="Bordered"
             IsEnabled="False">
-            <ComboBoxItem>AAA</ComboBoxItem>
-            <ComboBoxItem>BBB</ComboBoxItem>
-            <ComboBoxItem>CCC</ComboBoxItem>
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
         </ComboBox>
     </StackPanel>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
index 44729f3..5a36e71 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
@@ -5,122 +5,95 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:Semi.Avalonia.Demo.Pages"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:DataGridDemoViewModel"
     mc:Ignorable="d">
     <TabControl>
         <TabItem Header="DataGrid">
-            <DockPanel>
-                <CheckBox
-                    x:Name="ShowGDP"
-                    Content="Toggle GDP Column Visibility"
-                    DockPanel.Dock="Top"
-                    IsChecked="True" />
-                <DataGrid
-                    Name="dataGrid1"
-                    Margin="12"
-                    CanUserReorderColumns="True"
-                    CanUserResizeColumns="True"
-                    CanUserSortColumns="True"
-                    HeadersVisibility="All">
-                    <DataGrid.Columns>
-                        <!--  Using HeaderTemplate  -->
-                        <DataGridTextColumn
-                            Width="6*"
-                            x:DataType="local:Country"
-                            Binding="{Binding Name}"
-                            Header="Country or Region" />
-                        <DataGridTextColumn
-                            Width="4*"
-                            x:DataType="local:Country"
-                            Binding="{Binding Region}"
-                            Header="Region" />
-                        <DataGridTextColumn
-                            Width="3*"
-                            x:DataType="local:Country"
-                            Binding="{Binding Population}"
-                            Header="Population" />
-                        <DataGridTextColumn
-                            Width="3*"
-                            x:DataType="local:Country"
-                            Binding="{Binding Area}"
-                            Header="Area" />
-                        <DataGridTextColumn
-                            Width="3*"
-                            MinWidth="200"
-                            x:DataType="local:Country"
-                            Binding="{Binding GDP}"
-                            Header="GDP"
-                            IsVisible="{Binding #ShowGDP.IsChecked}" />
-                    </DataGrid.Columns>
-                    <DataGrid.CellTheme>
-                        <ControlTheme BasedOn="{StaticResource {x:Type DataGridCell}}" TargetType="DataGridCell">
-                            <ControlTheme.Children>
-                                <Style Selector="^:nth-child(1)">
-                                    <Setter Property="FontWeight" Value="Bold" />
-                                </Style>
-                            </ControlTheme.Children>
-                        </ControlTheme>
-                    </DataGrid.CellTheme>
-                    <DataGrid.ColumnHeaderTheme>
-                        <ControlTheme BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="DataGridColumnHeader">
-                            <ControlTheme.Children>
-                                <Style Selector="^:nth-child(1)">
-                                    <Setter Property="FontWeight" Value="Bold" />
-                                </Style>
-                            </ControlTheme.Children>
-                        </ControlTheme>
-                    </DataGrid.ColumnHeaderTheme>
-                </DataGrid>
-            </DockPanel>
-        </TabItem>
-        <TabItem Header="Grouping">
-            <DataGrid Name="dataGridGrouping" Margin="12">
+            <DataGrid
+                Margin="8"
+                CanUserReorderColumns="True"
+                CanUserResizeColumns="True"
+                CanUserSortColumns="True"
+                HeadersVisibility="All"
+                IsReadOnly="True"
+                ItemsSource="{Binding GridData1}">
                 <DataGrid.Columns>
                     <DataGridTextColumn
                         Width="6*"
-                        x:DataType="local:Country"
-                        Binding="{Binding Name}"
-                        Header="Country or Region" />
+                        x:DataType="vm:Song"
+                        Binding="{Binding Title}"
+                        Header="Title" />
                     <DataGridTextColumn
-                        Width="4*"
-                        x:DataType="local:Country"
-                        Binding="{Binding Region}"
-                        Header="Region" />
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Artist}"
+                        Header="Artist" />
                     <DataGridTextColumn
-                        Width="3*"
-                        x:DataType="local:Country"
-                        Binding="{Binding Population}"
-                        DisplayIndex="3"
-                        Header="Population" />
-                    <DataGridTextColumn
-                        Width="3*"
-                        x:DataType="local:Country"
-                        Binding="{Binding Area}"
-                        DisplayIndex="2"
-                        Header="Area" />
-                    <DataGridTextColumn
-                        Width="3*"
-                        x:DataType="local:Country"
-                        Binding="{Binding GDP}"
-                        Header="GDP" />
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Album}"
+                        Header="Album" />
+                    <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate>
+                                <TextBlock
+                                    Margin="8,0,0,0"
+                                    VerticalAlignment="Center"
+                                    Text="{Binding Duration}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
+                </DataGrid.Columns>
+
+            </DataGrid>
+        </TabItem>
+        <TabItem Header="Grouping">
+            <DataGrid
+                Margin="8"
+                CanUserReorderColumns="True"
+                CanUserResizeColumns="True"
+                CanUserSortColumns="True"
+                HeadersVisibility="All"
+                IsReadOnly="True"
+                ItemsSource="{Binding GridData2}">
+                <DataGrid.Columns>
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Title}"
+                        Header="Title" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Artist}"
+                        Header="Artist" />
+                    <DataGridTextColumn
+                        Width="6*"
+                        x:DataType="vm:Song"
+                        Binding="{Binding Album}"
+                        Header="Album" />
+                    <DataGridTemplateColumn
+                        x:DataType="vm:Song"
+                        Header="Duration"
+                        SortMemberPath="Duration">
+                        <DataGridTemplateColumn.CellTemplate>
+                            <DataTemplate x:DataType="vm:Song">
+                                <TextBlock
+                                    Margin="8,0,0,0"
+                                    VerticalAlignment="Center"
+                                    Text="{Binding Duration}" />
+                            </DataTemplate>
+                        </DataGridTemplateColumn.CellTemplate>
+                    </DataGridTemplateColumn>
                 </DataGrid.Columns>
-                <DataGrid.RowTheme>
-                    <ControlTheme BasedOn="{StaticResource {x:Type DataGridRow}}" TargetType="DataGridRow">
-                        <ControlTheme.Children>
-                            <Style Selector="^:nth-child(5n+3)">
-                                <Setter Property="Foreground" Value="Red" />
-                            </Style>
-                            <Style Selector="^:nth-last-child(5n+1)">
-                                <Setter Property="Foreground" Value="Blue" />
-                            </Style>
-                        </ControlTheme.Children>
-                    </ControlTheme>
-                </DataGrid.RowTheme>
             </DataGrid>
         </TabItem>
         <TabItem x:Name="EditableTab" Header="Editable">
-            <Grid RowDefinitions="Auto,*,Auto">
+            <Grid Margin="8" RowDefinitions="Auto,*,Auto">
                 <StackPanel
                     Grid.Row="0"
                     Orientation="Horizontal"
@@ -138,35 +111,39 @@
                         Content="IsThreeState"
                         IsChecked="False" />
                 </StackPanel>
-                <!--  Example of columns inheriting the data type from the Items source  -->
                 <DataGrid
-                    Name="dataGridEdit"
                     Grid.Row="1"
-                    Margin="12"
-                    ItemsSource="{Binding DataGrid3Source}">
+                    Margin="8"
+                    ItemsSource="{Binding GridData3}">
                     <DataGrid.Columns>
-                        <DataGridTextColumn
-                            Width="2*"
-                            Binding="{Binding FirstName}"
-                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
-                            Header="First Name" />
-                        <DataGridTextColumn
-                            Width="2*"
-                            Binding="{Binding LastName}"
-                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
-                            Header="Last" />
                         <DataGridCheckBoxColumn
-                            Width="*"
-                            Binding="{Binding IsBanned}"
-                            Header="Is Banned"
+                            Width="2*"
+                            Binding="{Binding IsSelected}"
+                            Header="Select"
                             IsThreeState="{Binding #IsThreeStateCheckBox.IsChecked, Mode=OneWay}" />
-                        <DataGridTemplateColumn Header="Age">
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Title}"
+                            FontSize="{Binding #FontSizeSlider.Value, Mode=OneWay}"
+                            Header="Title" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Artist}"
+                            Header="Artist" />
+                        <DataGridTextColumn
+                            Width="6*"
+                            x:DataType="vm:SongViewModel"
+                            Binding="{Binding Album}"
+                            Header="Album" />
+                        <DataGridTemplateColumn Width="2*" Header="Comments">
                             <DataGridTemplateColumn.CellTemplate>
                                 <DataTemplate>
                                     <TextBlock
                                         HorizontalAlignment="Center"
                                         VerticalAlignment="Center"
-                                        Text="{Binding Age, StringFormat='{}{0} years'}" />
+                                        Text="{Binding CountOfComment}" />
                                 </DataTemplate>
                             </DataGridTemplateColumn.CellTemplate>
                             <DataGridTemplateColumn.CellEditingTemplate>
@@ -174,17 +151,14 @@
                                     <NumericUpDown
                                         HorizontalAlignment="Stretch"
                                         FormatString="N0"
-                                        Maximum="120"
                                         Minimum="0"
-                                        TemplateApplied="NumericUpDown_OnTemplateApplied"
-                                        Value="{Binding Age}" />
+                                        Value="{Binding CountOfComment}" />
                                 </DataTemplate>
                             </DataGridTemplateColumn.CellEditingTemplate>
                         </DataGridTemplateColumn>
                     </DataGrid.Columns>
                 </DataGrid>
                 <Button
-                    Name="btnAdd"
                     Grid.Row="2"
                     Margin="12,0,12,12"
                     HorizontalAlignment="Right"
diff --git a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs
index f6fd52d..7af3eb8 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs
@@ -13,6 +13,7 @@ using Avalonia.Input;
 using Avalonia.Input.Raw;
 using Avalonia.Markup.Xaml;
 using Avalonia.Threading;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -21,488 +22,6 @@ public partial class DataGridDemo : UserControl
     public DataGridDemo()
     {
         InitializeComponent();
-        var dataGridSortDescription = DataGridSortDescription.FromPath(nameof(Country.Region), ListSortDirection.Ascending, new ReversedStringComparer());
-        var collectionView1 = new DataGridCollectionView(Countries.All);
-        collectionView1.SortDescriptions.Add(dataGridSortDescription);
-        var dg1 = this.Get<DataGrid>("dataGrid1");
-        dg1.IsReadOnly = true;
-        dg1.LoadingRow += Dg1_LoadingRow;
-        dg1.Sorting += (s, a) =>
-        {
-            var binding = (a.Column as DataGridBoundColumn)?.Binding as Binding;
-
-            if (binding?.Path is string property
-                && property == dataGridSortDescription.PropertyPath
-                && !collectionView1.SortDescriptions.Contains(dataGridSortDescription))
-            {
-                collectionView1.SortDescriptions.Add(dataGridSortDescription);
-            }
-        };
-        dg1.ItemsSource = collectionView1;
-
-        var dg2 = this.Get<DataGrid>("dataGridGrouping");
-        dg2.IsReadOnly = true;
-
-        var collectionView2 = new DataGridCollectionView(Countries.All);
-        collectionView2.GroupDescriptions.Add(new DataGridPathGroupDescription("Region"));
-
-        dg2.ItemsSource = collectionView2;
-
-        var dg3 = this.Get<DataGrid>("dataGridEdit");
-        dg3.IsReadOnly = false;
-
-        var list = new ObservableCollection<Person>
-        {
-            new Person { FirstName = "John", LastName = "Doe" , Age = 30},
-            new Person { FirstName = "Elizabeth", LastName = "Thomas", IsBanned = true , Age = 40 },
-            new Person { FirstName = "Zack", LastName = "Ward" , Age = 50 }
-        };
-        DataGrid3Source = list;
-
-        var addButton = this.Get<Button>("btnAdd");
-        addButton.Click += (a, b) => list.Add(new Person());
-
-        DataContext = this;
-    }
-    
-    public IEnumerable<Person> DataGrid3Source { get; }
-        
-    private void Dg1_LoadingRow(object? sender, DataGridRowEventArgs e)
-    {
-        e.Row.Header = e.Row.GetIndex() + 1;
-    }
-
-    private void InitializeComponent()
-    {
-        AvaloniaXamlLoader.Load(this);
-    }
-
-    private class ReversedStringComparer : IComparer<object>, IComparer
-    {
-        public int Compare(object? x, object? y)
-        {
-            if (x is string left && y is string right)
-            {
-                var reversedLeft = new string(left.Reverse().ToArray());
-                var reversedRight = new string(right.Reverse().ToArray());
-                return reversedLeft.CompareTo(reversedRight);
-            }
-
-            return Comparer.Default.Compare(x, y);
-        }
-    }
-
-    private void NumericUpDown_OnTemplateApplied(object sender, TemplateAppliedEventArgs e)
-    {
-        // We want to focus the TextBox of the NumericUpDown. To do so we search for this control when the template
-        // is applied, but we postpone the action until the control is actually loaded. 
-        if (e.NameScope.Find<TextBox>("PART_TextBox") is {} textBox)
-        {
-            Dispatcher.UIThread.InvokeAsync(() =>
-            {
-                textBox.Focus();
-                textBox.SelectAll();
-            }, DispatcherPriority.Loaded);
-        }
-    }
-}
-
-public class Person : INotifyDataErrorInfo, INotifyPropertyChanged
-    {
-        string _firstName = string.Empty;
-        string _lastName = string.Empty;
-        bool _isBanned;
-        private int _age;
-
-        public string FirstName
-        {
-            get => _firstName;
-            set
-            {
-                _firstName = value;
-                if (string.IsNullOrWhiteSpace(value))
-                    SetError(nameof(FirstName), "First Name Required");
-                else
-                    SetError(nameof(FirstName), null);
-
-                OnPropertyChanged(nameof(FirstName));
-            }
-
-        }
-
-        public string LastName
-        {
-            get => _lastName;
-            set
-            {
-                _lastName = value;
-                if (string.IsNullOrWhiteSpace(value))
-                    SetError(nameof(LastName), "Last Name Required");
-                else
-                    SetError(nameof(LastName), null);
-
-                OnPropertyChanged(nameof(LastName));
-            }
-        }
-
-        public bool IsBanned
-        {
-            get => _isBanned;
-            set
-            {
-                _isBanned = value;
-
-                OnPropertyChanged(nameof(_isBanned));
-            }
-        }
-
-        
-        /// <summary>
-        ///    Gets or sets the age of the person
-        /// </summary>
-        public int Age
-        {
-            get => _age;
-            set
-            {
-                _age = value;
-                OnPropertyChanged(nameof(Age));
-            }
-        }
-
-        Dictionary<string, List<string>> _errorLookup = new Dictionary<string, List<string>>();
-
-        void SetError(string propertyName, string? error)
-        {
-            if (string.IsNullOrEmpty(error))
-            {
-                if (_errorLookup.Remove(propertyName))
-                    OnErrorsChanged(propertyName);
-            }
-            else
-            {
-                if (_errorLookup.TryGetValue(propertyName, out var errorList))
-                {
-                    errorList.Clear();
-                    errorList.Add(error!);
-                }
-                else
-                {
-                    var errors = new List<string> { error! };
-                    _errorLookup.Add(propertyName, errors);
-                }
-
-                OnErrorsChanged(propertyName);
-            }
-        }
-
-        public bool HasErrors => _errorLookup.Count > 0;
-
-        public event EventHandler<DataErrorsChangedEventArgs>? ErrorsChanged;
-        public event PropertyChangedEventHandler? PropertyChanged;
-
-        void OnErrorsChanged(string propertyName)
-        {
-            ErrorsChanged?.Invoke(this, new DataErrorsChangedEventArgs(propertyName));
-        }
-        void OnPropertyChanged(string propertyName)
-        {
-            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
-        }
-
-        public IEnumerable GetErrors(string? propertyName)
-        {
-            if (propertyName is { } && _errorLookup.TryGetValue(propertyName, out var errorList))
-                return errorList;
-            else
-                return Array.Empty<object>();
-        }
-    }
-    
-    public static class Countries
-    {
-        static IEnumerable<Country> GetCountries()
-        {
-            yield return new Country("Afghanistan", "ASIA (EX. NEAR EAST)", 31056997, 647500, 48, 0, 23.06, 163.07, 700, 36, 3.2, 46.6, 20.34);
-            yield return new Country("Albania", "EASTERN EUROPE", 3581655, 28748, 124.6, 1.26, -4.93, 21.52, 4500, 86.5, 71.2, 15.11, 5.22);
-            yield return new Country("Algeria", "NORTHERN AFRICA", 32930091, 2381740, 13.8, 0.04, -0.39, 31, 6000, 70, 78.1, 17.14, 4.61);
-            yield return new Country("American Samoa", "OCEANIA", 57794, 199, 290.4, 58.29, -20.71, 9.27, 8000, 97, 259.5, 22.46, 3.27);
-            yield return new Country("Andorra", "WESTERN EUROPE", 71201, 468, 152.1, 0, 6.6, 4.05, 19000, 100, 497.2, 8.71, 6.25);
-            yield return new Country("Angola", "SUB-SAHARAN AFRICA", 12127071, 1246700, 9.7, 0.13, 0, 191.19, 1900, 42, 7.8, 45.11, 24.2);
-            yield return new Country("Anguilla", "LATIN AMER. & CARIB", 13477, 102, 132.1, 59.8, 10.76, 21.03, 8600, 95, 460, 14.17, 5.34);
-            yield return new Country("Antigua & Barbuda", "LATIN AMER. & CARIB", 69108, 443, 156, 34.54, -6.15, 19.46, 11000, 89, 549.9, 16.93, 5.37);
-            yield return new Country("Argentina", "LATIN AMER. & CARIB", 39921833, 2766890, 14.4, 0.18, 0.61, 15.18, 11200, 97.1, 220.4, 16.73, 7.55);
-            yield return new Country("Armenia", "C.W. OF IND. STATES", 2976372, 29800, 99.9, 0, -6.47, 23.28, 3500, 98.6, 195.7, 12.07, 8.23);
-            yield return new Country("Aruba", "LATIN AMER. & CARIB", 71891, 193, 372.5, 35.49, 0, 5.89, 28000, 97, 516.1, 11.03, 6.68);
-            yield return new Country("Australia", "OCEANIA", 20264082, 7686850, 2.6, 0.34, 3.98, 4.69, 29000, 100, 565.5, 12.14, 7.51);
-            yield return new Country("Austria", "WESTERN EUROPE", 8192880, 83870, 97.7, 0, 2, 4.66, 30000, 98, 452.2, 8.74, 9.76);
-            yield return new Country("Azerbaijan", "C.W. OF IND. STATES", 7961619, 86600, 91.9, 0, -4.9, 81.74, 3400, 97, 137.1, 20.74, 9.75);
-            yield return new Country("The Bahamas", "LATIN AMER. & CARIB", 303770, 13940, 21.8, 25.41, -2.2, 25.21, 16700, 95.6, 460.6, 17.57, 9.05);
-            yield return new Country("Bahrain", "NEAR EAST", 698585, 665, 1050.5, 24.21, 1.05, 17.27, 16900, 89.1, 281.3, 17.8, 4.14);
-            yield return new Country("Bangladesh", "ASIA (EX. NEAR EAST)", 147365352, 144000, 1023.4, 0.4, -0.71, 62.6, 1900, 43.1, 7.3, 29.8, 8.27);
-            yield return new Country("Barbados", "LATIN AMER. & CARIB", 279912, 431, 649.5, 22.51, -0.31, 12.5, 15700, 97.4, 481.9, 12.71, 8.67);
-            yield return new Country("Belarus", "C.W. OF IND. STATES", 10293011, 207600, 49.6, 0, 2.54, 13.37, 6100, 99.6, 319.1, 11.16, 14.02);
-            yield return new Country("Belgium", "WESTERN EUROPE", 10379067, 30528, 340, 0.22, 1.23, 4.68, 29100, 98, 462.6, 10.38, 10.27);
-            yield return new Country("Belize", "LATIN AMER. & CARIB", 287730, 22966, 12.5, 1.68, 0, 25.69, 4900, 94.1, 115.7, 28.84, 5.72);
-            yield return new Country("Benin", "SUB-SAHARAN AFRICA", 7862944, 112620, 69.8, 0.11, 0, 85, 1100, 40.9, 9.7, 38.85, 12.22);
-            yield return new Country("Bermuda", "NORTHERN AMERICA", 65773, 53, 1241, 194.34, 2.49, 8.53, 36000, 98, 851.4, 11.4, 7.74);
-            yield return new Country("Bhutan", "ASIA (EX. NEAR EAST)", 2279723, 47000, 48.5, 0, 0, 100.44, 1300, 42.2, 14.3, 33.65, 12.7);
-            yield return new Country("Bolivia", "LATIN AMER. & CARIB", 8989046, 1098580, 8.2, 0, -1.32, 53.11, 2400, 87.2, 71.9, 23.3, 7.53);
-            yield return new Country("Bosnia & Herzegovina", "EASTERN EUROPE", 4498976, 51129, 88, 0.04, 0.31, 21.05, 6100,null, 215.4, 8.77, 8.27);
-            yield return new Country("Botswana", "SUB-SAHARAN AFRICA", 1639833, 600370, 2.7, 0, 0, 54.58, 9000, 79.8, 80.5, 23.08, 29.5);
-            yield return new Country("Brazil", "LATIN AMER. & CARIB", 188078227, 8511965, 22.1, 0.09, -0.03, 29.61, 7600, 86.4, 225.3, 16.56, 6.17);
-            yield return new Country("British Virgin Is.", "LATIN AMER. & CARIB", 23098, 153, 151, 52.29, 10.01, 18.05, 16000, 97.8, 506.5, 14.89, 4.42);
-            yield return new Country("Brunei", "ASIA (EX. NEAR EAST)", 379444, 5770, 65.8, 2.79, 3.59, 12.61, 18600, 93.9, 237.2, 18.79, 3.45);
-            yield return new Country("Bulgaria", "EASTERN EUROPE", 7385367, 110910, 66.6, 0.32, -4.58, 20.55, 7600, 98.6, 336.3, 9.65, 14.27);
-            yield return new Country("Burkina Faso", "SUB-SAHARAN AFRICA", 13902972, 274200, 50.7, 0, 0, 97.57, 1100, 26.6, 7, 45.62, 15.6);
-            yield return new Country("Burma", "ASIA (EX. NEAR EAST)", 47382633, 678500, 69.8, 0.28, -1.8, 67.24, 1800, 85.3, 10.1, 17.91, 9.83);
-            yield return new Country("Burundi", "SUB-SAHARAN AFRICA", 8090068, 27830, 290.7, 0, -0.06, 69.29, 600, 51.6, 3.4, 42.22, 13.46);
-            yield return new Country("Cambodia", "ASIA (EX. NEAR EAST)", 13881427, 181040, 76.7, 0.24, 0, 71.48, 1900, 69.4, 2.6, 26.9, 9.06);
-            yield return new Country("Cameroon", "SUB-SAHARAN AFRICA", 17340702, 475440, 36.5, 0.08, 0, 68.26, 1800, 79, 5.7, 33.89, 13.47);
-            yield return new Country("Canada", "NORTHERN AMERICA", 33098932, 9984670, 3.3, 2.02, 5.96, 4.75, 29800, 97, 552.2, 10.78, 7.8);
-            yield return new Country("Cape Verde", "SUB-SAHARAN AFRICA", 420979, 4033, 104.4, 23.93, -12.07, 47.77, 1400, 76.6, 169.6, 24.87, 6.55);
-            yield return new Country("Cayman Islands", "LATIN AMER. & CARIB", 45436, 262, 173.4, 61.07, 18.75, 8.19, 35000, 98, 836.3, 12.74, 4.89);
-            yield return new Country("Central African Rep.", "SUB-SAHARAN AFRICA", 4303356, 622984, 6.9, 0, 0, 91, 1100, 51, 2.3, 33.91, 18.65);
-            yield return new Country("Chad", "SUB-SAHARAN AFRICA", 9944201, 1284000, 7.7, 0, -0.11, 93.82, 1200, 47.5, 1.3, 45.73, 16.38);
-            yield return new Country("Chile", "LATIN AMER. & CARIB", 16134219, 756950, 21.3, 0.85, 0, 8.8, 9900, 96.2, 213, 15.23, 5.81);
-            yield return new Country("China", "ASIA (EX. NEAR EAST)", 1313973713, 9596960, 136.9, 0.15, -0.4, 24.18, 5000, 90.9, 266.7, 13.25, 6.97);
-            yield return new Country("Colombia", "LATIN AMER. & CARIB", 43593035, 1138910, 38.3, 0.28, -0.31, 20.97, 6300, 92.5, 176.2, 20.48, 5.58);
-            yield return new Country("Comoros", "SUB-SAHARAN AFRICA", 690948, 2170, 318.4, 15.67, 0, 74.93, 700, 56.5, 24.5, 36.93, 8.2);
-            yield return new Country("Congo, Dem.Rep.", "SUB - SAHARAN AFRICA", 62660551, 2345410, 26.7, 0, 0, 94.69, 700, 65.5, 0.2, 43.69, 13.27);
-            yield return new Country("Congo, Repub.of the", "SUB - SAHARAN AFRICA", 3702314, 342000, 10.8, 0.05, -0.17, 93.86, 700, 83.8, 3.7, 42.57, 12.93);
-            yield return new Country("Cook Islands", "OCEANIA", 21388, 240, 89.1, 50,null,null, 5000, 95, 289.9, 21,null);
-            yield return new Country("Costa Rica", "LATIN AMER. & CARIB", 4075261, 51100, 79.8, 2.52, 0.51, 9.95, 9100, 96, 340.7, 18.32, 4.36);
-            yield return new Country("Cote d'Ivoire", "SUB-SAHARAN AFRICA", 17654843, 322460, 54.8, 0.16, -0.07, 90.83, 1400, 50.9, 14.6, 35.11, 14.84);
-            yield return new Country("Croatia", "EASTERN EUROPE", 4494749, 56542, 79.5, 10.32, 1.58, 6.84, 10600, 98.5, 420.4, 9.61, 11.48);
-            yield return new Country("Cuba", "LATIN AMER. & CARIB", 11382820, 110860, 102.7, 3.37, -1.58, 6.33, 2900, 97, 74.7, 11.89, 7.22);
-            yield return new Country("Cyprus", "NEAR EAST", 784301, 9250, 84.8, 7.01, 0.43, 7.18, 19200, 97.6,null, 12.56, 7.68);
-            yield return new Country("Czech Republic", "EASTERN EUROPE", 10235455, 78866, 129.8, 0, 0.97, 3.93, 15700, 99.9, 314.3, 9.02, 10.59);
-            yield return new Country("Denmark", "WESTERN EUROPE", 5450661, 43094, 126.5, 16.97, 2.48, 4.56, 31100, 100, 614.6, 11.13, 10.36);
-            yield return new Country("Djibouti", "SUB-SAHARAN AFRICA", 486530, 23000, 21.2, 1.37, 0, 104.13, 1300, 67.9, 22.8, 39.53, 19.31);
-            yield return new Country("Dominica", "LATIN AMER. & CARIB", 68910, 754, 91.4, 19.63, -13.87, 14.15, 5400, 94, 304.8, 15.27, 6.73);
-            yield return new Country("Dominican Republic", "LATIN AMER. & CARIB", 9183984, 48730, 188.5, 2.64, -3.22, 32.38, 6000, 84.7, 97.4, 23.22, 5.73);
-            yield return new Country("East Timor", "ASIA (EX. NEAR EAST)", 1062777, 15007, 70.8, 4.7, 0, 47.41, 500, 58.6,null, 26.99, 6.24);
-            yield return new Country("Ecuador", "LATIN AMER. & CARIB", 13547510, 283560, 47.8, 0.79, -8.58, 23.66, 3300, 92.5, 125.6, 22.29, 4.23);
-            yield return new Country("Egypt", "NORTHERN AFRICA", 78887007, 1001450, 78.8, 0.24, -0.22, 32.59, 4000, 57.7, 131.8, 22.94, 5.23);
-            yield return new Country("El Salvador", "LATIN AMER. & CARIB", 6822378, 21040, 324.3, 1.46, -3.74, 25.1, 4800, 80.2, 142.4, 26.61, 5.78);
-            yield return new Country("Equatorial Guinea", "SUB-SAHARAN AFRICA", 540109, 28051, 19.3, 1.06, 0, 85.13, 2700, 85.7, 18.5, 35.59, 15.06);
-            yield return new Country("Eritrea", "SUB-SAHARAN AFRICA", 4786994, 121320, 39.5, 1.84, 0, 74.87, 700, 58.6, 7.9, 34.33, 9.6);
-            yield return new Country("Estonia", "BALTICS", 1324333, 45226, 29.3, 8.39, -3.16, 7.87, 12300, 99.8, 333.8, 10.04, 13.25);
-            yield return new Country("Ethiopia", "SUB-SAHARAN AFRICA", 74777981, 1127127, 66.3, 0, 0, 95.32, 700, 42.7, 8.2, 37.98, 14.86);
-            yield return new Country("Faroe Islands", "WESTERN EUROPE", 47246, 1399, 33.8, 79.84, 1.41, 6.24, 22000,null, 503.8, 14.05, 8.7);
-            yield return new Country("Fiji", "OCEANIA", 905949, 18270, 49.6, 6.18, -3.14, 12.62, 5800, 93.7, 112.6, 22.55, 5.65);
-            yield return new Country("Finland", "WESTERN EUROPE", 5231372, 338145, 15.5, 0.37, 0.95, 3.57, 27400, 100, 405.3, 10.45, 9.86);
-            yield return new Country("France", "WESTERN EUROPE", 60876136, 547030, 111.3, 0.63, 0.66, 4.26, 27600, 99, 586.4, 11.99, 9.14);
-            yield return new Country("French Guiana", "LATIN AMER. & CARIB", 199509, 91000, 2.2, 0.42, 6.27, 12.07, 8300, 83, 255.6, 20.46, 4.88);
-            yield return new Country("French Polynesia", "OCEANIA", 274578, 4167, 65.9, 60.6, 2.94, 8.44, 17500, 98, 194.5, 16.68, 4.69);
-            yield return new Country("Gabon", "SUB-SAHARAN AFRICA", 1424906, 267667, 5.3, 0.33, 0, 53.64, 5500, 63.2, 27.4, 36.16, 12.25);
-            yield return new Country("Gambia, The", "SUB - SAHARAN AFRICA", 1641564, 11300, 145.3, 0.71, 1.57, 72.02, 1700, 40.1, 26.8, 39.37, 12.25);
-            yield return new Country("Gaza Strip", "NEAR EAST", 1428757, 360, 3968.8, 11.11, 1.6, 22.93, 600,null, 244.3, 39.45, 3.8);
-            yield return new Country("Georgia", "C.W. OF IND. STATES", 4661473, 69700, 66.9, 0.44, -4.7, 18.59, 2500, 99, 146.6, 10.41, 9.23);
-            yield return new Country("Germany", "WESTERN EUROPE", 82422299, 357021, 230.9, 0.67, 2.18, 4.16, 27600, 99, 667.9, 8.25, 10.62);
-            yield return new Country("Ghana", "SUB-SAHARAN AFRICA", 22409572, 239460, 93.6, 0.23, -0.64, 51.43, 2200, 74.8, 14.4, 30.52, 9.72);
-            yield return new Country("Gibraltar", "WESTERN EUROPE", 27928, 7, 3989.7, 171.43, 0, 5.13, 17500,null, 877.7, 10.74, 9.31);
-            yield return new Country("Greece", "WESTERN EUROPE", 10688058, 131940, 81, 10.37, 2.35, 5.53, 20000, 97.5, 589.7, 9.68, 10.24);
-            yield return new Country("Greenland", "NORTHERN AMERICA", 56361, 2166086, 0, 2.04, -8.37, 15.82, 20000,null, 448.9, 15.93, 7.84);
-            yield return new Country("Grenada", "LATIN AMER. & CARIB", 89703, 344, 260.8, 35.17, -13.92, 14.62, 5000, 98, 364.5, 22.08, 6.88);
-            yield return new Country("Guadeloupe", "LATIN AMER. & CARIB", 452776, 1780, 254.4, 17.19, -0.15, 8.6, 8000, 90, 463.8, 15.05, 6.09);
-            yield return new Country("Guam", "OCEANIA", 171019, 541, 316.1, 23.2, 0, 6.94, 21000, 99, 492, 18.79, 4.48);
-            yield return new Country("Guatemala", "LATIN AMER. & CARIB", 12293545, 108890, 112.9, 0.37, -1.67, 35.93, 4100, 70.6, 92.1, 29.88, 5.2);
-            yield return new Country("Guernsey", "WESTERN EUROPE", 65409, 78, 838.6, 64.1, 3.84, 4.71, 20000,null, 842.4, 8.81, 10.01);
-            yield return new Country("Guinea", "SUB-SAHARAN AFRICA", 9690222, 245857, 39.4, 0.13, -3.06, 90.37, 2100, 35.9, 2.7, 41.76, 15.48);
-            yield return new Country("Guinea-Bissau", "SUB-SAHARAN AFRICA", 1442029, 36120, 39.9, 0.97, -1.57, 107.17, 800, 42.4, 7.4, 37.22, 16.53);
-            yield return new Country("Guyana", "LATIN AMER. & CARIB", 767245, 214970, 3.6, 0.21, -2.07, 33.26, 4000, 98.8, 143.5, 18.28, 8.28);
-            yield return new Country("Haiti", "LATIN AMER. & CARIB", 8308504, 27750, 299.4, 6.38, -3.4, 73.45, 1600, 52.9, 16.9, 36.44, 12.17);
-            yield return new Country("Honduras", "LATIN AMER. & CARIB", 7326496, 112090, 65.4, 0.73, -1.99, 29.32, 2600, 76.2, 67.5, 28.24, 5.28);
-            yield return new Country("Hong Kong", "ASIA (EX. NEAR EAST)", 6940432, 1092, 6355.7, 67.12, 5.24, 2.97, 28800, 93.5, 546.7, 7.29, 6.29);
-            yield return new Country("Hungary", "EASTERN EUROPE", 9981334, 93030, 107.3, 0, 0.86, 8.57, 13900, 99.4, 336.2, 9.72, 13.11);
-            yield return new Country("Iceland", "WESTERN EUROPE", 299388, 103000, 2.9, 4.83, 2.38, 3.31, 30900, 99.9, 647.7, 13.64, 6.72);
-            yield return new Country("India", "ASIA (EX. NEAR EAST)", 1095351995, 3287590, 333.2, 0.21, -0.07, 56.29, 2900, 59.5, 45.4, 22.01, 8.18);
-            yield return new Country("Indonesia", "ASIA (EX. NEAR EAST)", 245452739, 1919440, 127.9, 2.85, 0, 35.6, 3200, 87.9, 52, 20.34, 6.25);
-            yield return new Country("Iran", "ASIA (EX. NEAR EAST)", 68688433, 1648000, 41.7, 0.15, -0.84, 41.58, 7000, 79.4, 276.4, 17, 5.55);
-            yield return new Country("Iraq", "NEAR EAST", 26783383, 437072, 61.3, 0.01, 0, 50.25, 1500, 40.4, 38.6, 31.98, 5.37);
-            yield return new Country("Ireland", "WESTERN EUROPE", 4062235, 70280, 57.8, 2.06, 4.99, 5.39, 29600, 98, 500.5, 14.45, 7.82);
-            yield return new Country("Isle of Man", "WESTERN EUROPE", 75441, 572, 131.9, 27.97, 5.36, 5.93, 21000,null, 676, 11.05, 11.19);
-            yield return new Country("Israel", "NEAR EAST", 6352117, 20770, 305.8, 1.31, 0.68, 7.03, 19800, 95.4, 462.3, 17.97, 6.18);
-            yield return new Country("Italy", "WESTERN EUROPE", 58133509, 301230, 193, 2.52, 2.07, 5.94, 26700, 98.6, 430.9, 8.72, 10.4);
-            yield return new Country("Jamaica", "LATIN AMER. & CARIB", 2758124, 10991, 250.9, 9.3, -4.92, 12.36, 3900, 87.9, 124, 20.82, 6.52);
-            yield return new Country("Japan", "ASIA (EX. NEAR EAST)", 127463611, 377835, 337.4, 7.87, 0, 3.26, 28200, 99, 461.2, 9.37, 9.16);
-            yield return new Country("Jersey", "WESTERN EUROPE", 91084, 116, 785.2, 60.34, 2.76, 5.24, 24800,null, 811.3, 9.3, 9.28);
-            yield return new Country("Jordan", "NEAR EAST", 5906760, 92300, 64, 0.03, 6.59, 17.35, 4300, 91.3, 104.5, 21.25, 2.65);
-            yield return new Country("Kazakhstan", "C.W. OF IND. STATES", 15233244, 2717300, 5.6, 0, -3.35, 29.21, 6300, 98.4, 164.1, 16, 9.42);
-            yield return new Country("Kenya", "SUB-SAHARAN AFRICA", 34707817, 582650, 59.6, 0.09, -0.1, 61.47, 1000, 85.1, 8.1, 39.72, 14.02);
-            yield return new Country("Kiribati", "OCEANIA", 105432, 811, 130, 140.94, 0, 48.52, 800,null, 42.7, 30.65, 8.26);
-            yield return new Country("North Korea", "ASIA(EX.NEAR EAST)", 23113019, 120540, 191.8, 2.07, 0, 24.04, 1300, 99, 42.4, 15.54, 7.13);
-            yield return new Country("South Korea", "ASIA(EX.NEAR EAST)", 48846823, 98480, 496, 2.45, 0, 7.05, 17800, 97.9, 486.1, 10, 5.85);
-            yield return new Country("Kuwait", "NEAR EAST", 2418393, 17820, 135.7, 2.8, 14.18, 9.95, 19000, 83.5, 211, 21.94, 2.41);
-            yield return new Country("Kyrgyzstan", "C.W. OF IND. STATES", 5213898, 198500, 26.3, 0, -2.45, 35.64, 1600, 97, 84, 22.8, 7.08);
-            yield return new Country("Laos", "ASIA (EX. NEAR EAST)", 6368481, 236800, 26.9, 0, 0, 85.22, 1700, 66.4, 14.1, 35.49, 11.55);
-            yield return new Country("Latvia", "BALTICS", 2274735, 64589, 35.2, 0.82, -2.23, 9.55, 10200, 99.8, 321.4, 9.24, 13.66);
-            yield return new Country("Lebanon", "NEAR EAST", 3874050, 10400, 372.5, 2.16, 0, 24.52, 4800, 87.4, 255.6, 18.52, 6.21);
-            yield return new Country("Lesotho", "SUB-SAHARAN AFRICA", 2022331, 30355, 66.6, 0, -0.74, 84.23, 3000, 84.8, 23.7, 24.75, 28.71);
-            yield return new Country("Liberia", "SUB-SAHARAN AFRICA", 3042004, 111370, 27.3, 0.52, 0, 128.87, 1000, 57.5, 2.3, 44.77, 23.1);
-            yield return new Country("Libya", "NORTHERN AFRICA", 5900754, 1759540, 3.4, 0.1, 0, 24.6, 6400, 82.6, 127.1, 26.49, 3.48);
-            yield return new Country("Liechtenstein", "WESTERN EUROPE", 33987, 160, 212.4, 0, 4.85, 4.7, 25000, 100, 585.5, 10.21, 7.18);
-            yield return new Country("Lithuania", "BALTICS", 3585906, 65200, 55, 0.14, -0.71, 6.89, 11400, 99.6, 223.4, 8.75, 10.98);
-            yield return new Country("Luxembourg", "WESTERN EUROPE", 474413, 2586, 183.5, 0, 8.97, 4.81, 55100, 100, 515.4, 11.94, 8.41);
-            yield return new Country("Macau", "ASIA (EX. NEAR EAST)", 453125, 28, 16183, 146.43, 4.86, 4.39, 19400, 94.5, 384.9, 8.48, 4.47);
-            yield return new Country("Macedonia", "EASTERN EUROPE", 2050554, 25333, 80.9, 0, -1.45, 10.09, 6700,null, 260, 12.02, 8.77);
-            yield return new Country("Madagascar", "SUB-SAHARAN AFRICA", 18595469, 587040, 31.7, 0.82, 0, 76.83, 800, 68.9, 3.6, 41.41, 11.11);
-            yield return new Country("Malawi", "SUB-SAHARAN AFRICA", 13013926, 118480, 109.8, 0, 0, 103.32, 600, 62.7, 7.9, 43.13, 19.33);
-            yield return new Country("Malaysia", "ASIA (EX. NEAR EAST)", 24385858, 329750, 74, 1.42, 0, 17.7, 9000, 88.7, 179, 22.86, 5.05);
-            yield return new Country("Maldives", "ASIA (EX. NEAR EAST)", 359008, 300, 1196.7, 214.67, 0, 56.52, 3900, 97.2, 90, 34.81, 7.06);
-            yield return new Country("Mali", "SUB-SAHARAN AFRICA", 11716829, 1240000, 9.5, 0, -0.33, 116.79, 900, 46.4, 6.4, 49.82, 16.89);
-            yield return new Country("Malta", "WESTERN EUROPE", 400214, 316, 1266.5, 62.28, 2.07, 3.89, 17700, 92.8, 505, 10.22, 8.1);
-            yield return new Country("Marshall Islands", "OCEANIA", 60422, 11854, 5.1, 3.12, -6.04, 29.45, 1600, 93.7, 91.2, 33.05, 4.78);
-            yield return new Country("Martinique", "LATIN AMER. & CARIB", 436131, 1100, 396.5, 31.82, -0.05, 7.09, 14400, 97.7, 394.4, 13.74, 6.48);
-            yield return new Country("Mauritania", "SUB-SAHARAN AFRICA", 3177388, 1030700, 3.1, 0.07, 0, 70.89, 1800, 41.7, 12.9, 40.99, 12.16);
-            yield return new Country("Mauritius", "SUB-SAHARAN AFRICA", 1240827, 2040, 608.3, 8.68, -0.9, 15.03, 11400, 85.6, 289.3, 15.43, 6.86);
-            yield return new Country("Mayotte", "SUB-SAHARAN AFRICA", 201234, 374, 538.1, 49.52, 6.78, 62.4, 2600,null, 49.7, 40.95, 7.7);
-            yield return new Country("Mexico", "LATIN AMER. & CARIB", 107449525, 1972550, 54.5, 0.47, -4.87, 20.91, 9000, 92.2, 181.6, 20.69, 4.74);
-            yield return new Country("Micronesia, Fed.St.", "OCEANIA", 108004, 702, 153.9, 870.66, -20.99, 30.21, 2000, 89, 114.8, 24.68, 4.75);
-            yield return new Country("Moldova", "C.W. OF IND. STATES", 4466706, 33843, 132, 0, -0.26, 40.42, 1800, 99.1, 208.1, 15.7, 12.64);
-            yield return new Country("Monaco", "WESTERN EUROPE", 32543, 2, 16271.5, 205, 7.75, 5.43, 27000, 99, 1035.6, 9.19, 12.91);
-            yield return new Country("Mongolia", "ASIA (EX. NEAR EAST)", 2832224, 1564116, 1.8, 0, 0, 53.79, 1800, 97.8, 55.1, 21.59, 6.95);
-            yield return new Country("Montserrat", "LATIN AMER. & CARIB", 9439, 102, 92.5, 39.22, 0, 7.35, 3400, 97,null, 17.59, 7.1);
-            yield return new Country("Morocco", "NORTHERN AFRICA", 33241259, 446550, 74.4, 0.41, -0.98, 41.62, 4000, 51.7, 40.4, 21.98, 5.58);
-            yield return new Country("Mozambique", "SUB-SAHARAN AFRICA", 19686505, 801590, 24.6, 0.31, 0, 130.79, 1200, 47.8, 3.5, 35.18, 21.35);
-            yield return new Country("Namibia", "SUB-SAHARAN AFRICA", 2044147, 825418, 2.5, 0.19, 0, 48.98, 7200, 84, 62.6, 24.32, 18.86);
-            yield return new Country("Nauru", "OCEANIA", 13287, 21, 632.7, 142.86, 0, 9.95, 5000,null, 143, 24.76, 6.7);
-            yield return new Country("Nepal", "ASIA (EX. NEAR EAST)", 28287147, 147181, 192.2, 0, 0, 66.98, 1400, 45.2, 15.9, 30.98, 9.31);
-            yield return new Country("Netherlands", "WESTERN EUROPE", 16491461, 41526, 397.1, 1.09, 2.91, 5.04, 28600, 99, 460.8, 10.9, 8.68);
-            yield return new Country("Netherlands Antilles", "LATIN AMER. & CARIB", 221736, 960, 231, 37.92, -0.41, 10.03, 11400, 96.7, 365.3, 14.78, 6.45);
-            yield return new Country("New Caledonia", "OCEANIA", 219246, 19060, 11.5, 11.83, 0, 7.72, 15000, 91, 252.2, 18.11, 5.69);
-            yield return new Country("New Zealand", "OCEANIA", 4076140, 268680, 15.2, 5.63, 4.05, 5.85, 21600, 99, 441.7, 13.76, 7.53);
-            yield return new Country("Nicaragua", "LATIN AMER. & CARIB", 5570129, 129494, 43, 0.7, -1.22, 29.11, 2300, 67.5, 39.7, 24.51, 4.45);
-            yield return new Country("Niger", "SUB-SAHARAN AFRICA", 12525094, 1267000, 9.9, 0, -0.67, 121.69, 800, 17.6, 1.9, 50.73, 20.91);
-            yield return new Country("Nigeria", "SUB-SAHARAN AFRICA", 131859731, 923768, 142.7, 0.09, 0.26, 98.8, 900, 68, 9.3, 40.43, 16.94);
-            yield return new Country("N. Mariana Islands", "OCEANIA", 82459, 477, 172.9, 310.69, 9.61, 7.11, 12500, 97, 254.7, 19.43, 2.29);
-            yield return new Country("Norway", "WESTERN EUROPE", 4610820, 323802, 14.2, 7.77, 1.74, 3.7, 37800, 100, 461.7, 11.46, 9.4);
-            yield return new Country("Oman", "NEAR EAST", 3102229, 212460, 14.6, 0.98, 0.28, 19.51, 13100, 75.8, 85.5, 36.24, 3.81);
-            yield return new Country("Pakistan", "ASIA (EX. NEAR EAST)", 165803560, 803940, 206.2, 0.13, -2.77, 72.44, 2100, 45.7, 31.8, 29.74, 8.23);
-            yield return new Country("Palau", "OCEANIA", 20579, 458, 44.9, 331.66, 2.85, 14.84, 9000, 92, 325.6, 18.03, 6.8);
-            yield return new Country("Panama", "LATIN AMER. & CARIB", 3191319, 78200, 40.8, 3.18, -0.91, 20.47, 6300, 92.6, 137.9, 21.74, 5.36);
-            yield return new Country("Papua New Guinea", "OCEANIA", 5670544, 462840, 12.3, 1.11, 0, 51.45, 2200, 64.6, 10.9, 29.36, 7.25);
-            yield return new Country("Paraguay", "LATIN AMER. & CARIB", 6506464, 406750, 16, 0, -0.08, 25.63, 4700, 94, 49.2, 29.1, 4.49);
-            yield return new Country("Peru", "LATIN AMER. & CARIB", 28302603, 1285220, 22, 0.19, -1.05, 31.94, 5100, 90.9, 79.5, 20.48, 6.23);
-            yield return new Country("Philippines", "ASIA (EX. NEAR EAST)", 89468677, 300000, 298.2, 12.1, -1.5, 23.51, 4600, 92.6, 38.4, 24.89, 5.41);
-            yield return new Country("Poland", "EASTERN EUROPE", 38536869, 312685, 123.3, 0.16, -0.49, 8.51, 11100, 99.8, 306.3, 9.85, 9.89);
-            yield return new Country("Portugal", "WESTERN EUROPE", 10605870, 92391, 114.8, 1.94, 3.57, 5.05, 18000, 93.3, 399.2, 10.72, 10.5);
-            yield return new Country("Puerto Rico", "LATIN AMER. & CARIB", 3927188, 13790, 284.8, 3.63, -1.46, 8.24, 16800, 94.1, 283.1, 12.77, 7.65);
-            yield return new Country("Qatar", "NEAR EAST", 885359, 11437, 77.4, 4.92, 16.29, 18.61, 21500, 82.5, 232, 15.56, 4.72);
-            yield return new Country("Reunion", "SUB-SAHARAN AFRICA", 787584, 2517, 312.9, 8.22, 0, 7.78, 5800, 88.9, 380.9, 18.9, 5.49);
-            yield return new Country("Romania", "EASTERN EUROPE", 22303552, 237500, 93.9, 0.09, -0.13, 26.43, 7000, 98.4, 196.9, 10.7, 11.77);
-            yield return new Country("Russia", "C.W. OF IND. STATES", 142893540, 17075200, 8.4, 0.22, 1.02, 15.39, 8900, 99.6, 280.6, 9.95, 14.65);
-            yield return new Country("Rwanda", "SUB-SAHARAN AFRICA", 8648248, 26338, 328.4, 0, 0, 91.23, 1300, 70.4, 2.7, 40.37, 16.09);
-            yield return new Country("Saint Helena", "SUB-SAHARAN AFRICA", 7502, 413, 18.2, 14.53, 0, 19, 2500, 97, 293.3, 12.13, 6.53);
-            yield return new Country("Saint Kitts & Nevis", "LATIN AMER. & CARIB", 39129, 261, 149.9, 51.72, -7.11, 14.49, 8800, 97, 638.9, 18.02, 8.33);
-            yield return new Country("Saint Lucia", "LATIN AMER. & CARIB", 168458, 616, 273.5, 25.65, -2.67, 13.53, 5400, 67, 303.3, 19.68, 5.08);
-            yield return new Country("St Pierre & Miquelon", "NORTHERN AMERICA", 7026, 242, 29, 49.59, -4.86, 7.54, 6900, 99, 683.2, 13.52, 6.83);
-            yield return new Country("Saint Vincent and the Grenadines", "LATIN AMER. & CARIB", 117848, 389, 303, 21.59, -7.64, 14.78, 2900, 96, 190.9, 16.18, 5.98);
-            yield return new Country("Samoa", "OCEANIA", 176908, 2944, 60.1, 13.69, -11.7, 27.71, 5600, 99.7, 75.2, 16.43, 6.62);
-            yield return new Country("San Marino", "WESTERN EUROPE", 29251, 61, 479.5, 0, 10.98, 5.73, 34600, 96, 704.3, 10.02, 8.17);
-            yield return new Country("Sao Tome & Principe", "SUB-SAHARAN AFRICA", 193413, 1001, 193.2, 20.88, -2.72, 43.11, 1200, 79.3, 36.2, 40.25, 6.47);
-            yield return new Country("Saudi Arabia", "NEAR EAST", 27019731, 1960582, 13.8, 0.13, -2.71, 13.24, 11800, 78.8, 140.6, 29.34, 2.58);
-            yield return new Country("Senegal", "SUB-SAHARAN AFRICA", 11987121, 196190, 61.1, 0.27, 0.2, 55.51, 1600, 40.2, 22.2, 32.78, 9.42);
-            yield return new Country("Serbia", "EASTERN EUROPE", 9396411, 88361, 106.3, 0, -1.33, 12.89, 2200, 93, 285.8,null,null);
-            yield return new Country("Seychelles", "SUB-SAHARAN AFRICA", 81541, 455, 179.2, 107.91, -5.69, 15.53, 7800, 58, 262.4, 16.03, 6.29);
-            yield return new Country("Sierra Leone", "SUB-SAHARAN AFRICA", 6005250, 71740, 83.7, 0.56, 0, 143.64, 500, 31.4, 4, 45.76, 23.03);
-            yield return new Country("Singapore", "ASIA (EX. NEAR EAST)", 4492150, 693, 6482.2, 27.85, 11.53, 2.29, 23700, 92.5, 411.4, 9.34, 4.28);
-            yield return new Country("Slovakia", "EASTERN EUROPE", 5439448, 48845, 111.4, 0, 0.3, 7.41, 13300,null, 220.1, 10.65, 9.45);
-            yield return new Country("Slovenia", "EASTERN EUROPE", 2010347, 20273, 99.2, 0.23, 1.12, 4.45, 19000, 99.7, 406.1, 8.98, 10.31);
-            yield return new Country("Solomon Islands", "OCEANIA", 552438, 28450, 19.4, 18.67, 0, 21.29, 1700,null, 13.4, 30.01, 3.92);
-            yield return new Country("Somalia", "SUB-SAHARAN AFRICA", 8863338, 637657, 13.9, 0.47, 5.37, 116.7, 500, 37.8, 11.3, 45.13, 16.63);
-            yield return new Country("South Africa", "SUB-SAHARAN AFRICA", 44187637, 1219912, 36.2, 0.23, -0.29, 61.81, 10700, 86.4, 107, 18.2, 22);
-            yield return new Country("Spain", "WESTERN EUROPE", 40397842, 504782, 80, 0.98, 0.99, 4.42, 22000, 97.9, 453.5, 10.06, 9.72);
-            yield return new Country("Sri Lanka", "ASIA (EX. NEAR EAST)", 20222240, 65610, 308.2, 2.04, -1.31, 14.35, 3700, 92.3, 61.5, 15.51, 6.52);
-            yield return new Country("Sudan", "SUB-SAHARAN AFRICA", 41236378, 2505810, 16.5, 0.03, -0.02, 62.5, 1900, 61.1, 16.3, 34.53, 8.97);
-            yield return new Country("Suriname", "LATIN AMER. & CARIB", 439117, 163270, 2.7, 0.24, -8.81, 23.57, 4000, 93, 184.7, 18.02, 7.27);
-            yield return new Country("Swaziland", "SUB-SAHARAN AFRICA", 1136334, 17363, 65.5, 0, 0, 69.27, 4900, 81.6, 30.8, 27.41, 29.74);
-            yield return new Country("Sweden", "WESTERN EUROPE", 9016596, 449964, 20, 0.72, 1.67, 2.77, 26800, 99, 715, 10.27, 10.31);
-            yield return new Country("Switzerland", "WESTERN EUROPE", 7523934, 41290, 182.2, 0, 4.05, 4.39, 32700, 99, 680.9, 9.71, 8.49);
-            yield return new Country("Syria", "NEAR EAST", 18881361, 185180, 102, 0.1, 0, 29.53, 3300, 76.9, 153.8, 27.76, 4.81);
-            yield return new Country("Taiwan", "ASIA (EX. NEAR EAST)", 23036087, 35980, 640.3, 4.35, 0, 6.4, 23400, 96.1, 591, 12.56, 6.48);
-            yield return new Country("Tajikistan", "C.W. OF IND. STATES", 7320815, 143100, 51.2, 0, -2.86, 110.76, 1000, 99.4, 33.5, 32.65, 8.25);
-            yield return new Country("Tanzania", "SUB-SAHARAN AFRICA", 37445392, 945087, 39.6, 0.15, -2.06, 98.54, 600, 78.2, 4, 37.71, 16.39);
-            yield return new Country("Thailand", "ASIA (EX. NEAR EAST)", 64631595, 514000, 125.7, 0.63, 0, 20.48, 7400, 92.6, 108.9, 13.87, 7.04);
-            yield return new Country("Togo", "SUB-SAHARAN AFRICA", 5548702, 56785, 97.7, 0.1, 0, 66.61, 1500, 60.9, 10.6, 37.01, 9.83);
-            yield return new Country("Tonga", "OCEANIA", 114689, 748, 153.3, 56.02, 0, 12.62, 2200, 98.5, 97.7, 25.37, 5.28);
-            yield return new Country("Trinidad & Tobago", "LATIN AMER. & CARIB", 1065842, 5128, 207.9, 7.06, -10.83, 24.31, 9500, 98.6, 303.5, 12.9, 10.57);
-            yield return new Country("Tunisia", "NORTHERN AFRICA", 10175014, 163610, 62.2, 0.7, -0.57, 24.77, 6900, 74.2, 123.6, 15.52, 5.13);
-            yield return new Country("Turkey", "NEAR EAST", 70413958, 780580, 90.2, 0.92, 0, 41.04, 6700, 86.5, 269.5, 16.62, 5.97);
-            yield return new Country("Turkmenistan", "C.W. OF IND. STATES", 5042920, 488100, 10.3, 0, -0.86, 73.08, 5800, 98, 74.6, 27.61, 8.6);
-            yield return new Country("Turks & Caicos Is", "LATIN AMER. & CARIB", 21152, 430, 49.2, 90.47, 11.68, 15.67, 9600, 98, 269.5, 21.84, 4.21);
-            yield return new Country("Tuvalu", "OCEANIA", 11810, 26, 454.2, 92.31, 0, 20.03, 1100,null, 59.3, 22.18, 7.11);
-            yield return new Country("Uganda", "SUB-SAHARAN AFRICA", 28195754, 236040, 119.5, 0, 0, 67.83, 1400, 69.9, 3.6, 47.35, 12.24);
-            yield return new Country("Ukraine", "C.W. OF IND. STATES", 46710816, 603700, 77.4, 0.46, -0.39, 20.34, 5400, 99.7, 259.9, 8.82, 14.39);
-            yield return new Country("United Arab Emirates", "NEAR EAST", 2602713, 82880, 31.4, 1.59, 1.03, 14.51, 23200, 77.9, 475.3, 18.96, 4.4);
-            yield return new Country("United Kingdom", "WESTERN EUROPE", 60609153, 244820, 247.6, 5.08, 2.19, 5.16, 27700, 99, 543.5, 10.71, 10.13);
-            yield return new Country("United States", "NORTHERN AMERICA", 298444215, 9631420, 31, 0.21, 3.41, 6.5, 37800, 97, 898, 14.14, 8.26);
-            yield return new Country("Uruguay", "LATIN AMER. & CARIB", 3431932, 176220, 19.5, 0.37, -0.32, 11.95, 12800, 98, 291.4, 13.91, 9.05);
-            yield return new Country("Uzbekistan", "C.W. OF IND. STATES", 27307134, 447400, 61, 0, -1.72, 71.1, 1700, 99.3, 62.9, 26.36, 7.84);
-            yield return new Country("Vanuatu", "OCEANIA", 208869, 12200, 17.1, 20.72, 0, 55.16, 2900, 53, 32.6, 22.72, 7.82);
-            yield return new Country("Venezuela", "LATIN AMER. & CARIB", 25730435, 912050, 28.2, 0.31, -0.04, 22.2, 4800, 93.4, 140.1, 18.71, 4.92);
-            yield return new Country("Vietnam", "ASIA (EX. NEAR EAST)", 84402966, 329560, 256.1, 1.05, -0.45, 25.95, 2500, 90.3, 187.7, 16.86, 6.22);
-            yield return new Country("Virgin Islands", "LATIN AMER. & CARIB", 108605, 1910, 56.9, 9.84, -8.94, 8.03, 17200,null, 652.8, 13.96, 6.43);
-            yield return new Country("Wallis and Futuna", "OCEANIA", 16025, 274, 58.5, 47.08,null,null, 3700, 50, 118.6,null,null);
-            yield return new Country("West Bank", "NEAR EAST", 2460492, 5860, 419.9, 0, 2.98, 19.62, 800,null, 145.2, 31.67, 3.92);
-            yield return new Country("Yemen", "NEAR EAST", 21456188, 527970, 40.6, 0.36, 0, 61.5, 800, 50.2, 37.2, 42.89, 8.3);
-            yield return new Country("Zambia", "SUB-SAHARAN AFRICA", 11502010, 752614, 15.3, 0, 0, 88.29, 800, 80.6, 8.2, 41, 19.93);
-            yield return new Country("Zimbabwe", "SUB-SAHARAN AFRICA", 12236805, 390580, 31.3, 0, 0, 67.69, 1900, 90.7, 26.8, 28.01, 21.84);
-        }
-
-        static IReadOnlyList<Country>? _all;
-
-        public static IReadOnlyList<Country> All
-        {
-            get
-            {
-                if(_all == null)
-                {
-                    _all = GetCountries().ToList().AsReadOnly();
-                }
-
-                return _all;
-            }
-
-        }
-    }
-    
-public class Country
-{
-    public string Name { get; private set; }
-    public string Region { get; private set; }
-    public int Population { get; private set; }
-    //Square Miles
-    public int Area { get; private set; }
-    //Per Square Mile
-    public double PopulationDensity { get; private set; }
-    //Coast / Area
-    public double CoastLine { get; private set; }
-    public double? NetMigration { get; private set; }
-    //per 1000 births
-    public double? InfantMortality { get; private set; }
-    public int GDP { get; private set; }
-    public double? LiteracyPercent { get; private set; }
-    //per 1000
-    public double? Phones { get; private set; }
-    public double? BirthRate { get; private set; }
-    public double? DeathRate { get; private set; }
-
-    public Country(string name, string region, int population, int area, double density, double coast, double? migration, 
-        double? infantMorality, int gdp, double? literacy, double? phones, double? birth, double? death)
-    {
-        Name = name;
-        Region = region;
-        Population = population;
-        Area = area;
-        PopulationDensity = density;
-        CoastLine = coast;
-        NetMigration = migration;
-        InfantMortality = infantMorality;
-        GDP = gdp;
-        LiteracyPercent = literacy;
-        BirthRate = birth;
-        DeathRate = death;
+        DataContext = new DataGridDemoViewModel();
     }
 }
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
index a3684a3..cefbdf0 100644
--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml
@@ -2,233 +2,387 @@
     x:Class="Semi.Avalonia.Demo.Pages.Overview"
     xmlns="https://github.com/avaloniaui"
     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="800"
+    d:DesignWidth="1920"
     mc:Ignorable="d">
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <converters:ColorToBrushConverter x:Key="ColorToBrushConverter" />
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <UserControl.Styles>
+        <Style Selector="Border.CodeBlock">
+            <Setter Property="BorderBrush" Value="{DynamicResource SemiColorBorder}" />
+            <Setter Property="Padding" Value="16" />
+            <Setter Property="CornerRadius" Value="6" />
+            <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+        </Style>
+    </UserControl.Styles>
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
-        <StackPanel Spacing="5">
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
-                <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
-                <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
-                <Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
-                <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
-                <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
-                <Button
-                    Classes="Primary"
-                    IsEnabled="False"
-                    Theme="{DynamicResource SolidButton}">
-                    Danger
-                </Button>
+        <StackPanel Margin="20">
+            <StackPanel
+                Margin="20"
+                HorizontalAlignment="Center"
+                Orientation="Horizontal">
+                <PathIcon
+                    Width="32"
+                    Height="32"
+                    Data="M10.6201 17.5C6.06377 17.5 2.37012 13.8063 2.37012 9.25C2.37012 4.69365 6.06377 1 10.6201 1V17.5ZM13.3701 6.5C17.9265 6.5 21.6201 10.1936 21.6201 14.75C21.6201 19.3063 17.9265 23 13.3701 23V6.5Z" />
+                <PathIcon
+                    Width="10"
+                    Height="10"
+                    Margin="20,0"
+                    Data="M20.5 13.5C21.3284 13.5 22 12.8284 22 12C22 11.1716 21.3284 10.5 20.5 10.5L13.5 10.5L13.5 3.5C13.5 2.67157 12.8284 2 12 2C11.1716 2 10.5 2.67157 10.5 3.5L10.5 10.5L3.5 10.5C2.67157 10.5 2 11.1716 2 12C2 12.8284 2.67157 13.5 3.5 13.5L10.5 13.5V20.5C10.5 21.3284 11.1716 22 12 22C12.8284 22 13.5 21.3284 13.5 20.5V13.5L20.5 13.5Z" />
+                <Image Width="32" Height="32">
+                    <Image.Source>
+                        <DrawingImage>
+                            <DrawingGroup>
+                                <GeometryDrawing Brush="#8B44AC" Geometry="M74.8535 85.8231C75.0263 85.8231 75.1954 85.8231 75.3679 85.8231C80.7347 85.8231 85.1439 81.8027 85.7614 76.6019L85.8357 41.7604C85.2255 18.5931 66.2537 0 42.9393 0C19.2399 0 0.02771 19.2122 0.02771 42.9116C0.02771 66.3573 18.8309 85.418 42.18 85.8231H74.8535Z" />
+                                <GeometryDrawing Brush="#F9F9FB" Geometry="M43.0585 14.6143C29.5513 14.6143 18.2555 24.082 15.4454 36.7432C18.1357 37.4975 20.1087 39.9679 20.1087 42.8992C20.1087 45.8305 18.1357 48.301 15.4454 49.0552C18.2555 61.7164 29.5513 71.1842 43.0585 71.1842C47.9754 71.1842 52.5993 69.9296 56.6276 67.723V70.9926H71.3435V44.0716C71.3569 43.7138 71.3435 43.2603 71.3435 42.8992C71.3435 27.2779 58.6799 14.6143 43.0585 14.6143ZM29.5096 42.8992C29.5096 35.4164 35.5757 29.3503 43.0585 29.3503C50.5414 29.3503 56.6074 35.4164 56.6074 42.8992C56.6074 50.3821 50.5414 56.4481 43.0585 56.4481C35.5757 56.4481 29.5096 50.3821 29.5096 42.8992Z" />
+                                <GeometryDrawing Brush="#F9F9FB" Geometry="M18.105 42.8805C18.105 45.3803 16.0785 47.4068 13.5787 47.4068C11.0789 47.4068 9.05237 45.3803 9.05237 42.8805C9.05237 40.3807 11.0789 38.3542 13.5787 38.3542C16.0785 38.3542 18.105 40.3807 18.105 42.8805Z" />
+                            </DrawingGroup>
+                        </DrawingImage>
+                    </Image.Source>
+                </Image>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Label Theme="{StaticResource TagLabel}">Label</Label>
-                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large Label</Label>
-                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle Label</Label>
-                <Label Classes="Large Circle" Theme="{StaticResource TagLabel}">Large Circle Label</Label>
+            <TextBlock
+                HorizontalAlignment="Center"
+                Classes="H1"
+                Text="Semi Avalonia"
+                Theme="{DynamicResource TitleTextBlock}" />
+            <TextBlock
+                MaxWidth="600"
+                Margin="0,20,0,0"
+                HorizontalAlignment="Center"
+                Classes="Secondary"
+                Text="AvaloniaUI Theme inspired by Semi Design. An easy-to-customize modern design system that helps designers and developers create high-quality products."
+                TextWrapping="Wrap" />
+            <StackPanel
+                Margin="0,10,0,0"
+                HorizontalAlignment="Center"
+                Orientation="Horizontal">
+                <TextBlock
+                    Margin="12,0"
+                    FontWeight="600"
+                    Text="Modern" />
+                <TextBlock
+                    Margin="12,0"
+                    FontWeight="600"
+                    Foreground="{Binding #color.Color, Converter={StaticResource ColorToBrushConverter}, Mode=TwoWay}"
+                    Text="Flexible" />
+                <TextBlock
+                    Margin="12,0"
+                    FontWeight="600"
+                    Text="Simple" />
             </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Ghost Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-                <Label Classes="Solid Blue" Theme="{StaticResource TagLabel}">Indigo</Label>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <StackPanel
-                    Margin="0,0,16,0"
-                    VerticalAlignment="Center"
-                    Orientation="Horizontal">
-                    <RadioButton Margin="0,0,8,0">Option 1</RadioButton>
-                    <RadioButton>Option 2</RadioButton>
-                </StackPanel>
-                <Border VerticalAlignment="Center" Theme="{StaticResource RadioButtonGroupBorder}">
+            <StackPanel HorizontalAlignment="Center">
+                <StackPanel>
                     <StackPanel Orientation="Horizontal">
-                        <RadioButton IsChecked="True" Theme="{StaticResource ButtonRadioButton}">选项 1</RadioButton>
-                        <RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton>
+                        <StackPanel Margin="16,0">
+                            <Button
+                                Margin="0,8"
+                                Classes="Primary"
+                                Content="Primary"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Secondary"
+                                Content="Secondary"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Tertiary"
+                                Content="Tertiary"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Success"
+                                Content="Success"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Warning"
+                                Content="Warning"
+                                Theme="{DynamicResource SolidButton}" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Danger"
+                                Content="Danger"
+                                Theme="{DynamicResource SolidButton}" />
+                        </StackPanel>
+                        <Calendar Margin="16,0" />
+                        <StackPanel Margin="16,0">
+                            <TextBox
+                                Width="300"
+                                Margin="0,12"
+                                InnerLeftContent="https://"
+                                InnerRightContent=".com" />
+                            <DatePicker Width="300" Margin="0,12" />
+                            <CalendarDatePicker Width="300" Margin="0,12" />
+                            <NumericUpDown Width="300" Margin="0,12" />
+                            <ComboBox Width="300" Margin="0,12">
+                                <ComboBoxItem>Avalonia</ComboBoxItem>
+                                <ComboBoxItem>Semi Design</ComboBoxItem>
+                                <ComboBoxItem>IRIHI Technology</ComboBoxItem>
+                            </ComboBox>
+                        </StackPanel>
+                        <StackPanel>
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="CheckBox">
+                                        <Setter Property="Margin" Value="4" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <CheckBox Content="Windows" IsChecked="True" />
+                                <CheckBox Content="macOS" IsChecked="True" />
+                                <CheckBox Content="Linux" IsChecked="True" />
+                                <CheckBox
+                                    Content="iOS"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True" />
+                                <CheckBox
+                                    Content="Android"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True" />
+                                <CheckBox
+                                    Content="Wasm"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True" />
+                            </UniformGrid>
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="CheckBox">
+                                        <Setter Property="Margin" Value="4" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <CheckBox
+                                    Content="Windows"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="macOS"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="Linux"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="iOS"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="Android"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                                <CheckBox
+                                    Content="Wasm"
+                                    IsChecked="{x:Null}"
+                                    IsThreeState="True"
+                                    Theme="{DynamicResource CardCheckBox}" />
+                            </UniformGrid>
+                        </StackPanel>
+
                     </StackPanel>
-                </Border>
-                <StackPanel Orientation="Horizontal">
-                    <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                    <StackPanel Orientation="Horizontal">
+                        <StackPanel Margin="16,0">
+                            <Button
+                                Margin="0,8"
+                                Classes="Primary"
+                                Content="Primary" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Secondary"
+                                Content="Secondary" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Tertiary"
+                                Content="Tertiary" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Success"
+                                Content="Success" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Warning"
+                                Content="Warning" />
+                            <Button
+                                Margin="0,8"
+                                Classes="Danger"
+                                Content="Danger" />
                         </StackPanel>
-                    </RadioButton>
-                    <RadioButton
-                        Margin="4"
-                        IsChecked="True"
-                        Theme="{StaticResource CardRadioButton}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                        </StackPanel>
-                    </RadioButton>
-                </StackPanel>
-                <StackPanel Orientation="Horizontal">
-                    <RadioButton Margin="4" Theme="{StaticResource PureCardRadioButton}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
-                        </StackPanel>
-                    </RadioButton>
-                    <RadioButton
-                        Margin="4"
-                        IsChecked="True"
-                        Theme="{StaticResource PureCardRadioButton}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                        </StackPanel>
-                    </RadioButton>
-                </StackPanel>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <StackPanel Orientation="Horizontal">
-                    <CheckBox Margin="0,0,8,0">Avalonia</CheckBox>
-                    <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
-                    <CheckBox IsChecked="{x:Null}" IsThreeState="True">UWP</CheckBox>
-                </StackPanel>
-                <StackPanel Orientation="Horizontal">
-                    <CheckBox Margin="4" Theme="{StaticResource CardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                    <CheckBox
-                        Margin="4"
-                        IsChecked="True"
-                        Theme="{StaticResource CardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                    <CheckBox
-                        Margin="4"
-                        IsChecked="{x:Null}"
-                        IsThreeState="True"
-                        Theme="{StaticResource CardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 3</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 3</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                </StackPanel>
-                <StackPanel Orientation="Horizontal">
-                    <CheckBox Margin="4" Theme="{StaticResource PureCardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                    <CheckBox
-                        Margin="4"
-                        IsChecked="True"
-                        Theme="{StaticResource PureCardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                    <CheckBox
-                        Margin="4"
-                        IsChecked="{x:Null}"
-                        IsThreeState="True"
-                        Theme="{StaticResource PureCardCheckBox}">
-                        <StackPanel>
-                            <TextBlock FontWeight="Bold">Option 3</TextBlock>
-                            <TextBlock Classes="Tertiary">Description 3</TextBlock>
-                        </StackPanel>
-                    </CheckBox>
-                </StackPanel>
-            </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <ToggleSwitch
-                    Content="Content"
-                    OffContent="No"
-                    OnContent="Yes" />
-                <ProgressBar
-                    Classes="Right"
-                    ShowProgressText="True"
-                    Value="20" />
-                <Slider
-                    Width="200"
-                    Margin="30,0"
-                    Orientation="Horizontal"
-                    Value="30" />
-            </StackPanel>
-            <TabControl>
-                <TabItem Header="Tab 1">
-                    <TextBlock Margin="8">Tab Content 1</TextBlock>
-                </TabItem>
-                <TabItem Header="Tab 2">
-                    <TextBlock Margin="8">Tab Content 2</TextBlock>
-                </TabItem>
-                <TabItem Header="Tab 3">
-                    <TextBlock Margin="8">Tab Content 3</TextBlock>
-                </TabItem>
-            </TabControl>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <ComboBox Width="200" PlaceholderText="Please Select">
-                    <ComboBoxItem>Item 1</ComboBoxItem>
-                    <ComboBoxItem>Item 2</ComboBoxItem>
-                    <ComboBoxItem>Item 3</ComboBoxItem>
-                </ComboBox>
-                <DatePicker />
-                <TimePicker />
-                <CalendarDatePicker />
-            </StackPanel>
-            <Grid ColumnDefinitions="*, *, *">
-                <Border Theme="{StaticResource CardBorder}">
-                    <TextBlock>Card</TextBlock>
-                </Border>
-                <Border
-                    Grid.Column="1"
-                    Classes="Hover"
-                    Theme="{StaticResource CardBorder}">
-                    <TextBlock>Shadow on hover</TextBlock>
-                </Border>
-                <Border
-                    Grid.Column="2"
-                    Classes="Shadow"
-                    Theme="{StaticResource CardBorder}">
-                    <TextBlock>Shadow</TextBlock>
-                </Border>
-            </Grid>
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <TextBox
-                    Width="200"
-                    InnerLeftContent="http://"
-                    InnerRightContent=".com" />
-                <TextBox
-                    Width="200"
-                    Classes="revealPasswordButton"
-                    PasswordChar="*"
-                    Text="Avalonia" />
+                        <ColorView
+                            Name="color"
+                            VerticalAlignment="Top"
+                            Palette="{DynamicResource SemiColorPalette}"
+                            SelectedIndex="2"
+                            Color="#8B44AC" />
+                        <StackPanel Width="300" Margin="8">
+                            <StackPanel Orientation="Horizontal">
+                                <Slider
+                                    Name="slider"
+                                    Width="200"
+                                    Margin="16"
+                                    Maximum="100"
+                                    Minimum="0" />
+                                <ToggleSwitch Name="three" IsChecked="True" />
+                            </StackPanel>
+                            <UniformGrid Columns="2">
+                                <ProgressBar
+                                    Width="100"
+                                    MinWidth="100"
+                                    Margin="0,16"
+                                    IsIndeterminate="{Binding #three.IsChecked}"
+                                    ShowProgressText="True"
+                                    Value="{Binding #slider.Value}" />
+                                <ProgressBar
+                                    Width="100"
+                                    Height="100"
+                                    IsIndeterminate="{Binding #three.IsChecked}"
+                                    ShowProgressText="True"
+                                    Theme="{DynamicResource ProgressRing}"
+                                    Value="{Binding #slider.Value}" />
+                            </UniformGrid>
+                            <TabStrip Margin="0,8">
+                                <TabStripItem Content="Tab 1" />
+                                <TabStripItem Content="Tab 2" />
+                                <TabStripItem Content="Tab 3" />
+                            </TabStrip>
+                            <Menu Margin="0,8">
+                                <MenuItem Header="Menu 1">
+                                    <MenuItem Header="SubMenu 1" />
+                                    <MenuItem Header="SubMenu 2" />
+                                    <MenuItem Header="SubMenu 3" />
+                                </MenuItem>
+                                <MenuItem Header="Menu 2">
+                                    <MenuItem Header="SubMenu 1" />
+                                    <MenuItem Header="SubMenu 2" />
+                                    <MenuItem Header="SubMenu 3" />
+                                    <MenuItem Header="SubMenu 4">
+                                        <MenuItem Header="SubMenu 1" />
+                                        <MenuItem Header="SubMenu 2" />
+                                        <MenuItem Header="SubMenu 3" />
+                                    </MenuItem>
+                                </MenuItem>
+                                <MenuItem Header="Menu 3" />
+                            </Menu>
 
-            </StackPanel>
+                        </StackPanel>
+                        <StackPanel Margin="8">
 
-            <StackPanel Orientation="Horizontal" Spacing="20">
-                <TreeView>
-                    <TreeViewItem Header="Level 1" IsExpanded="True">
-                        <TreeViewItem Header="Level 2" />
-                        <TreeViewItem Header="Level 2" />
-                        <TreeViewItem Header="Level 2" IsExpanded="True">
-                            <TreeViewItem Header="Level 3" />
-                            <TreeViewItem Header="Level 3" />
-                        </TreeViewItem>
-                    </TreeViewItem>
-                </TreeView>
-                <ListBox SelectedIndex="3">
-                    <TextBlock>List Item 1</TextBlock>
-                    <TextBlock>List Item 2</TextBlock>
-                    <TextBlock>List Item 3</TextBlock>
-                    <TextBlock>List Item 4</TextBlock>
-                    <TextBlock>List Item 5</TextBlock>
-                </ListBox>
-                <Calendar />
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="RadioButton">
+                                        <Setter Property="Margin" Value="4" />
+                                        <Setter Property="HorizontalAlignment" Value="Center" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <RadioButton Content="Avalonia" IsChecked="True" />
+                                <RadioButton Content="WPF" />
+                                <RadioButton Content="Xamarin" />
+                            </UniformGrid>
+                            <UniformGrid HorizontalAlignment="Center" Columns="3">
+                                <UniformGrid.Styles>
+                                    <Style Selector="RadioButton">
+                                        <Setter Property="Margin" Value="4" />
+                                        <Setter Property="HorizontalAlignment" Value="Center" />
+                                    </Style>
+                                </UniformGrid.Styles>
+                                <RadioButton
+                                    Content="Avalonia"
+                                    IsChecked="True"
+                                    Theme="{DynamicResource CardRadioButton}" />
+                                <RadioButton Content="WPF" Theme="{DynamicResource CardRadioButton}" />
+                                <RadioButton Content="Xamarin" Theme="{DynamicResource CardRadioButton}" />
+                            </UniformGrid>
+                            <WrapPanel Width="300">
+                                <WrapPanel.Styles>
+                                    <Style Selector="Label">
+                                        <Setter Property="Margin" Value="4" />
+                                        <Setter Property="HorizontalContentAlignment" Value="Center" />
+                                    </Style>
+                                </WrapPanel.Styles>
+                                <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                                <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                                <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                                <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                                <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                                <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                                <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                                <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                                <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                                <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                                <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                                <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                                <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                                <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                                <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                                <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                                <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+                                <Label Classes="Large" Theme="{StaticResource TagLabel}">Large</Label>
+                                <Label Classes="Circle" Theme="{StaticResource TagLabel}">Circle</Label>
+                            </WrapPanel>
+                        </StackPanel>
+                    </StackPanel>
+                </StackPanel>
+                <TextBlock
+                    Margin="0,32,0,16"
+                    Classes="H5"
+                    Text="Start to install"
+                    Theme="{DynamicResource TitleTextBlock}" />
+                <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 887944e..09fc362 100644
--- a/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs
@@ -13,16 +13,27 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    private void ToggleButton_OnIsCheckedChanged(object sender, RoutedEventArgs e)
-    {
-        var variant = Application.Current!.RequestedThemeVariant;
-        if (variant?.Key == "Dark")
-        {
-            Application.Current!.RequestedThemeVariant = ThemeVariant.Light;
-        }
-        else
-        {
-            Application.Current!.RequestedThemeVariant = ThemeVariant.Dark;
-        }
-    }
+    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>
diff --git a/demo/Semi.Avalonia.Demo/ViewModels/DataGridDemoViewModel.cs b/demo/Semi.Avalonia.Demo/ViewModels/DataGridDemoViewModel.cs
new file mode 100644
index 0000000..a459d39
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/ViewModels/DataGridDemoViewModel.cs
@@ -0,0 +1,153 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using Avalonia.Collections;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class DataGridDemoViewModel: ObservableObject
+{
+    public ObservableCollection<Song> GridData1 { get; set; }
+    
+    public DataGridCollectionView GridData2 { get; set; }
+    
+    public ObservableCollection<SongViewModel> GridData3 { get; set; }
+
+    public DataGridDemoViewModel()
+    {
+        GridData1 = new ObservableCollection<Song>(Song.Songs);
+        GridData2 = new DataGridCollectionView(Song.Songs);
+        GridData2.GroupDescriptions.Add(new DataGridPathGroupDescription("Album"));
+        GridData3 = new ObservableCollection<SongViewModel>(Song.Songs.Take(10).Select(a=>new SongViewModel()
+        {
+            Title = a.Title,
+            Artist = a.Artist,
+            Album = a.Album,
+            CountOfComment = a.CountOfComment,
+            IsSelected = false
+        }));
+    }
+}
+
+public class Song
+{
+    public string? Title { get; set; }
+    public string? Artist { get; set; }
+    public TimeSpan? Duration { get; set; }
+    public string? Album { get; set; }
+    public int CountOfComment { get; set; }
+    public string Url { get; set; }
+
+    public Song(string title, string artist, int m, int s, string album, int countOfComment, int netEaseId)
+    {
+        Title = title;
+        Artist = artist;
+        Duration = new TimeSpan(0, m, s);
+        Album = album;
+        CountOfComment = countOfComment;
+        Url = $"https://music.163.com/song?id={netEaseId}";
+        
+    }
+
+    public static List<Song> Songs { get; set; } = new List<Song>()
+    {
+        new("好肚有肚(feat.李玲玉)", "熊猫堂ProducePandas", 2, 50, "A.S.I.A", 730, 1487039339),
+        new("荒诞秀", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 639, 1487037601),
+        new("长大", "熊猫堂ProducePandas", 4, 6, "A.S.I.A", 1114, 1487037690),
+        new("招财猫(feat.纪粹希(G-Tracy))", "熊猫堂ProducePandas", 3, 37, "A.S.I.A", 361, 1487039632),
+        new("千转", "熊猫堂ProducePandas", 4, 0, "A.S.I.A", 1115, 1477312398),
+        new("辣辣辣", "熊猫堂ProducePandas", 3, 24, "A.S.I.A", 1873, 1465043716),
+        new("碎碎念", "熊猫堂ProducePandas", 3, 25, "A.S.I.A", 676, 1474142064),
+        new("盘他", "熊猫堂ProducePandas", 2, 16, "A.S.I.A", 365, 1481652786),
+        new("Na Na Na", "熊猫堂ProducePandas", 3, 26, "A.S.I.A", 312, 1469022662),
+        new("Indigo", "熊猫堂ProducePandas", 3, 15, "A.S.I.A", 137, 1487039517),
+        new("饕餮人间", "熊猫堂ProducePandas", 3, 20, "饕餮人间", 1295, 1499584605),
+        new("七步咙咚呛", "熊猫堂ProducePandas", 3, 10, "七步咙咚呛", 175, 1809095152),
+        new("大惊小怪", "熊猫堂ProducePandas", 3, 32, "大惊小怪", 10420, 1847477425),
+        new("工具人", "熊猫堂ProducePandas", 2, 46, "大惊小怪", 1135, 1847476499),
+        new("以梦为马", "熊猫堂ProducePandas", 4, 19, "大惊小怪", 18361, 1836034373),
+        new("以梦为马(Piano Version)", "熊猫堂ProducePandas", 3, 4, "大惊小怪", 570, 1847477423),
+        new("The ONE", "熊猫堂ProducePandas", 2, 58, "The ONE", 1508, 1864329424),
+        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "The ONE", 385, 1864329429),
+        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 19, "以梦为马 (壮志骄阳版)", 161, 1865138896),
+        new("New Horse", "熊猫堂ProducePandas", 2, 30, "emo了", 643, 1887021307),
+        new("不例外", "熊猫堂ProducePandas", 3, 31, "emo了", 1818, 1887022665),
+        new("满意", "熊猫堂ProducePandas", 4, 32, "emo了", 1081, 1882433472),
+        new("就算与全世界为敌也要跟你在一起", "熊猫堂ProducePandas", 3, 32, "emo了", 2119, 1881759960),
+        new("The ONE", "熊猫堂ProducePandas", 2, 58, "emo了", 67, 1887022648),
+        new("口香糖", "熊猫堂ProducePandas", 3, 10, "emo了", 2181, 1885502254),
+        new("Suuuuuuper Mario", "熊猫堂ProducePandas", 3, 32, "emo了", 1010, 1887021318),
+        new("饕餮人间", "熊猫堂ProducePandas", 3, 22, "emo了", 109, 1887021320),
+        new("以梦为马 (壮志骄阳版)", "熊猫堂ProducePandas", 4, 21, "emo了", 34, 1887022666),
+        new("The ONE(日文版)", "熊猫堂ProducePandas", 2, 57, "emo了", 27, 1887022646),
+        new("满意(DJheap九天版)", "熊猫堂ProducePandas", 4, 31, "emo了", 31, 1901605941),
+        new("一眼万年", "熊猫堂ProducePandas", 3, 54, "一眼万年", 20, 1922599361),
+        new("冲刺", "熊猫堂ProducePandas", 3, 49, "冲刺吧", 1006, 1932878194),
+        new("滴答滴", "熊猫堂ProducePandas", 2, 30, "爱的赏味期限", 86, 1957515790),
+        new("热带季风", "熊猫堂ProducePandas", 2, 45, "爱的赏味期限", 212, 1957514964),
+        new("渣", "熊猫堂ProducePandas", 3, 28, "爱的赏味期限", 22, 1957514965),
+        new("独特", "熊猫堂ProducePandas", 3, 33, "爱的赏味期限", 62, 1957514966),
+        new("雨后", "熊猫堂ProducePandas", 4, 15, "爱的赏味期限", 23, 1957514967),
+        new("然后然后", "熊猫堂ProducePandas", 3, 50, "爱的赏味期限", 108, 1957514968),
+        new("丢", "熊猫堂ProducePandas", 3, 26, "爱的赏味期限", 30, 1957515792),
+        new("热带疾风(FACEVOID桃心连哥 Remix)", "熊猫堂ProducePandas", 3, 23, "爱的赏味期限", 55, 1957515793),
+        new("COSMIC ANTHEM -Japanese Ver.-", "熊猫堂ProducePandas", 3, 11, "COSMIC ANTHEM / 手紙", 0, 1977171493),
+        new("手紙 (「長大-You Raise Me Up-」-Japanese Ver.-)", "熊猫堂ProducePandas", 4, 11, "COSMIC ANTHEM / 手紙", 0,
+            1977171494),
+        new("COSMIC ANTHEM -Chinese Ver.-", "熊猫堂ProducePandas", 3, 31, "COSMIC ANTHEM / 手紙", 0, 1977172202),
+        new("世界晚安", "熊猫堂ProducePandas", 2, 59, "世界晚安", 652, 1985063377),
+        new("世界晚安(泰文版)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 134, 1987842504),
+        new("世界晚安(钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 76, 1990475933),
+        new("世界晚安(泰文钢琴版)", "熊猫堂ProducePandas", 3, 2, "世界晚安", 29, 1990475934),
+        new("世界晚安(DJ沈念版)", "熊猫堂ProducePandas", 3, 9, "世界晚安", 34, 2014263184),
+        new("世界晚安(钢琴配乐)", "熊猫堂ProducePandas", 2, 59, "世界晚安", 11, 2014263185),
+        new("明年也要好好长大", "熊猫堂ProducePandas", 3, 12, "明年也要好好长大", 0, 2010515162),
+        new("320万年前（DJ沈念版）", "熊猫堂ProducePandas", 3, 21, "320万年前", 8, 2055888636),
+        new("320万年前", "熊猫堂ProducePandas", 3, 7, "W.O.R.L.D.", 329, 2049770469),
+        new("隐德来希", "熊猫堂ProducePandas", 3, 3, "W.O.R.L.D.", 594, 2061317924),
+        new("孔明", "熊猫堂ProducePandas", 3, 59, "W.O.R.L.D.", 91, 2063175274),
+        new("锦鲤卟噜噜", "熊猫堂ProducePandas", 3, 5, "W.O.R.L.D.", 67, 2059208262),
+        new("指鹿为马", "熊猫堂ProducePandas", 3, 12, "W.O.R.L.D.", 74, 2063175272),
+        new("热带季风Remix", "熊猫堂ProducePandas", 3, 22, "W.O.R.L.D.", 23, 2063173319),
+        new("加州梦境", "熊猫堂ProducePandas", 2, 56, "W.O.R.L.D.", 1662, 2063173324),
+        new("渐进自由", "熊猫堂ProducePandas", 4, 19, "W.O.R.L.D.", 124, 2063173321),
+        new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775),
+    };
+}
+
+public class SongViewModel: ObservableObject
+{
+    private string? _title;
+    private string? _artist;
+    private string? _album;
+    private int _countOfComment;
+    private bool? _isSelected;
+    public string? Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+    public string? Artist
+    {
+        get => _artist;
+        set => SetProperty(ref _artist, value);
+    }
+    public string? Album
+    {
+        get => _album;
+        set => SetProperty(ref _album, value);
+    }
+    public int CountOfComment
+    {
+        get => _countOfComment;
+        set => SetProperty(ref _countOfComment, value);
+    }
+    public bool? IsSelected
+    {
+        get => _isSelected;
+        set => SetProperty(ref _isSelected, value);
+    }
+    
+}
\ No newline at end of file