From ffb2b356cc5b6a8c80c257416613197581b34a52 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Wed, 8 Feb 2023 02:00:06 +0800
Subject: [PATCH] feat: add DataGrid resources.

---
 .../Pages/DataGridDemo.axaml                  |  41 ++-
 .../Pages/DataGridDemo.axaml.cs               |   3 +-
 src/Semi.Avalonia.DataGrid/Dark.axaml         |  40 +++
 src/Semi.Avalonia.DataGrid/DataGrid.axaml     | 236 ++++++++----------
 src/Semi.Avalonia.DataGrid/Index.axaml        |   4 +
 src/Semi.Avalonia.DataGrid/Light.axaml        |  40 +++
 6 files changed, 209 insertions(+), 155 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
index a007c29..7f9d2b0 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml
@@ -8,21 +8,6 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <UserControl.Resources>
-        <DataTemplate x:Key="Demo.DataTemplates.CountryHeader" x:DataType="local:Country">
-            <StackPanel Orientation="Horizontal" Spacing="5">
-                <PathIcon Height="12" Data="M 255 116 A 1 1 0 0 0 254 117 L 254 130 A 1 1 0 0 0 255 131 A 1 1 0 0 0 256 130 L 256 123.87109 C 256.1125 123.90694 256.2187 123.94195 256.33984 123.97852 C 257.18636 124.23404 258.19155 124.5 259 124.5 C 259.80845 124.5 260.52133 124.2168 261.17773 123.9668 C 261.83414 123.7168 262.43408 123.5 263 123.5 C 263.56592 123.5 264.5612 123.73404 265.37109 123.97852 C 266.18098 124.22299 266.82227 124.4668 266.82227 124.4668 A 0.50005 0.50005 0 0 0 267.5 124 L 267.5 118 A 0.50005 0.50005 0 0 0 267.17773 117.5332 C 267.17773 117.5332 266.50667 117.27701 265.66016 117.02148 C 264.81364 116.76596 263.80845 116.5 263 116.5 C 262.19155 116.5 261.47867 116.7832 260.82227 117.0332 C 260.16586 117.2832 259.56592 117.5 259 117.5 C 258.43408 117.5 257.4388 117.26596 256.62891 117.02148 C 256.39123 116.94974 256.17716 116.87994 255.98047 116.81445 A 1 1 0 0 0 255 116 z M 263 117.5 C 263.56592 117.5 264.5612 117.73404 265.37109 117.97852 C 266.00097 118.16865 266.29646 118.28239 266.5 118.35742 L 266.5 120.29297 C 266.25708 120.21012 265.97978 120.11797 265.66016 120.02148 C 264.81364 119.76596 263.80845 119.5 263 119.5 C 262.19155 119.5 261.47867 119.7832 260.82227 120.0332 C 260.16586 120.2832 259.56592 120.5 259 120.5 C 258.43408 120.5 257.4388 120.26596 256.62891 120.02148 C 256.39971 119.9523 256.19148 119.88388 256 119.82031 L 256 117.87109 C 256.1125 117.90694 256.2187 117.94195 256.33984 117.97852 C 257.18636 118.23404 258.19155 118.5 259 118.5 C 259.80845 118.5 260.52133 118.2168 261.17773 117.9668 C 261.83414 117.7168 262.43408 117.5 263 117.5 z M 263 120.5 C 263.56592 120.5 264.5612 120.73404 265.37109 120.97852 C 265.8714 121.12954 266.2398 121.25641 266.5 121.34961 L 266.5 123.30469 C 266.22286 123.20649 266.12863 123.1629 265.66016 123.02148 C 264.81364 122.76596 263.80845 122.5 263 122.5 C 262.19155 122.5 261.47867 122.7832 260.82227 123.0332 C 260.16586 123.2832 259.56592 123.5 259 123.5 C 258.43408 123.5 257.4388 123.26596 256.62891 123.02148 C 256.39971 122.9523 256.19148 122.88388 256 122.82031 L 256 120.87109 C 256.1125 120.90694 256.2187 120.94195 256.33984 120.97852 C 257.18636 121.23404 258.19155 121.5 259 121.5 C 259.80845 121.5 260.52133 121.2168 261.17773 120.9668 C 261.83414 120.7168 262.43408 120.5 263 120.5 z" />
-                <TextBlock Text="{Binding}" />
-            </StackPanel>
-        </DataTemplate>
-        <ControlTheme
-            x:Key="GdpCell"
-            x:DataType="local:Country"
-            BasedOn="{StaticResource {x:Type DataGridCell}}"
-            TargetType="DataGridCell">
-            <Setter Property="Background" Value="{Binding Path=GDP, Mode=OneWay}" />
-        </ControlTheme>
-    </UserControl.Resources>
     <TabControl Grid.Row="2">
         <TabItem Header="DataGrid">
             <DockPanel>
@@ -65,7 +50,6 @@
                             MinWidth="200"
                             x:DataType="local:Country"
                             Binding="{Binding GDP}"
-                            CellTheme="{StaticResource GdpCell}"
                             Header="GDP"
                             IsVisible="{Binding #ShowGDP.IsChecked}" />
                     </DataGrid.Columns>
@@ -126,11 +110,9 @@
                         <ControlTheme.Children>
                             <Style Selector="^:nth-child(5n+3)">
                                 <Setter Property="Foreground" Value="Red" />
-                                <Setter Property="FontWeight" Value="Bold" />
                             </Style>
                             <Style Selector="^:nth-last-child(5n+1)">
                                 <Setter Property="Foreground" Value="Blue" />
-                                <Setter Property="FontWeight" Value="Bold" />
                             </Style>
                         </ControlTheme.Children>
                     </ControlTheme>
@@ -138,11 +120,28 @@
             </DataGrid>
         </TabItem>
         <TabItem x:Name="EditableTab" Header="Editable">
-            <Grid RowDefinitions="*,Auto">
+            <Grid RowDefinitions="Auto,*,Auto">
+                <StackPanel
+                    Grid.Row="0"
+                    Orientation="Horizontal"
+                    Spacing="4">
+                    <TextBlock VerticalAlignment="Center" Text="FontSize:" />
+                    <Slider
+                        x:Name="FontSizeSlider"
+                        Width="100"
+                        VerticalAlignment="Center"
+                        Maximum="30"
+                        Minimum="5"
+                        Value="14" />
+                    <CheckBox
+                        x:Name="IsThreeStateCheckBox"
+                        Content="IsThreeState"
+                        IsChecked="False" />
+                </StackPanel>
                 <!--  Example of columns inheriting the data type from the Items source  -->
                 <DataGrid
                     Name="dataGridEdit"
-                    Grid.Row="0"
+                    Grid.Row="1"
                     Margin="12"
                     Items="{Binding DataGrid3Source}">
                     <DataGrid.Columns>
@@ -186,7 +185,7 @@
                 </DataGrid>
                 <Button
                     Name="btnAdd"
-                    Grid.Row="1"
+                    Grid.Row="2"
                     Margin="12,0,12,12"
                     HorizontalAlignment="Right"
                     Content="Add" />
diff --git a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs
index 1cdc44b..31caf37 100644
--- a/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs
+++ b/demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml.cs
@@ -9,6 +9,8 @@ using Avalonia.Collections;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Input.Raw;
 using Avalonia.Markup.Xaml;
 using Avalonia.Threading;
 
@@ -19,7 +21,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);
diff --git a/src/Semi.Avalonia.DataGrid/Dark.axaml b/src/Semi.Avalonia.DataGrid/Dark.axaml
index 9017e8d..1814448 100644
--- a/src/Semi.Avalonia.DataGrid/Dark.axaml
+++ b/src/Semi.Avalonia.DataGrid/Dark.axaml
@@ -1,3 +1,43 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="White" />
+
+    <Thickness x:Key="DataGridCellTextBlockDefaultMargin">12 0</Thickness>
+    <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#41464C" />
+    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="White" />
+    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#6C090B" />
+    <x:Double x:Key="DataGridCellMinHeight">32</x:Double>
+    <Thickness x:Key="DataGridCellVisualBorderThickness">1</Thickness>
+    <x:Double x:Key="DataGridCellVisualStrokeThickness">1</x:Double>
+
+
+    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
+    <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
+    <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
+    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.20" Color="White" />
+
+    <PathGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</PathGeometry>
+    <PathGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</PathGeometry>
+
+    <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
+    <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>
+
+    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#6C090B" />
+    <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
+
+    <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Color="#053170" />
+    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Color="#0A4694" />
+
+    <PathGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.12" Color="White" />
+
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="White" />
+    <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>
+
+    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#F9F9F9" />
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia.DataGrid/DataGrid.axaml b/src/Semi.Avalonia.DataGrid/DataGrid.axaml
index da53994..0ca109b 100644
--- a/src/Semi.Avalonia.DataGrid/DataGrid.axaml
+++ b/src/Semi.Avalonia.DataGrid/DataGrid.axaml
@@ -4,7 +4,7 @@
     xmlns:collections="using:Avalonia.Collections">
     <!--  Add Resources Here  -->
     <ControlTheme x:Key="DataGridCellTextBlockTheme" TargetType="TextBlock">
-        <Setter Property="Margin" Value="12,0,12,0" />
+        <Setter Property="Margin" Value="{DynamicResource DataGridCellTextBlockDefaultMargin}" />
         <Setter Property="VerticalAlignment" Value="Center" />
     </ControlTheme>
 
@@ -20,11 +20,10 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type DataGridCell}" TargetType="DataGridCell">
-        <Setter Property="Background" Value="{DynamicResource DataGridCellBackgroundBrush}" />
+        <Setter Property="Background" Value="{DynamicResource DataGridCellBackground}" />
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Stretch" />
-        <Setter Property="FontSize" Value="15" />
-        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="MinHeight" Value="{DynamicResource DataGridCellMinHeight}" />
         <Setter Property="Focusable" Value="False" />
         <Setter Property="Template">
             <ControlTemplate>
@@ -35,7 +34,6 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid x:Name="PART_CellRoot" ColumnDefinitions="*,Auto">
-
                         <Rectangle
                             x:Name="CurrencyVisual"
                             HorizontalAlignment="Stretch"
@@ -43,29 +41,22 @@
                             Fill="Transparent"
                             IsHitTestVisible="False"
                             IsVisible="False"
-                            Stroke="{DynamicResource DataGridCurrencyVisualPrimaryBrush}"
-                            StrokeThickness="1" />
-                        <Grid
+                            Stroke="{DynamicResource DataGridCellCurrentBorderBrush}"
+                            StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
+                        <Panel
                             x:Name="FocusVisual"
                             Grid.Column="0"
                             IsHitTestVisible="False"
                             IsVisible="False">
                             <Rectangle
+                                Margin="{DynamicResource DataGridCellVisualBorderThickness}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="Transparent"
                                 IsHitTestVisible="False"
-                                Stroke="{DynamicResource DataGridCellFocusVisualPrimaryBrush}"
-                                StrokeThickness="2" />
-                            <Rectangle
-                                Margin="2"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                Fill="Transparent"
-                                IsHitTestVisible="False"
-                                Stroke="{DynamicResource DataGridCellFocusVisualSecondaryBrush}"
-                                StrokeThickness="1" />
-                        </Grid>
+                                Stroke="{DynamicResource DataGridCellFocusBorderBrush}"
+                                StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
+                        </Panel>
 
                         <ContentPresenter
                             Grid.Column="0"
@@ -83,15 +74,15 @@
                             VerticalAlignment="Stretch"
                             IsHitTestVisible="False"
                             IsVisible="False"
-                            Stroke="{DynamicResource DataGridCellInvalidBrush}"
-                            StrokeThickness="1" />
+                            Stroke="{DynamicResource DataGridCellErrorBrush}"
+                            StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
 
                         <Rectangle
                             Name="PART_RightGridLine"
                             Grid.Column="1"
                             Width="1"
                             VerticalAlignment="Stretch"
-                            Fill="{DynamicResource DataGridFillerColumnGridLinesBrush}" />
+                            Fill="{DynamicResource DataGridLineBrush}" />
                     </Grid>
                 </Border>
             </ControlTemplate>
@@ -99,7 +90,7 @@
         <Style Selector="^:current /template/ Rectangle#CurrencyVisual">
             <Setter Property="IsVisible" Value="True" />
         </Style>
-        <Style Selector="^:focus /template/ Grid#FocusVisual">
+        <Style Selector="^:focus /template/ Panel#FocusVisual">
             <Setter Property="IsVisible" Value="True" />
         </Style>
         <Style Selector="^:invalid /template/ Rectangle#InvalidVisualElement">
@@ -108,17 +99,16 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type DataGridColumnHeader}" TargetType="DataGridColumnHeader">
-        <Setter Property="Foreground" Value="{DynamicResource DataGridColumnHeaderForegroundBrush}" />
-        <Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderBackgroundBrush}" />
+        <Setter Property="Foreground" Value="{DynamicResource DataGridColumnHeaderForeground}" />
+        <Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderBackground}" />
         <Setter Property="HorizontalContentAlignment" Value="Stretch" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Focusable" Value="False" />
-        <Setter Property="SeparatorBrush" Value="{DynamicResource DataGridGridLinesBrush}" />
-        <Setter Property="Padding" Value="12,0,0,0" />
-        <Setter Property="FontSize" Value="12" />
-        <Setter Property="MinHeight" Value="32" />
+        <Setter Property="SeparatorBrush" Value="{DynamicResource DataGridLineBrush}" />
+        <Setter Property="Padding" Value="{DynamicResource DataGridColumnHeaderPadding}" />
+        <Setter Property="MinHeight" Value="{DynamicResource DataGridColumnHeaderMinHeight}" />
         <Setter Property="Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="DataGridColumnHeader">
                 <Border
                     x:Name="HeaderBorder"
                     Background="{TemplateBinding Background}"
@@ -126,7 +116,6 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid Name="PART_ColumnHeaderRoot" ColumnDefinitions="*,Auto">
-
                         <Grid
                             Margin="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
@@ -135,20 +124,14 @@
                                 <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="Auto" MinWidth="32" />
                             </Grid.ColumnDefinitions>
-
                             <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
-
-                            <Path
+                            <PathIcon
                                 Name="SortIcon"
                                 Grid.Column="1"
-                                Height="12"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                Fill="{TemplateBinding Foreground}"
-                                IsVisible="False"
-                                Stretch="Uniform" />
+                                Width="8"
+                                Height="8"
+                                Foreground="{TemplateBinding Foreground}" />
                         </Grid>
-
                         <Rectangle
                             Name="VerticalSeparator"
                             Grid.Column="1"
@@ -156,29 +139,20 @@
                             VerticalAlignment="Stretch"
                             Fill="{TemplateBinding SeparatorBrush}"
                             IsVisible="{TemplateBinding AreSeparatorsVisible}" />
-
-                        <Grid
+                        <Panel
                             x:Name="FocusVisual"
+                            Grid.Column="0"
                             IsHitTestVisible="False"
                             IsVisible="False">
                             <Rectangle
-                                x:Name="FocusVisualPrimary"
+                                Margin="{DynamicResource DataGridCellVisualBorderThickness}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="Transparent"
                                 IsHitTestVisible="False"
-                                Stroke="{DynamicResource DataGridCellFocusVisualPrimaryBrush}"
-                                StrokeThickness="2" />
-                            <Rectangle
-                                x:Name="FocusVisualSecondary"
-                                Margin="2"
-                                HorizontalAlignment="Stretch"
-                                VerticalAlignment="Stretch"
-                                Fill="Transparent"
-                                IsHitTestVisible="False"
-                                Stroke="{DynamicResource DataGridCellFocusVisualSecondaryBrush}"
-                                StrokeThickness="1" />
-                        </Grid>
+                                Stroke="{DynamicResource DataGridCellFocusBorderBrush}"
+                                StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
+                        </Panel>
                     </Grid>
                 </Border>
             </ControlTemplate>
@@ -189,25 +163,25 @@
         </Style>
 
         <Style Selector="^:pointerover /template/ Grid#PART_ColumnHeaderRoot">
-            <Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderHoveredBackgroundBrush}" />
+            <Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderPointeroverBackground}" />
         </Style>
 
         <Style Selector="^:pressed /template/ Grid#PART_ColumnHeaderRoot">
-            <Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderPressedBackgroundBrush}" />
+            <Setter Property="Background" Value="{DynamicResource DataGridColumnHeaderPressedBackground}" />
         </Style>
 
         <Style Selector="^:dragIndicator">
             <Setter Property="Opacity" Value="0.5" />
         </Style>
 
-        <Style Selector="^:sortascending /template/ Path#SortIcon">
+        <Style Selector="^:sortascending /template/ PathIcon#SortIcon">
             <Setter Property="IsVisible" Value="True" />
-            <Setter Property="Data" Value="{DynamicResource DataGridSortIconAscendingPath}" />
+            <Setter Property="Data" Value="{DynamicResource DataGridColumnHeaderAscendingGlyph}" />
         </Style>
 
-        <Style Selector="^:sortdescending /template/ Path#SortIcon">
+        <Style Selector="^:sortdescending /template/ PathIcon#SortIcon">
             <Setter Property="IsVisible" Value="True" />
-            <Setter Property="Data" Value="{DynamicResource DataGridSortIconDescendingPath}" />
+            <Setter Property="Data" Value="{DynamicResource DataGridColumnHeaderDescendingGlyph}" />
         </Style>
     </ControlTheme>
 
@@ -220,14 +194,14 @@
                 <Grid x:Name="TopLeftHeaderRoot" RowDefinitions="*,*,Auto">
                     <Border
                         Grid.RowSpan="2"
-                        BorderBrush="{DynamicResource DataGridGridLinesBrush}"
+                        BorderBrush="{DynamicResource DataGridLineBrush}"
                         BorderThickness="0,0,1,0" />
                     <Rectangle
                         Grid.Row="0"
                         Grid.RowSpan="2"
                         Height="1"
                         VerticalAlignment="Bottom"
-                        Fill="{DynamicResource DataGridGridLinesBrush}"
+                        Fill="{DynamicResource DataGridLineBrush}"
                         StrokeThickness="1" />
                 </Grid>
             </ControlTemplate>
@@ -236,7 +210,7 @@
 
     <ControlTheme x:Key="{x:Type DataGridRowHeader}" TargetType="DataGridRowHeader">
         <Setter Property="Focusable" Value="False" />
-        <Setter Property="SeparatorBrush" Value="{DynamicResource DataGridGridLinesBrush}" />
+        <Setter Property="SeparatorBrush" Value="{DynamicResource DataGridLineBrush}" />
         <Setter Property="AreSeparatorsVisible" Value="False" />
         <Setter Property="Template">
             <ControlTemplate>
@@ -252,18 +226,19 @@
                         <Grid Background="{TemplateBinding Background}">
                             <Rectangle
                                 x:Name="RowInvalidVisualElement"
-                                Fill="{DynamicResource DataGridRowInvalidBrush}"
+                                Fill="{DynamicResource DataGridCellErrorBrush}"
                                 Opacity="0"
                                 Stretch="Fill" />
                             <Rectangle
                                 x:Name="BackgroundRectangle"
-                                Fill="{DynamicResource DataGridRowBackgroundBrush}"
+                                Fill="{DynamicResource DataGridRowBackground}"
                                 Stretch="Fill" />
                         </Grid>
                     </Border>
                     <Rectangle
                         x:Name="HorizontalSeparator"
                         Grid.Row="2"
+                        Grid.Column="0"
                         Grid.ColumnSpan="2"
                         Height="1"
                         Margin="1,0,1,0"
@@ -272,8 +247,10 @@
                         IsVisible="{TemplateBinding AreSeparatorsVisible}" />
 
                     <ContentPresenter
+                        Grid.Row="0"
                         Grid.RowSpan="2"
                         Grid.Column="1"
+                        Margin="{DynamicResource DataGridRowHeaderMargin}"
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         Content="{TemplateBinding Content}" />
@@ -286,7 +263,7 @@
         <Setter Property="Focusable" Value="False" />
         <Setter Property="Background" Value="{Binding $parent[DataGrid].RowBackground}" />
         <Setter Property="Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="DataGridRow">
                 <Border
                     x:Name="RowBorder"
                     Background="{TemplateBinding Background}"
@@ -302,11 +279,11 @@
                             Name="BackgroundRectangle"
                             Grid.RowSpan="2"
                             Grid.ColumnSpan="2"
-                            Fill="{DynamicResource DataGridRowBackgroundBrush}" />
+                            Fill="{DynamicResource DataGridRowBackground}" />
                         <Rectangle
                             x:Name="InvalidVisualElement"
                             Grid.ColumnSpan="2"
-                            Fill="{DynamicResource DataGridRowInvalidBrush}"
+                            Fill="{DynamicResource DataGridRowErrorBackground}"
                             Opacity="0" />
 
                         <DataGridRowHeader
@@ -321,14 +298,13 @@
                             Name="PART_DetailsPresenter"
                             Grid.Row="1"
                             Grid.Column="1"
-                            Background="{DynamicResource DataGridDetailsPresenterBackgroundBrush}" />
+                            Background="{DynamicResource DataGridDetailsPresenterBackground}" />
                         <Rectangle
                             Name="PART_BottomGridLine"
                             Grid.Row="2"
                             Grid.Column="1"
                             Height="1"
                             HorizontalAlignment="Stretch" />
-
                     </DataGridFrozenGrid>
                 </Border>
             </ControlTemplate>
@@ -344,83 +320,75 @@
         </Style>
 
         <Style Selector="^:pointerover /template/ Rectangle#BackgroundRectangle">
-            <Setter Property="Fill" Value="{DynamicResource DataGridRowHoveredBackgroundColor}" />
+            <Setter Property="Fill" Value="{DynamicResource DataGridRowPointeroverBackground}" />
         </Style>
 
         <Style Selector="^:selected">
             <Style Selector="^ /template/ Rectangle#BackgroundRectangle">
-                <Setter Property="Fill" Value="{DynamicResource DataGridRowSelectedUnfocusedBackgroundBrush}" />
-                <Setter Property="Opacity" Value="{DynamicResource DataGridRowSelectedUnfocusedBackgroundOpacity}" />
+                <Setter Property="Fill" Value="{DynamicResource DataGridRowSelectedBackground}" />
             </Style>
             <Style Selector="^:pointerover /template/ Rectangle#BackgroundRectangle">
-                <Setter Property="Fill" Value="{DynamicResource DataGridRowSelectedHoveredUnfocusedBackgroundBrush}" />
-                <Setter Property="Opacity" Value="{DynamicResource DataGridRowSelectedHoveredUnfocusedBackgroundOpacity}" />
+                <Setter Property="Fill" Value="{DynamicResource DataGridRowSelectedPointeroverBackground}" />
             </Style>
             <Style Selector="^:focus /template/ Rectangle#BackgroundRectangle">
-                <Setter Property="Fill" Value="{DynamicResource DataGridRowSelectedBackgroundBrush}" />
-                <Setter Property="Opacity" Value="{DynamicResource DataGridRowSelectedBackgroundOpacity}" />
+                <Setter Property="Fill" Value="{DynamicResource DataGridRowSelectedBackground}" />
             </Style>
             <Style Selector="^:pointerover:focus /template/ Rectangle#BackgroundRectangle">
-                <Setter Property="Fill" Value="{DynamicResource DataGridRowSelectedHoveredBackgroundBrush}" />
-                <Setter Property="Opacity" Value="{DynamicResource DataGridRowSelectedHoveredBackgroundOpacity}" />
+                <Setter Property="Fill" Value="{DynamicResource DataGridRowSelectedPointeroverBackground}" />
             </Style>
         </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="FluentDataGridRowGroupExpanderButtonTheme" TargetType="ToggleButton">
+    <ControlTheme x:Key="DataGridRowGroupExpanderButtonTheme" TargetType="ToggleButton">
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
-            <ControlTemplate>
-                <Border
+            <ControlTemplate TargetType="ToggleButton">
+                <PathIcon
                     Width="12"
                     Height="12"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
-                    Background="Transparent">
-                    <Path
-                        HorizontalAlignment="Right"
-                        VerticalAlignment="Center"
-                        Data="{DynamicResource DataGridRowGroupHeaderIconClosedPath}"
-                        Fill="{TemplateBinding Foreground}"
-                        Stretch="Uniform" />
-                </Border>
+                    Background="Transparent"
+                    Data="{DynamicResource DataGridRowGroupHeaderExpandIconGlyph}"
+                    Foreground="{DynamicResource DataGridRowGroupHeaderExpandIconForeground}">
+                    <PathIcon.Transitions>
+                        <Transitions>
+                            <TransformOperationsTransition Property="RenderTransform" Duration="0.1" />
+                        </Transitions>
+                    </PathIcon.Transitions>
+                </PathIcon>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:checked /template/ Path">
-            <Setter Property="Data" Value="{DynamicResource DataGridRowGroupHeaderIconOpenedPath}" />
+        <Style Selector="^:checked /template/ PathIcon">
+            <Setter Property="PathIcon.RenderTransform" Value="rotate(90deg)" />
         </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type DataGridRowGroupHeader}" TargetType="DataGridRowGroupHeader">
         <Setter Property="Focusable" Value="False" />
-        <Setter Property="Foreground" Value="{DynamicResource DataGridRowGroupHeaderForegroundBrush}" />
-        <Setter Property="Background" Value="{DynamicResource DataGridRowGroupHeaderBackgroundBrush}" />
-        <Setter Property="FontSize" Value="15" />
+        <Setter Property="Background" Value="{DynamicResource DataGridRowGroupHeaderBackground}" />
         <Setter Property="MinHeight" Value="32" />
         <Setter Property="Template">
-            <ControlTemplate x:DataType="collections:DataGridCollectionViewGroup">
+            <ControlTemplate x:DataType="collections:DataGridCollectionViewGroup" TargetType="DataGridRowGroupHeader">
                 <DataGridFrozenGrid
                     Name="PART_Root"
                     MinHeight="{TemplateBinding MinHeight}"
                     Background="{TemplateBinding Background}"
                     ColumnDefinitions="Auto,Auto,Auto,Auto,*"
                     RowDefinitions="*,Auto">
-
-                    <Rectangle Name="PART_IndentSpacer" Grid.Column="1" />
+                    <Rectangle
+                        Name="PART_IndentSpacer"
+                        Grid.Row="0"
+                        Grid.Column="1" />
                     <ToggleButton
                         Name="PART_ExpanderButton"
+                        Grid.Row="0"
                         Grid.Column="2"
-                        Width="12"
-                        Height="12"
                         Margin="12,0,0,0"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
                         Focusable="False"
-                        Foreground="{TemplateBinding Foreground}"
-                        Theme="{StaticResource FluentDataGridRowGroupExpanderButtonTheme}" />
-
+                        Theme="{StaticResource DataGridRowGroupExpanderButtonTheme}" />
                     <StackPanel
+                        Grid.Row="0"
                         Grid.Column="3"
                         Margin="12,0,0,0"
                         VerticalAlignment="Center"
@@ -443,46 +411,45 @@
 
                     <Rectangle
                         x:Name="CurrencyVisual"
-                        Grid.ColumnSpan="5"
+                        Grid.Row="0"
+                        Grid.Column="0"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         Fill="Transparent"
                         IsHitTestVisible="False"
                         IsVisible="False"
-                        Stroke="{DynamicResource DataGridCurrencyVisualPrimaryBrush}"
-                        StrokeThickness="1" />
-                    <Grid
+                        Stroke="{DynamicResource DataGridRowGroupHeaderCurrentBorderBrush}"
+                        StrokeThickness="{DynamicResource DataGridRowGroupHeaderVisualStrokeThickness}" />
+                    <Panel
                         x:Name="FocusVisual"
-                        Grid.ColumnSpan="5"
+                        Grid.Row="0"
+                        Grid.Column="0"
                         IsHitTestVisible="False"
                         IsVisible="False">
                         <Rectangle
+                            Margin="{DynamicResource DataGridCellVisualBorderThickness}"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Fill="Transparent"
                             IsHitTestVisible="False"
-                            Stroke="{DynamicResource DataGridCellFocusVisualPrimaryBrush}"
-                            StrokeThickness="2" />
-                        <Rectangle
-                            Margin="2"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            Fill="Transparent"
-                            IsHitTestVisible="False"
-                            Stroke="{DynamicResource DataGridCellFocusVisualSecondaryBrush}"
-                            StrokeThickness="1" />
-                    </Grid>
+                            Stroke="{DynamicResource DataGridCellFocusBorderBrush}"
+                            StrokeThickness="{DynamicResource DataGridCellVisualStrokeThickness}" />
+                    </Panel>
 
                     <DataGridRowHeader
                         Name="PART_RowHeader"
+                        Grid.Row="0"
                         Grid.RowSpan="2"
+                        Grid.Column="0"
                         DataGridFrozenGrid.IsFrozen="True" />
 
                     <Rectangle
                         x:Name="PART_BottomGridLine"
                         Grid.Row="1"
+                        Grid.Column="0"
                         Grid.ColumnSpan="5"
-                        Height="1" />
+                        Height="1"
+                        Fill="{DynamicResource DataGridLineBrush}" />
                 </DataGridFrozenGrid>
             </ControlTemplate>
         </Setter>
@@ -495,15 +462,15 @@
         <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
         <Setter Property="SelectionMode" Value="Extended" />
         <Setter Property="GridLinesVisibility" Value="None" />
-        <Setter Property="HorizontalGridLinesBrush" Value="{DynamicResource DataGridGridLinesBrush}" />
-        <Setter Property="VerticalGridLinesBrush" Value="{DynamicResource DataGridGridLinesBrush}" />
+        <Setter Property="HorizontalGridLinesBrush" Value="{DynamicResource DataGridLineBrush}" />
+        <Setter Property="VerticalGridLinesBrush" Value="{DynamicResource DataGridLineBrush}" />
         <Setter Property="DropLocationIndicatorTemplate">
             <Template>
                 <Rectangle Width="2" Fill="{DynamicResource DataGridDropLocationIndicatorBackground}" />
             </Template>
         </Setter>
         <Setter Property="Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="DataGrid">
                 <Border
                     x:Name="DataGridBorder"
                     Background="{TemplateBinding Background}"
@@ -511,7 +478,11 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid ColumnDefinitions="Auto,*,Auto" RowDefinitions="Auto,*,Auto,Auto">
-                        <DataGridColumnHeader Name="PART_TopLeftCornerHeader" Theme="{StaticResource DataGridTopLeftColumnHeader}" />
+                        <DataGridColumnHeader
+                            Name="PART_TopLeftCornerHeader"
+                            Grid.Row="0"
+                            Grid.Column="0"
+                            Theme="{StaticResource DataGridTopLeftColumnHeader}" />
                         <DataGridColumnHeadersPresenter
                             Name="PART_ColumnHeadersPresenter"
                             Grid.Row="0"
@@ -524,7 +495,7 @@
                             Grid.ColumnSpan="3"
                             Height="1"
                             VerticalAlignment="Bottom"
-                            Fill="{DynamicResource DataGridGridLinesBrush}" />
+                            Fill="{DynamicResource DataGridLineBrush}" />
 
                         <DataGridRowsPresenter
                             Name="PART_RowsPresenter"
@@ -545,7 +516,6 @@
                             Name="PART_VerticalScrollbar"
                             Grid.Row="1"
                             Grid.Column="2"
-                            Width="{DynamicResource ScrollBarSize}"
                             Orientation="Vertical" />
 
                         <Grid
@@ -567,7 +537,7 @@
                             Grid.ColumnSpan="3"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
-                            Background="{DynamicResource DataGridDisabledVisualElementBackground}"
+                            Background="{DynamicResource DataGridDisabledBackground}"
                             CornerRadius="2"
                             IsHitTestVisible="False"
                             IsVisible="{Binding !$parent[DataGrid].IsEnabled}" />
diff --git a/src/Semi.Avalonia.DataGrid/Index.axaml b/src/Semi.Avalonia.DataGrid/Index.axaml
index 86fd188..8c433bb 100644
--- a/src/Semi.Avalonia.DataGrid/Index.axaml
+++ b/src/Semi.Avalonia.DataGrid/Index.axaml
@@ -2,6 +2,10 @@
     <!--  Add Resources Here  -->
     <Styles.Resources>
         <ResourceDictionary>
+            <ResourceDictionary.ThemeDictionaries>
+                <ResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.DataGrid/Light.axaml" />
+                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.DataGrid/Dark.axaml" />
+            </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="avares://Semi.Avalonia.DataGrid/DataGrid.axaml" />
             </ResourceDictionary.MergedDictionaries>
diff --git a/src/Semi.Avalonia.DataGrid/Light.axaml b/src/Semi.Avalonia.DataGrid/Light.axaml
index 9017e8d..7c29b49 100644
--- a/src/Semi.Avalonia.DataGrid/Light.axaml
+++ b/src/Semi.Avalonia.DataGrid/Light.axaml
@@ -1,3 +1,43 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="#1C1F23" />
+
+    <Thickness x:Key="DataGridCellTextBlockDefaultMargin">12 0</Thickness>
+    <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#C6CACD" />
+    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#FEF2ED" />
+    <x:Double x:Key="DataGridCellMinHeight">32</x:Double>
+    <Thickness x:Key="DataGridCellVisualBorderThickness">1</Thickness>
+    <x:Double x:Key="DataGridCellVisualStrokeThickness">1</x:Double>
+
+
+    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
+    <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
+    <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
+    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />
+
+    <PathGeometry x:Key="DataGridColumnHeaderAscendingGlyph">M6.45096 8.34102L11.247 2.86102C11.3408 2.75361 11.4566 2.66753 11.5865 2.60854C11.7163 2.54956 11.8573 2.51904 12 2.51904C12.1426 2.51904 12.2836 2.54956 12.4135 2.60854C12.5433 2.66753 12.6591 2.75361 12.753 2.86102L17.549 8.34102C18.115 8.98802 17.655 10 16.796 10H7.20396C6.34396 10 5.88496 8.98802 6.45096 8.34102Z</PathGeometry>
+    <PathGeometry x:Key="DataGridColumnHeaderDescendingGlyph">M17.549 15.659L12.753 21.139C12.6591 21.2464 12.5434 21.3325 12.4135 21.3915C12.2836 21.4505 12.1427 21.481 12 21.481C11.8574 21.481 11.7164 21.4505 11.5865 21.3915C11.4566 21.3325 11.3409 21.2464 11.247 21.139L6.45101 15.659C5.88501 15.011 6.34501 14 7.20401 14H16.796C17.656 14 18.115 15.012 17.549 15.659Z</PathGeometry>
+
+    <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
+    <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>
+
+    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#FEF2ED" />
+    <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
+
+    <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Color="#EAF5FF" />
+    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Color="#CBE7FE" />
+
+    <PathGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.62" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.05" Color="#2E3238" />
+
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>
+
+    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#F9F9F9" />
 </ResourceDictionary>