feat: enhance MenuItem icon.

.github/FUNDING.yml

@@ -1,15 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
-open_collective: semiavalonia
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-polar: # Replace with a single Polar username
-buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
-thanks_dev: # Replace with a single thanks.dev username
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/pack-nightly.yml

@@ -21,7 +21,7 @@ on:
       Semi_Avalonia_DataGrid:
         description: 'Pack Semi.Avalonia.DataGrid'
         required: true
-        default: 'false'
+        default: 'true'
         type: boolean
       Semi_Avalonia_TreeDataGrid:
         description: 'Pack Semi.Avalonia.TreeDataGrid'

.github/workflows/pack.yml

@@ -16,7 +16,7 @@ on:
       Semi_Avalonia_DataGrid:
         description: 'Pack Semi.Avalonia.DataGrid'
         required: true
-        default: 'false'
+        default: 'true'
         type: boolean
       Semi_Avalonia_TreeDataGrid:
         description: 'Pack Semi.Avalonia.TreeDataGrid'

.github/workflows/release-tag.yml

@@ -20,6 +20,9 @@ jobs:
       - name: Pack Semi.Avalonia.ColorPicker
         run: dotnet pack ./src/Semi.Avalonia.ColorPicker -o ./nugets
 
+      - name: Pack Semi.Avalonia.DataGrid
+        run: dotnet pack ./src/Semi.Avalonia.DataGrid -o ./nugets
+
       - name: Upload a Build Artifact
         uses: actions/upload-artifact@v4
         with:

demo/Directory.Build.props

@@ -1,7 +1,6 @@
 <Project>
     <PropertyGroup>
-        <AvaloniaVersion>11.2.5</AvaloniaVersion>
-        <DataGridVersion>11.2.5</DataGridVersion>
+        <AvaloniaVersion>11.2.3</AvaloniaVersion>
         <CommunityToolkitVersion>8.4.0</CommunityToolkitVersion>
     </PropertyGroup>
 </Project>

demo/Semi.Avalonia.Demo/Constant/ColorTokens.cs

@@ -1,143 +0,0 @@
-using System;
-using System.Collections.Generic;
-
-namespace Semi.Avalonia.Demo.Constant;
-
-public static class ColorTokens
-{
-    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorPrimary", "Primary"),
-        new("SemiColorPrimaryPointerover", "Primary Pointerover"),
-        new("SemiColorPrimaryActive", "Primary Active"),
-        new("SemiColorPrimaryDisabled", "Primary Disabled"),
-        new("SemiColorPrimaryLight", "Primary Light"),
-        new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
-        new("SemiColorPrimaryLightActive", "Primary Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorSecondary", "Secondary"),
-        new("SemiColorSecondaryPointerover", "Secondary Pointerover"),
-        new("SemiColorSecondaryActive", "Secondary Active"),
-        new("SemiColorSecondaryDisabled", "Secondary Disabled"),
-        new("SemiColorSecondaryLight", "Secondary Light"),
-        new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
-        new("SemiColorSecondaryLightActive", "Secondary Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorTertiary", "Tertiary"),
-        new("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
-        new("SemiColorTertiaryActive", "Tertiary Active"),
-        new("SemiColorTertiaryLight", "Tertiary Light"),
-        new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
-        new("SemiColorTertiaryLightActive", "Tertiary Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorInformation", "Information"),
-        new("SemiColorInformationPointerover", "Information Pointerover"),
-        new("SemiColorInformationActive", "Information Active"),
-        new("SemiColorInformationDisabled", "Information Disabled"),
-        new("SemiColorInformationLight", "Information Light"),
-        new("SemiColorInformationLightPointerover", "Information Light Pointerover"),
-        new("SemiColorInformationLightActive", "Information Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorSuccess", "Success"),
-        new("SemiColorSuccessPointerover", "Success Pointerover"),
-        new("SemiColorSuccessActive", "Success Active"),
-        new("SemiColorSuccessDisabled", "Success Disabled"),
-        new("SemiColorSuccessLight", "Success Light"),
-        new("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
-        new("SemiColorSuccessLightActive", "Success Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorWarning", "Warning"),
-        new("SemiColorWarningPointerover", "Warning Pointerover"),
-        new("SemiColorWarningActive", "Warning Active"),
-        new("SemiColorWarningLight", "Warning Light"),
-        new("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
-        new("SemiColorWarningLightActive", "Warning Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorDanger", "Danger"),
-        new("SemiColorDangerPointerover", "Danger Pointerover"),
-        new("SemiColorDangerActive", "Danger Active"),
-        new("SemiColorDangerLight", "Danger Light"),
-        new("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
-        new("SemiColorDangerLightActive", "Danger Light Active"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorText0", "Text 0"),
-        new("SemiColorText1", "Text 1"),
-        new("SemiColorText2", "Text 2"),
-        new("SemiColorText3", "Text 3"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorLink", "Link"),
-        new("SemiColorLinkPointerover", "Link Pointerover"),
-        new("SemiColorLinkActive", "Link Active"),
-        new("SemiColorLinkVisited", "Link Visited"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorBackground0", "Background 0"),
-        new("SemiColorBackground1", "Background 1"),
-        new("SemiColorBackground2", "Background 2"),
-        new("SemiColorBackground3", "Background 3"),
-        new("SemiColorBackground4", "Background 4"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorFill0", "Fill 0"),
-        new("SemiColorFill1", "Fill 1"),
-        new("SemiColorFill2", "Fill 2"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorBorder", "Border"),
-        new("SemiColorFocusBorder", "Focus Border"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorDisabledText", "Disabled Text"),
-        new("SemiColorDisabledBorder", "Disabled Border"),
-        new("SemiColorDisabledBackground", "Disabled Background"),
-        new("SemiColorDisabledFill", "Disabled Fill"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> OtherTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorWhite", "White"),
-        new("SemiColorBlack", "Black"),
-        new("SemiColorNavBackground", "Navigation Background"),
-        new("SemiColorOverlayBackground", "Overlay Background"),
-        new("SemiColorHighlightBackground", "Highlight Background"),
-        new("SemiColorHighlight", "Highlight Text"),
-    };
-
-    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
-    {
-        new("SemiColorShadow", "Shadow"),
-        new("SemiShadowElevated", "Shadow Elevated"),
-    };
-}

demo/Semi.Avalonia.Demo/Pages/ColorPickerDemo.axaml

@@ -2,7 +2,8 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi"
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker;assembly=Semi.Avalonia.ColorPicker"
+    xmlns:controls="using:Avalonia.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     d:DesignHeight="1450"
@@ -10,15 +11,18 @@
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel Spacing="20">
-            <StackPanel Orientation="Horizontal" Spacing="20">
+            <StackPanel
+                VerticalAlignment="Top"
+                Orientation="Horizontal"
+                Spacing="20">
                 <ColorView Name="Test" ColorSpectrumShape="Ring" />
                 <ColorView ColorSpectrumShape="Box" />
                 <ColorView Palette="{DynamicResource SemiColorPalette}" />
             </StackPanel>
-            <StackPanel Orientation="Horizontal">
+            <StackPanel VerticalAlignment="Top" Orientation="Horizontal">
                 <ColorView
                     Name="SimpleColorViewTest"
-                    HsvColor="hsv(180,80%,70%)"
+                    HsvColor="hsv(120,11%,10%)"
                     IsAlphaVisible="True"
                     Theme="{StaticResource SimpleColorView}" />
                 <StackPanel>
@@ -26,55 +30,63 @@
                     <TextBlock Text="{Binding #SimpleColorViewTest.Color}" />
                 </StackPanel>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" Spacing="8">
-                <ColorPicker ColorSpectrumShape="Ring">
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
+                <ColorPicker Margin="8" ColorSpectrumShape="Ring">
                     <ColorPicker.Palette>
-                        <FlatHalfColorPalette />
+                        <controls:FlatHalfColorPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
-                <ColorPicker ColorSpectrumShape="Box">
+                <ColorPicker Margin="8" ColorSpectrumShape="Box">
                     <ColorPicker.Palette>
-                        <semi:SemiColorLightPalette />
+                        <colorPicker:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
+
                 <ColorPicker
-                    Theme="{DynamicResource HexColorPicker}"
-                    ColorSpectrumShape="Box">
+                    Margin="8"
+                    ColorSpectrumShape="Box"
+                    Theme="{DynamicResource HexColorPicker}">
                     <ColorPicker.Palette>
-                        <semi:SemiColorLightPalette />
+                        <colorPicker:SemiColorLightPalette />
                     </ColorPicker.Palette>
                 </ColorPicker>
             </StackPanel>
-            <StackPanel HorizontalAlignment="Left">
-                <TextBlock Text="Use Style to customize button" />
+            <StackPanel HorizontalAlignment="Left" >
+                <TextBlock Text="Use Style to customize button"></TextBlock>
                 <ColorPicker
                     Margin="8"
-                    MinWidth="32"
-                    HsvColor="hsv(180,80%,70%)">
+                    Width="32"
+                    HsvColor="hsv(120,11%,10%)"
+                    >
                     <ColorPicker.Content>
                         <Border
                             Margin="1"
-                            Background="{Binding $parent[ColorPicker].HsvColor, Converter={StaticResource ToBrushConverter}}"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{Binding $parent[ColorPicker].HsvColor, 
+                                                     Converter={StaticResource ToBrushConverter}}"
                             CornerRadius="1" />
                     </ColorPicker.Content>
                     <ColorPicker.Styles>
                         <Style Selector="DropDownButton">
-                            <Setter Property="Padding" Value="0" />
+                            <Setter Property="Padding" Value="0"/>
                             <Style Selector="^ /template/ PathIcon">
-                                <Setter Property="IsVisible" Value="False" />
+                                <Setter Property="IsVisible" Value="False"/>
                             </Style>
                         </Style>
                     </ColorPicker.Styles>
                 </ColorPicker>
-            </StackPanel>
 
-            <StackPanel Orientation="Horizontal" Spacing="8">
+            </StackPanel>
+            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                 <ColorPicker
-                    Theme="{StaticResource SimpleColorPicker}"
-                    HsvColor="hsv(180,80%,70%)" />
+                    Margin="8"
+                    HsvColor="hsv(120,11%,10%)"
+                    Theme="{StaticResource SimpleColorPicker}" />
                 <ColorPicker
-                    Theme="{StaticResource HexSimpleColorPicker}"
-                    HsvColor="hsv(180,80%,70%)" />
+                    Margin="8"
+                    HsvColor="hsv(120,11%,10%)"
+                    Theme="{StaticResource HexSimpleColorPicker}" />
             </StackPanel>
         </StackPanel>
     </ScrollViewer>

demo/Semi.Avalonia.Demo/Pages/DataGridDemo.axaml

@@ -3,6 +3,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     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"
@@ -14,9 +15,8 @@
         <TabItem Header="DataGrid">
            <Grid RowDefinitions="Auto, *">
                <StackPanel Grid.Row="0" Orientation="Horizontal">
-                   <ToggleSwitch Content="Enable" Name="enable" IsChecked="True" />
-                   <ToggleSwitch Content="Inset Content" Name="inset" />
-                   <ToggleSwitch Content="ScrollBar Auto Hide" Name="autohide" />
+                   <ToggleSwitch Content="Disable" Name="DisableToggle" />
+                   <ToggleSwitch Content="ScrollViewerHide" Name="ScrollViewerHide" />
                </StackPanel>
                <DataGrid Grid.Row="1"
                          Margin="8"
@@ -25,9 +25,8 @@
                          CanUserSortColumns="True"
                          HeadersVisibility="All"
                          IsReadOnly="True"
-                         Classes.InsetContent="{Binding #inset.IsChecked}"
-                         ScrollViewer.AllowAutoHide="{Binding #autohide.IsChecked}"
-                         IsEnabled="{Binding #enable.IsChecked}"
+                         ScrollViewer.AllowAutoHide="{Binding #ScrollViewerHide.IsChecked}"
+                         IsEnabled="{Binding #DisableToggle.IsChecked}"
                          ItemsSource="{Binding GridData1}">
                    <DataGrid.Columns>
                        <DataGridTextColumn

demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml

@@ -5,7 +5,6 @@
              xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
              xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
              xmlns:cvt="clr-namespace:Semi.Avalonia.Demo.Converters"
-             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
              mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="1450"
              x:DataType="vm:HighContrastDemoViewModel"
              x:CompileBindings="True"
@@ -307,18 +306,6 @@
                                     </DataTemplate>
                                 </DataGridTemplateColumn.CellTemplate>
                             </DataGridTemplateColumn>
-
-                            <DataGridTemplateColumn Width="100" Header="CopyText">
-                                <DataGridTemplateColumn.CellTemplate>
-                                    <DataTemplate DataType="vm:ColorResource">
-                                        <Button
-                                            Command="{Binding $parent[pages:HighContrastDemo].Copy}"
-                                            CommandParameter="{Binding CopyText}"
-                                            Theme="{DynamicResource  IconBorderlessButton}"
-                                            Content="{StaticResource SemiIconCopy}" />
-                                    </DataTemplate>
-                                </DataGridTemplateColumn.CellTemplate>
-                            </DataGridTemplateColumn>
                         </DataGrid.Columns>
                     </DataGrid>
                 </StackPanel>

demo/Semi.Avalonia.Demo/Pages/HighContrastDemo.axaml.cs

@@ -1,5 +1,4 @@
-using System.Threading.Tasks;
-using Avalonia.Controls;
+using Avalonia.Controls;
 using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
@@ -11,14 +10,4 @@ public partial class HighContrastDemo : UserControl
         InitializeComponent();
         this.DataContext = new HighContrastDemoViewModel();
     }
-
-    public async Task Copy(object? o)
-    {
-        if (o is null) return;
-        var toplevel = TopLevel.GetTopLevel(this);
-        if (toplevel?.Clipboard is { } c)
-        {
-            await c.SetTextAsync(o.ToString());
-        }
-    }
 }

demo/Semi.Avalonia.Demo/Pages/ListBoxDemo.axaml

@@ -119,11 +119,11 @@
                     <StackPanel Spacing="20">
                         <TextBlock Text="Theme: CheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple,Toggle"
+                            SelectionMode="Multiple"
                             Theme="{DynamicResource CheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CheckGroupListBox}"
-                                 SelectionMode="Multiple,Toggle"
+                                 SelectionMode="Multiple"
                                  IsEnabled="False">
                             <ListBoxItem IsSelected="True">Avalonia</ListBoxItem>
                             <ListBoxItem>WPF</ListBoxItem>
@@ -131,11 +131,11 @@
 
                         <TextBlock Text="Theme: CardCheckGroupListBox"/>
                         <ListBox
-                            SelectionMode="Multiple,Toggle"
+                            SelectionMode="Multiple"
                             Theme="{DynamicResource CardCheckGroupListBox}"
                             ItemsSource="{Binding $parent[local:ListBoxDemo].Items}" />
                         <ListBox Theme="{DynamicResource CardCheckGroupListBox}"
-                                 SelectionMode="Multiple,Toggle"
+                                 SelectionMode="Multiple"
                                  IsEnabled="False">
                             <ListBoxItem>Avalonia</ListBoxItem>
                             <ListBoxItem IsSelected="True">WPF</ListBoxItem>

demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml

@@ -50,6 +50,22 @@
                     <MenuItem Header="Radio 5" ToggleType="Radio" />
                 </MenuItem>
             </MenuItem>
+            <MenuItem Header="_Icon">
+                <MenuItem Header="Nothing" Icon="🐼" />
+                <MenuItem Header="TextBlock">
+                    <MenuItem.Icon>
+                        <TextBlock Text="🐼" />
+                    </MenuItem.Icon>
+                </MenuItem>
+                <MenuItem Header="Geometry" Icon="{StaticResource SemiIconSemiLogo}" />
+                <MenuItem Header="PathIcon">
+                    <MenuItem.Icon>
+                        <PathIcon
+                            Theme="{StaticResource InnerPathIcon}"
+                            Data="{DynamicResource SemiIconSemiLogo}" />
+                    </MenuItem.Icon>
+                </MenuItem>
+            </MenuItem>
             <MenuItem Header="Parent">
                 <MenuItem Header="Child 1" />
                 <MenuItem Header="Child 2" />

demo/Semi.Avalonia.Demo/Pages/Overview.axaml

@@ -41,9 +41,9 @@
                     <Image.Source>
                         <DrawingImage>
                             <DrawingGroup>
-                                <GeometryDrawing Brush="#0D6EFD" 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="White" 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="White" 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" />
+                                <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>
@@ -234,7 +234,7 @@
                             VerticalAlignment="Top"
                             Palette="{DynamicResource SemiColorPalette}"
                             SelectedIndex="2"
-                            Color="#0D6EFD" />
+                            Color="#8B44AC" />
                         <StackPanel Width="300" Margin="8">
                             <StackPanel Orientation="Horizontal">
                                 <Slider

demo/Semi.Avalonia.Demo/Pages/Overview.axaml.cs

@@ -9,7 +9,7 @@ public partial class Overview : UserControl
         InitializeComponent();
     }
 
-    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.6";
+    public string MainInstall { get; set; } = "dotnet add package Semi.Avalonia --version 11.2.1.3";
 
     public string MainStyle { get; set; } =
         """
@@ -20,7 +20,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.6";
+    public string ColorPickerInstall { get; set; } = "dotnet add package Semi.Avalonia.ColorPicker --version 11.2.1.3";
 
     public string ColorPickerStyle { get; set; } =
         """
@@ -29,7 +29,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.6";
+    public string DataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.DataGrid --version 11.2.1.3";
 
     public string DataGridStyle { get; set; } =
         """
@@ -38,7 +38,7 @@ public partial class Overview : UserControl
         </Application.Styles>
         """;
 
-    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.2";
+    public string TreeDataGridInstall { get; set; } = "dotnet add package Semi.Avalonia.TreeDataGrid --version 11.0.10.1";
 
     public string TreeDataGridStyle { get; set; } =
         """

demo/Semi.Avalonia.Demo/Pages/PaletteDemo.axaml.cs

@@ -1,6 +1,8 @@
 using System.Threading.Tasks;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
+using Avalonia.Markup.Xaml;
 using Avalonia.Threading;
 using Semi.Avalonia.Demo.ViewModels;
 
@@ -14,20 +16,13 @@ public partial class PaletteDemo : UserControl
         this.DataContext = new PaletteDemoViewModel();
     }
 
-    protected override async void OnApplyTemplate(TemplateAppliedEventArgs e)
+    protected override async  void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);
         PaletteDemoViewModel? vm = this.DataContext as PaletteDemoViewModel;
-        await Dispatcher.UIThread.InvokeAsync(() => { vm?.InitializeResources(); });
-    }
-
-    public async Task Copy(object? o)
-    {
-        if (o is null) return;
-        var toplevel = TopLevel.GetTopLevel(this);
-        if (toplevel?.Clipboard is { } c)
+        await Dispatcher.UIThread.InvokeAsync(() =>
         {
-            await c.SetTextAsync(o.ToString());
-        }
+            vm?.InitializeResources();
+        });
     }
 }

demo/Semi.Avalonia.Demo/Pages/ScrollViewerDemo.axaml

@@ -9,22 +9,66 @@
     mc:Ignorable="d">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
-            <ToggleSwitch Name="inset" Content="Inset Content" />
-            <ToggleSwitch Name="autohide" Content="Allow AutoHide" />
             <ScrollViewer
+                Width="200"
+                Height="200"
                 Margin="10"
-                Width="200" Height="200"
-                AllowAutoHide="{Binding #autohide.IsChecked}"
-                Classes.InsetContent="{Binding #inset.IsChecked}"
                 HorizontalScrollBarVisibility="Auto">
-                <UniformGrid
-                    Rows="2" Columns="2"
-                    Width="300" Height="300">
-                    <Rectangle Fill="{DynamicResource SemiYellow2}" />
-                    <Rectangle Fill="{DynamicResource SemiBlue2}" />
-                    <Rectangle Fill="{DynamicResource SemiPink2}" />
-                    <Rectangle Fill="{DynamicResource SemiGreen2}" />
-                </UniformGrid>
+                <Grid RowDefinitions="Auto,Auto"
+                      ColumnDefinitions="Auto,Auto"
+                      Width="300" Height="300">
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiBlue2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiPink2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiGreen2}" />
+                </Grid>
+            </ScrollViewer>
+            <ScrollViewer
+                Width="200"
+                Height="200"
+                Margin="10"
+                HorizontalScrollBarVisibility="Auto"
+                Theme="{DynamicResource StaticScrollViewer}">
+                <Grid RowDefinitions="Auto,Auto"
+                      ColumnDefinitions="Auto,Auto"
+                      Width="300" Height="300">
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiYellow2}" />
+                    <Rectangle
+                        Grid.Row="0" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiBlue2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="0"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiPink2}" />
+                    <Rectangle
+                        Grid.Row="1" Grid.Column="1"
+                        Width="150"
+                        Height="150"
+                        Fill="{DynamicResource SemiGreen2}" />
+                </Grid>
             </ScrollViewer>
         </StackPanel>
     </ScrollViewer>

demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml

@@ -20,7 +20,7 @@
         </StackPanel>
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" />
-            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True" />
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True"/>
             <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" />
             <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" IsChecked="True" />
         </StackPanel>
@@ -64,9 +64,7 @@
         <StackPanel Orientation="Horizontal">
             <ToggleSwitch
                 HorizontalAlignment="Left"
-                Padding="{StaticResource SemiThicknessTight}"
-                Width="{StaticResource SemiSpacingExtraLoose}"
-                Height="{StaticResource SemiSpacingExtraLoose}"
+                Padding="8"
                 Theme="{DynamicResource ButtonToggleSwitch}"
                 Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
                 <ToggleSwitch.Content>
@@ -77,9 +75,7 @@
             </ToggleSwitch>
             <ToggleSwitch
                 HorizontalAlignment="Left"
-                Padding="{StaticResource SemiThicknessTight}"
-                Width="{StaticResource SemiSpacingExtraLoose}"
-                Height="{StaticResource SemiSpacingExtraLoose}"
+                Padding="8"
                 Theme="{DynamicResource ButtonToggleSwitch}"
                 Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
                 <ToggleSwitch.OnContent>

demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml

@@ -1,94 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-             xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-             xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
-             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Semi.Avalonia.Demo.Pages.VariablesDemo"
-             x:DataType="vm:VariablesDemoViewModel"
-             x:CompileBindings="True">
-    <Design.DataContext>
-        <vm:VariablesDemoViewModel />
-    </Design.DataContext>
-    <DataGrid
-        Margin="8"
-        CanUserReorderColumns="True"
-        CanUserResizeColumns="True"
-        CanUserSortColumns="True"
-        HeadersVisibility="All"
-        IsReadOnly="True"
-        ItemsSource="{Binding GridData}">
-        <DataGrid.Columns>
-            <DataGridTemplateColumn
-                Width="300"
-                x:DataType="vm:VariableItem"
-                Header="ResourceKey">
-                <DataGridTemplateColumn.CellTemplate>
-                    <DataTemplate DataType="vm:VariableItem">
-                        <SelectableTextBlock
-                            Margin="12,0"
-                            VerticalAlignment="Center"
-                            Text="{Binding ResourceKey}" />
-                    </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-            </DataGridTemplateColumn>
-            <DataGridTemplateColumn
-                Width="200"
-                x:DataType="vm:VariableItem"
-                Header="Type">
-                <DataGridTemplateColumn.CellTemplate>
-                    <DataTemplate DataType="vm:VariableItem">
-                        <SelectableTextBlock
-                            Margin="12,0"
-                            VerticalAlignment="Center"
-                            Text="{Binding Type.Name}" />
-                    </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-            </DataGridTemplateColumn>
-            <DataGridTemplateColumn
-                Width="200"
-                x:DataType="vm:VariableItem"
-                Header="Value">
-                <DataGridTemplateColumn.CellTemplate>
-                    <DataTemplate DataType="vm:VariableItem">
-                        <SelectableTextBlock
-                            Margin="12,0"
-                            VerticalAlignment="Center"
-                            Text="{Binding Value}"
-                            TextWrapping="Wrap" />
-                    </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-            </DataGridTemplateColumn>
-            <DataGridTemplateColumn
-                Width="*"
-                x:DataType="vm:VariableItem"
-                Header="Description">
-                <DataGridTemplateColumn.CellTemplate>
-                    <DataTemplate DataType="vm:VariableItem">
-                        <SelectableTextBlock
-                            Margin="12,0"
-                            VerticalAlignment="Center"
-                            Text="{Binding Description}"
-                            TextWrapping="Wrap" />
-                    </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-            </DataGridTemplateColumn>
-            <DataGridTemplateColumn
-                Width="100"
-                x:DataType="vm:VariableItem"
-                Header="CopyText"
-                SortMemberPath="Duration">
-                <DataGridTemplateColumn.CellTemplate>
-                    <DataTemplate DataType="vm:VariableItem">
-                        <Button
-                            Command="{Binding $parent[pages:VariablesDemo].Copy}"
-                            CommandParameter="{Binding CopyText}"
-                            Theme="{DynamicResource  IconBorderlessButton}"
-                            Content="{StaticResource SemiIconCopy}" />
-                    </DataTemplate>
-                </DataGridTemplateColumn.CellTemplate>
-            </DataGridTemplateColumn>
-        </DataGrid.Columns>
-    </DataGrid>
-</UserControl>

demo/Semi.Avalonia.Demo/Pages/VariablesDemo.axaml.cs

@@ -1,24 +0,0 @@
-using System.Threading.Tasks;
-using Avalonia.Controls;
-using Semi.Avalonia.Demo.ViewModels;
-
-namespace Semi.Avalonia.Demo.Pages;
-
-public partial class VariablesDemo : UserControl
-{
-    public VariablesDemo()
-    {
-        InitializeComponent();
-        this.DataContext = new VariablesDemoViewModel();
-    }
-
-    public async Task Copy(object? o)
-    {
-        if (o is null) return;
-        var toplevel = TopLevel.GetTopLevel(this);
-        if (toplevel?.Clipboard is { } c)
-        {
-            await c.SetTextAsync(o.ToString());
-        }
-    }
-}

demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj

@@ -12,7 +12,7 @@
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
         <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(DataGridVersion)"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)"/>
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
         <PackageReference Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)">
             <IncludeAssets Condition="'$(Configuration)' != 'Debug'">None</IncludeAssets>
@@ -22,8 +22,8 @@
     </ItemGroup>
 
     <ItemGroup>
-        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
         <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj"/>
         <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj"/>
+        <ProjectReference Include="..\..\src\Semi.Avalonia\Semi.Avalonia.csproj"/>
     </ItemGroup>
 </Project>

demo/Semi.Avalonia.Demo/Themes/FunctionalColorGroupControl.axaml

@@ -3,7 +3,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
     x:CompileBindings="True"
     x:DataType="viewModels:FunctionalColorGroupViewModel">
     <ControlTheme x:Key="{x:Type controls:FunctionalColorGroupControl}" TargetType="controls:FunctionalColorGroupControl">
@@ -31,21 +30,27 @@
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
                                     <DataGridTemplateColumn Width="100" Header="Hex">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
@@ -55,29 +60,13 @@
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Brush.Opacity}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
                                 </DataGrid.Columns>
                             </DataGrid>
                         </TabItem>
@@ -95,21 +84,27 @@
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
+                                    <DataGridTextColumn
+                                        Width="*"
+                                        x:DataType="viewModels:ColorItemViewModel"
+                                        Binding="{Binding ColorDisplayName}"
+                                        CanUserSort="False"
+                                        Header="Name" />
                                     <DataGridTemplateColumn Width="100" Header="Hex">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
@@ -119,29 +114,13 @@
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
+                                                    HorizontalAlignment="Right"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding Brush.Opacity}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTextColumn
-                                        Width="*"
-                                        x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
-                                        CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
                                 </DataGrid.Columns>
                             </DataGrid>
                         </TabItem>

demo/Semi.Avalonia.Demo/Themes/ShadowGroupControl.axaml

@@ -3,7 +3,6 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:controls="clr-namespace:Semi.Avalonia.Demo.Controls"
     xmlns:viewModels="clr-namespace:Semi.Avalonia.Demo.ViewModels"
-    xmlns:pages="clr-namespace:Semi.Avalonia.Demo.Pages"
     x:CompileBindings="True"
     x:DataType="viewModels:ShadowGroupViewModel">
     <ControlTheme x:Key="{x:Type controls:ShadowGroupControl}" TargetType="controls:ShadowGroupControl">
@@ -20,40 +19,29 @@
                         <TabItem Header="Light">
                             <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightShadows}">
                                 <DataGrid.Columns>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding BoxShadowValue}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
                                     <DataGridTextColumn
                                         Width="*"
                                         x:DataType="viewModels:ShadowItemViewModel"
                                         Binding="{Binding ShadowDisplayName}"
                                         CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
@@ -63,40 +51,29 @@
                         <TabItem Header="Dark">
                             <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkShadows}">
                                 <DataGrid.Columns>
-                                    <DataGridTemplateColumn Width="300" Header="ResourceKey">
+                                    <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
                                                 <SelectableTextBlock
-                                                    Margin="12,0"
+                                                    Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
-                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
-                                        <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <SelectableTextBlock
-                                                    Margin="12,0"
-                                                    VerticalAlignment="Center"
-                                                    Text="{Binding BoxShadowValue}" />
-                                            </DataTemplate>
-                                        </DataGridTemplateColumn.CellTemplate>
-                                    </DataGridTemplateColumn>
                                     <DataGridTextColumn
                                         Width="*"
                                         x:DataType="viewModels:ShadowItemViewModel"
                                         Binding="{Binding ShadowDisplayName}"
                                         CanUserSort="False"
-                                        Header="Description" />
-                                    <DataGridTemplateColumn Width="100" Header="CopyText">
+                                        Header="Name" />
+                                    <DataGridTemplateColumn Width="300" Header="BoxShadows">
                                         <DataGridTemplateColumn.CellTemplate>
                                             <DataTemplate DataType="viewModels:ShadowItemViewModel">
-                                                <Button
-                                                    Command="{Binding $parent[pages:PaletteDemo].Copy}"
-                                                    CommandParameter="{Binding CopyText}"
-                                                    Theme="{DynamicResource  IconBorderlessButton}"
-                                                    Content="{StaticResource SemiIconCopy}" />
+                                                <SelectableTextBlock
+                                                    Margin="12,0,12,0"
+                                                    VerticalAlignment="Center"
+                                                    Text="{Binding BoxShadowValue}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>

demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml

@@ -14,8 +14,6 @@
                   BasedOn="{StaticResource ButtonToggleSwitch}"
                   TargetType="ToggleSwitch">
         <Setter Property="Padding" Value="{StaticResource SemiThicknessTight}" />
-        <Setter Property="Width" Value="{StaticResource SemiSpacingExtraLoose}" />
-        <Setter Property="Height" Value="{StaticResource SemiSpacingExtraLoose}" />
         <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
         <Setter Property="OnContentTemplate">
             <StaticResource ResourceKey="GeometryDataTemplate" />
@@ -32,8 +30,6 @@
                   BasedOn="{StaticResource BorderlessButton}"
                   TargetType="Button">
         <Setter Property="Padding" Value="{StaticResource SemiThicknessTight}" />
-        <Setter Property="Width" Value="{StaticResource SemiSpacingExtraLoose}" />
-        <Setter Property="Height" Value="{StaticResource SemiSpacingExtraLoose}" />
         <Setter Property="Foreground" Value="{DynamicResource SemiColorText1}" />
         <Setter Property="ContentTemplate">
             <StaticResource ResourceKey="GeometryDataTemplate" />

demo/Semi.Avalonia.Demo/ViewModels/DataGridDemoViewModel.cs

@@ -8,14 +8,14 @@ using CommunityToolkit.Mvvm.Input;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public class DataGridDemoViewModel : ObservableObject
+public class DataGridDemoViewModel: ObservableObject
 {
     public ObservableCollection<Song> GridData1 { get; set; }
-
+    
     public DataGridCollectionView GridData2 { get; set; }
-
+    
     public ObservableCollection<SongViewModel> GridData3 { get; set; }
-
+    
     public RelayCommand AddCommand { get; set; }
 
     public DataGridDemoViewModel()
@@ -23,7 +23,7 @@ public class DataGridDemoViewModel : ObservableObject
         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()
+        GridData3 = new ObservableCollection<SongViewModel>(Song.Songs.Take(10).Select(a=>new SongViewModel()
         {
             Title = a.Title,
             Artist = a.Artist,
@@ -57,10 +57,11 @@ public class Song
         Album = album;
         CountOfComment = countOfComment;
         Url = $"https://music.163.com/song?id={netEaseId}";
+        
     }
 
-    public static List<Song> Songs =>
-    [
+    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),
@@ -121,15 +122,41 @@ public class Song
         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)
-    ];
+        new("世界所有的烂漫", "熊猫堂ProducePandas", 3, 30, "W.O.R.L.D.", 335, 2053388775),
+    };
 }
 
-public partial class SongViewModel : ObservableObject
+public class SongViewModel: ObservableObject
 {
-    [ObservableProperty] private string? _title;
-    [ObservableProperty] private string? _artist;
-    [ObservableProperty] private string? _album;
-    [ObservableProperty] private int _countOfComment;
-    [ObservableProperty] private bool? _isSelected;
+    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);
+    }
+    
 }

demo/Semi.Avalonia.Demo/ViewModels/HighContrastDemoViewModel.cs

@@ -31,35 +31,35 @@ public partial class HighContrastDemoViewModel : ObservableObject
         [
             new ColorResource
             {
-                ResourceKey = "SemiColorWindow",
+                ResourceKey = "WindowColor",
                 Brush = new SolidColorBrush(Color.Parse("#202020")),
                 Description = "Background of pages, panes, popups, and windows.",
                 PairWith = "WindowTextColor"
             },
             new ColorResource
             {
-                ResourceKey = "SemiColorWindowText",
+                ResourceKey = "WindowTextColor",
                 Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
                 Description = "Headings, body copy, lists, placeholder text, app and window borders.",
                 PairWith = "WindowColor"
             },
             new ColorResource
             {
-                ResourceKey = "SemiColorHotlight",
+                ResourceKey = "HotlightColor",
                 Brush = new SolidColorBrush(Color.Parse("#75E9FC")),
                 Description = "Hyperlinks.",
                 PairWith = "WindowColor"
             },
             new ColorResource
             {
-                ResourceKey = "SemiColorGrayText",
+                ResourceKey = "GrayTextColor",
                 Brush = new SolidColorBrush(Color.Parse("#A6A6A6")),
                 Description = "Inactive (disabled) UI.",
                 PairWith = "WindowColor"
             },
             new ColorResource
             {
-                ResourceKey = "SemiColorHighlightText",
+                ResourceKey = "HighlightTextColor",
                 Brush = new SolidColorBrush(Color.Parse("#263B50")),
                 Description =
                     "Foreground color for text or UI that is in selected, interacted with (hover, pressed), or in progress.",
@@ -67,7 +67,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
             },
             new ColorResource
             {
-                ResourceKey = "SemiColorHighlight",
+                ResourceKey = "HighlightColor",
                 Brush = new SolidColorBrush(Color.Parse("#8EE3F0")),
                 Description =
                     "Background or accent color for UI that is in selected, interacted with (hover, pressed), or in progress.",
@@ -75,14 +75,14 @@ public partial class HighContrastDemoViewModel : ObservableObject
             },
             new ColorResource
             {
-                ResourceKey = "SemiColorButtonText",
+                ResourceKey = "ButtonTextColor",
                 Brush = new SolidColorBrush(Color.Parse("#FFFFFF")),
                 Description = "Foreground color for buttons and any UI that can be interacted with.",
                 PairWith = "ButtonFaceColor"
             },
             new ColorResource
             {
-                ResourceKey = "SemiColorButtonFace",
+                ResourceKey = "ButtonFaceColor",
                 Brush = new SolidColorBrush(Color.Parse("#202020")),
                 Description = "Background color for buttons and any UI that can be interacted with.",
                 PairWith = "ButtonTextColor"
@@ -100,10 +100,9 @@ public partial class HighContrastDemoViewModel : ObservableObject
         foreach (var colorResource in ColorResources)
         {
             if (colorResource.ResourceKey is null) continue;
-            if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true
-                && o is ISolidColorBrush color)
+            if (topLevel?.TryFindResource(colorResource.ResourceKey, value, out var o) == true && o is Color color)
             {
-                colorResource.Brush = color;
+                colorResource.Brush = new SolidColorBrush(color);
             }
         }
     }
@@ -122,12 +121,7 @@ public partial class HighContrastDemoViewModel : ObservableObject
 public partial class ColorResource : ObservableObject
 {
     [ObservableProperty] private string? _resourceKey;
-    [ObservableProperty] private ISolidColorBrush? _brush;
+    [ObservableProperty] private SolidColorBrush? _brush;
     [ObservableProperty] private string? _description;
     [ObservableProperty] private string? _pairWith;
-
-    public string CopyText =>
-        $"""
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-         """;
 }

demo/Semi.Avalonia.Demo/ViewModels/PaletteDemoViewModel.cs

@@ -6,13 +6,12 @@ using Avalonia.Controls;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Messaging;
-using Semi.Avalonia.Demo.Constant;
-using Semi.Avalonia.Demo.Converters;
 using Semi.Avalonia.Tokens.Palette;
+using Semi.Avalonia.Demo.Converters;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
-public partial class PaletteDemoViewModel : ObservableObject
+public class PaletteDemoViewModel : ObservableObject
 {
     private readonly string[] _predefinedColorNames =
     [
@@ -25,10 +24,31 @@ public partial class PaletteDemoViewModel : ObservableObject
     private readonly IResourceDictionary? _lightResourceDictionary;
     private readonly IResourceDictionary? _darkResourceDictionary;
 
-    [ObservableProperty] private ColorItemViewModel? _selectedColor;
+    private ColorItemViewModel _selectedColor = null!;
+
+    public ColorItemViewModel SelectedColor
+    {
+        get => _selectedColor;
+        set => SetProperty(ref _selectedColor, value);
+    }
+
+
+    private ObservableCollection<ColorListViewModel>? _lightLists;
+
+    public ObservableCollection<ColorListViewModel>? LightLists
+    {
+        get => _lightLists;
+        set => SetProperty(ref _lightLists, value);
+    }
+
+    private ObservableCollection<ColorListViewModel>? _darkLists;
+
+    public ObservableCollection<ColorListViewModel>? DarkLists
+    {
+        get => _darkLists;
+        set => SetProperty(ref _darkLists, value);
+    }
 
-    public ObservableCollection<ColorListViewModel> LightLists { get; set; } = [];
-    public ObservableCollection<ColorListViewModel> DarkLists { get; set; } = [];
     public ObservableCollection<FunctionalColorGroupViewModel> FunctionalColors { get; set; } = [];
     public ObservableCollection<ShadowGroupViewModel> Shadows { get; set; } = [];
 
@@ -36,7 +56,7 @@ public partial class PaletteDemoViewModel : ObservableObject
     {
         _lightResourceDictionary = new Light();
         _darkResourceDictionary = new Dark();
-        WeakReferenceMessenger.Default.Register<ColorItemViewModel>(this, (_, item) => SelectedColor = item);
+        WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
     }
 
     public void InitializeResources()
@@ -48,6 +68,7 @@ public partial class PaletteDemoViewModel : ObservableObject
 
     private void InitializePalette()
     {
+        LightLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
@@ -55,6 +76,7 @@ public partial class PaletteDemoViewModel : ObservableObject
             LightLists.Add(s);
         }
 
+        DarkLists = [];
         foreach (var color in _predefinedColorNames)
         {
             ColorListViewModel s = new ColorListViewModel();
@@ -65,82 +87,126 @@ public partial class PaletteDemoViewModel : ObservableObject
 
     private void InitializeFunctionalColors()
     {
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Link", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.LinkTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BackgroundTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Fill", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.FillTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
-        FunctionalColors.Add(new FunctionalColorGroupViewModel(
-            "Others", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.OtherTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Primary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.PrimaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Secondary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SecondaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Tertiary", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TertiaryTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Information", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.InformationTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Success", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.SuccessTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Warning", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.WarningTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Danger", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DangerTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Text", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.TextTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Link", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.LinkTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Background", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BackgroundTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Fill", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.FillTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Border", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.BorderTokens));
+        FunctionalColors.Add(new FunctionalColorGroupViewModel("Disabled", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.DisabledTokens));
     }
 
     private void InitializeShadows()
     {
-        Shadows.Add(new ShadowGroupViewModel(
-            "Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens));
+        Shadows.Add(new ShadowGroupViewModel("Shadow", _lightResourceDictionary, _darkResourceDictionary, ColorTokens.ShadowTokens));
+    }
+
+    private void OnClickColorItem(PaletteDemoViewModel vm, ColorItemViewModel item)
+    {
+        SelectedColor = item;
     }
 }
 
-public partial class ColorListViewModel : ObservableObject
+public class ColorListViewModel : ObservableObject
 {
-    public ObservableCollection<ColorItemViewModel> Color { get; set; } = [];
+    private ObservableCollection<ColorItemViewModel>? _colors;
 
-    [ObservableProperty] private string? _seriesName;
+    public ObservableCollection<ColorItemViewModel>? Color
+    {
+        get => _colors;
+        set => SetProperty(ref _colors, value);
+    }
+
+    private string? _seriesName;
+
+    public string? SeriesName
+    {
+        get => _seriesName;
+        set => SetProperty(ref _seriesName, value);
+    }
 
     internal void Initialize(IResourceDictionary? resourceDictionary, string color, bool light)
     {
-        if (resourceDictionary is null) return;
+        if (resourceDictionary is null)
+        {
+            return;
+        }
 
         SeriesName = color;
+        Color = [];
 
         for (var i = 0; i < 10; i++)
         {
-            var key = $"Semi{color}{i}";
-            if (resourceDictionary.TryGetValue(key, out var value) && value is ISolidColorBrush brush)
+            var key = "Semi" + color + i;
+            if (resourceDictionary.TryGetValue(key, out var value))
             {
-                var name = $"{color} {i}";
-                var item = new ColorItemViewModel(name, brush, key, light, i);
-                item.ColorResourceKey = $"{item.ResourceKey}Color";
-                Color.Add(item);
+                if (value is ISolidColorBrush brush)
+                {
+                    string name = color + " " + i;
+                    var item = new ColorItemViewModel(name, brush, key, light, i);
+                    item.ColorResourceKey = item.ResourceKey + "Color";
+                    Color.Add(item);
+                }
             }
         }
     }
 }
 
-public partial class ColorItemViewModel : ObservableObject
+public class ColorItemViewModel : ObservableObject
 {
-    [ObservableProperty] private IBrush? _brush;
-    [ObservableProperty] private IBrush? _textBrush;
-    [ObservableProperty] private string? _colorDisplayName;
-    [ObservableProperty] private string? _resourceKey;
-    [ObservableProperty] private string? _colorResourceKey;
-    [ObservableProperty] private string? _hex;
+    private IBrush _brush = null!;
 
-    public string CopyText =>
-        $"""
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-         """;
+    public IBrush Brush
+    {
+        get => _brush;
+        set => SetProperty(ref _brush, value);
+    }
+
+    private IBrush _textBrush = null!;
+
+    public IBrush TextBrush
+    {
+        get => _textBrush;
+        set => SetProperty(ref _textBrush, value);
+    }
+
+    private string _colorDisplayName = null!;
+
+    public string ColorDisplayName
+    {
+        get => _colorDisplayName;
+        set => SetProperty(ref _colorDisplayName, value);
+    }
+
+    private string _resourceKey = null!;
+
+    public string ResourceKey
+    {
+        get => _resourceKey;
+        set => SetProperty(ref _resourceKey, value);
+    }
+
+    private string _colorResourceKey = null!;
+
+    public string ColorResourceKey
+    {
+        get => _colorResourceKey;
+        set => SetProperty(ref _colorResourceKey, value);
+    }
+
+    private string _hex = null!;
+
+    public string Hex
+    {
+        get => _hex;
+        set => SetProperty(ref _hex, value);
+    }
 
     public ColorItemViewModel(string colorDisplayName, ISolidColorBrush brush, string resourceKey, bool light,
         int index)
@@ -161,9 +227,16 @@ public partial class ColorItemViewModel : ObservableObject
     }
 }
 
-public partial class FunctionalColorGroupViewModel : ObservableObject
+public class FunctionalColorGroupViewModel : ObservableObject
 {
-    [ObservableProperty] private string? _title;
+    private string _title = null!;
+
+    public string Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+
     public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = [];
     public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = [];
 
@@ -192,16 +265,31 @@ public partial class FunctionalColorGroupViewModel : ObservableObject
     }
 }
 
-public partial class ShadowItemViewModel : ObservableObject
+public class ShadowItemViewModel : ObservableObject
 {
-    [ObservableProperty] private string? _shadowDisplayName;
-    [ObservableProperty] private string? _resourceKey;
-    [ObservableProperty] private string? _boxShadowValue;
+    private string _shadowDisplayName = null!;
 
-    public string CopyText =>
-        $"""
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-         """;
+    public string ShadowDisplayName
+    {
+        get => _shadowDisplayName;
+        set => SetProperty(ref _shadowDisplayName, value);
+    }
+
+    private string _resourceKey = null!;
+
+    public string ResourceKey
+    {
+        get => _resourceKey;
+        set => SetProperty(ref _resourceKey, value);
+    }
+
+    private string _boxShadowValue = null!;
+
+    public string BoxShadowValue
+    {
+        get => _boxShadowValue;
+        set => SetProperty(ref _boxShadowValue, value);
+    }
 
     public ShadowItemViewModel(string shadowDisplayName, BoxShadows boxShadows, string resourceKey)
     {
@@ -211,9 +299,16 @@ public partial class ShadowItemViewModel : ObservableObject
     }
 }
 
-public partial class ShadowGroupViewModel : ObservableObject
+public class ShadowGroupViewModel : ObservableObject
 {
-    [ObservableProperty] private string? _title;
+    private string _title = null!;
+
+    public string Title
+    {
+        get => _title;
+        set => SetProperty(ref _title, value);
+    }
+
     public ObservableCollection<ShadowItemViewModel> LightShadows { get; set; } = [];
     public ObservableCollection<ShadowItemViewModel> DarkShadows { get; set; } = [];
 
@@ -241,4 +336,132 @@ public partial class ShadowGroupViewModel : ObservableObject
             }
         }
     }
+}
+
+public static class ColorTokens
+{
+    public static IReadOnlyList<Tuple<string, string>> PrimaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorPrimary", "Primary"),
+        new("SemiColorPrimaryPointerover", "Primary Pointerover"),
+        new("SemiColorPrimaryActive", "Primary Active"),
+        new("SemiColorPrimaryDisabled", "Primary Disabled"),
+        new("SemiColorPrimaryLight", "Primary Light"),
+        new("SemiColorPrimaryLightPointerover", "Primary Light Pointerover"),
+        new("SemiColorPrimaryLightActive", "Primary Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> SecondaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorSecondary", "Secondary"),
+        new("SemiColorSecondaryPointerover", "Secondary Pointerover"),
+        new("SemiColorSecondaryActive", "Secondary Active"),
+        new("SemiColorSecondaryDisabled", "Secondary Disabled"),
+        new("SemiColorSecondaryLight", "Secondary Light"),
+        new("SemiColorSecondaryLightPointerover", "Secondary Light Pointerover"),
+        new("SemiColorSecondaryLightActive", "Secondary Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> TertiaryTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorTertiary", "Tertiary"),
+        new("SemiColorTertiaryPointerover", "Tertiary Pointerover"),
+        new("SemiColorTertiaryActive", "Tertiary Active"),
+        new("SemiColorTertiaryLight", "Tertiary Light"),
+        new("SemiColorTertiaryLightPointerover", "Tertiary Light Pointerover"),
+        new("SemiColorTertiaryLightActive", "Tertiary Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> InformationTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorInformation", "Information"),
+        new("SemiColorInformationPointerover", "Information Pointerover"),
+        new("SemiColorInformationActive", "Information Active"),
+        new("SemiColorInformationDisabled", "Information Disabled"),
+        new("SemiColorInformationLight", "Information Light"),
+        new("SemiColorInformationLightPointerover", "Information Light Pointerover"),
+        new("SemiColorInformationLightActive", "Information Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> SuccessTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorSuccess", "Success"),
+        new("SemiColorSuccessPointerover", "Success Pointerover"),
+        new("SemiColorSuccessActive", "Success Active"),
+        new("SemiColorSuccessDisabled", "Success Disabled"),
+        new("SemiColorSuccessLight", "Success Light"),
+        new("SemiColorSuccessLightPointerover", "Success Light Pointerover"),
+        new("SemiColorSuccessLightActive", "Success Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> WarningTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorWarning", "Warning"),
+        new("SemiColorWarningPointerover", "Warning Pointerover"),
+        new("SemiColorWarningActive", "Warning Active"),
+        new("SemiColorWarningLight", "Warning Light"),
+        new("SemiColorWarningLightPointerover", "Warning Light Pointerover"),
+        new("SemiColorWarningLightActive", "Warning Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> DangerTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorDanger", "Danger"),
+        new("SemiColorDangerPointerover", "Danger Pointerover"),
+        new("SemiColorDangerActive", "Danger Active"),
+        new("SemiColorDangerLight", "Danger Light"),
+        new("SemiColorDangerLightPointerover", "Danger Light Pointerover"),
+        new("SemiColorDangerLightActive", "Danger Light Active"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> TextTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorText0", "Text 0"),
+        new("SemiColorText1", "Text 1"),
+        new("SemiColorText2", "Text 2"),
+        new("SemiColorText3", "Text 3"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> LinkTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorLink", "Link"),
+        new("SemiColorLinkPointerover", "Link Pointerover"),
+        new("SemiColorLinkActive", "Link Active"),
+        new("SemiColorLinkVisited", "Link Visited"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> BackgroundTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorBackground0", "Background 0"),
+        new("SemiColorBackground1", "Background 1"),
+        new("SemiColorBackground2", "Background 2"),
+        new("SemiColorBackground3", "Background 3"),
+        new("SemiColorBackground4", "Background 4"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> FillTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorFill0", "Fill 0"),
+        new("SemiColorFill1", "Fill 1"),
+        new("SemiColorFill2", "Fill 2"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> BorderTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorBorder", "Border"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> DisabledTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorDisabledText", "Disabled Text"),
+        new("SemiColorDisabledBorder", "Disabled Border"),
+        new("SemiColorDisabledBackground", "Disabled Background"),
+        new("SemiColorDisabledFill", "Disabled Fill"),
+    };
+
+    public static IReadOnlyList<Tuple<string, string>> ShadowTokens { get; } = new List<Tuple<string, string>>
+    {
+        new("SemiColorShadow", "Shadow"),
+        new("SemiShadowElevated", "Shadow Elevated"),
+    };
 }

demo/Semi.Avalonia.Demo/ViewModels/VariablesDemoViewModel.cs

@@ -1,123 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Globalization;
-using Avalonia;
-using Avalonia.Collections;
-using Avalonia.Controls;
-using Avalonia.Media;
-using CommunityToolkit.Mvvm.ComponentModel;
-using Semi.Avalonia.Tokens;
-
-namespace Semi.Avalonia.Demo.ViewModels;
-
-public class VariablesDemoViewModel : ObservableObject
-{
-    public DataGridCollectionView GridData { get; set; }
-
-    public VariablesDemoViewModel()
-    {
-        IResourceDictionary dictionary = new Variables();
-        foreach (var token in Tokens)
-        {
-            if (token.ResourceKey is not null && dictionary.TryGetValue(token.ResourceKey, out var value))
-            {
-                token.Type = value?.GetType();
-                token.Value = GetValueString(value);
-            }
-        }
-
-        GridData = new DataGridCollectionView(Tokens);
-        GridData.GroupDescriptions.Add(new DataGridPathGroupDescription(nameof(VariableItem.Category)));
-    }
-
-    private static string GetValueString(object? value)
-    {
-        if (value is null) return string.Empty;
-
-        return value switch
-        {
-            double d => d.ToString(CultureInfo.InvariantCulture),
-            CornerRadius c => c.IsUniform ? $"{c.TopLeft}" : c.ToString(),
-            Thickness t => t.IsUniform ? $"{t.Left}" : t.ToString(),
-            FontWeight fontWeight => Convert.ToInt32(fontWeight).ToString(),
-            FontFamily fontFamily => fontFamily.FamilyNames.ToString(),
-            _ => value.ToString()
-        };
-    }
-
-    private static List<VariableItem> Tokens { get; set; } =
-    [
-        new("Height", "SemiHeightControlSmall"),
-        new("Height", "SemiHeightControlDefault"),
-        new("Height", "SemiHeightControlLarge"),
-        new("Icon Size", "SemiWidthIconExtraSmall"),
-        new("Icon Size", "SemiWidthIconSmall"),
-        new("Icon Size", "SemiWidthIconMedium"),
-        new("Icon Size", "SemiWidthIconLarge"),
-        new("Icon Size", "SemiWidthIconExtraLarge"),
-        new("Border CornerRadius", "SemiBorderRadiusExtraSmall"),
-        new("Border CornerRadius", "SemiBorderRadiusSmall"),
-        new("Border CornerRadius", "SemiBorderRadiusMedium"),
-        new("Border CornerRadius", "SemiBorderRadiusLarge"),
-        new("Border CornerRadius", "SemiBorderRadiusFull"),
-        new("Border Spacing", "SemiBorderSpacing"),
-        new("Border Spacing", "SemiBorderSpacingControl"),
-        new("Border Spacing", "SemiBorderSpacingControlFocus"),
-        new("Border Thickness", "SemiBorderThickness"),
-        new("Border Thickness", "SemiBorderThicknessControl"),
-        new("Border Thickness", "SemiBorderThicknessControlFocus"),
-        new("Spacing", "SemiSpacingNone"),
-        new("Spacing", "SemiSpacingSuperTight"),
-        new("Spacing", "SemiSpacingExtraTight"),
-        new("Spacing", "SemiSpacingTight"),
-        new("Spacing", "SemiSpacingBaseTight"),
-        new("Spacing", "SemiSpacingBase"),
-        new("Spacing", "SemiSpacingBaseLoose"),
-        new("Spacing", "SemiSpacingLoose"),
-        new("Spacing", "SemiSpacingExtraLoose"),
-        new("Spacing", "SemiSpacingSuperLoose"),
-        new("Thickness", "SemiThicknessNone"),
-        new("Thickness", "SemiThicknessSuperTight"),
-        new("Thickness", "SemiThicknessExtraTight"),
-        new("Thickness", "SemiThicknessTight"),
-        new("Thickness", "SemiThicknessBaseTight"),
-        new("Thickness", "SemiThicknessBase"),
-        new("Thickness", "SemiThicknessBaseLoose"),
-        new("Thickness", "SemiThicknessLoose"),
-        new("Thickness", "SemiThicknessExtraLoose"),
-        new("Thickness", "SemiThicknessSuperLoose"),
-        new("FontSize", "SemiFontSizeSmall"),
-        new("FontSize", "SemiFontSizeRegular"),
-        new("FontSize", "SemiFontSizeHeader6"),
-        new("FontSize", "SemiFontSizeHeader5"),
-        new("FontSize", "SemiFontSizeHeader4"),
-        new("FontSize", "SemiFontSizeHeader3"),
-        new("FontSize", "SemiFontSizeHeader2"),
-        new("FontSize", "SemiFontSizeHeader1"),
-        new("FontWeight", "SemiFontWeightLight"),
-        new("FontWeight", "SemiFontWeightRegular"),
-        new("FontWeight", "SemiFontWeightBold"),
-        new("FontFamily", "SemiFontFamilyRegular"),
-    ];
-}
-
-public class VariableItem()
-{
-    public string? Category { get; set; }
-    public string? ResourceKey { get; set; }
-    public Type? Type { get; set; }
-    public string? Value { get; set; }
-    public string? Description { get; set; }
-
-    public VariableItem(string category, string resourceKey, string description = "") : this()
-    {
-        Category = category;
-        ResourceKey = resourceKey;
-        Description = description;
-    }
-
-    public string CopyText =>
-        $"""
-         <StaticResource x:Key="" ResourceKey="{ResourceKey}" />
-         """;
-}

demo/Semi.Avalonia.Demo/Views/MainView.axaml

@@ -91,9 +91,6 @@
             <TabItem Header="HighContrastTheme">
                 <pages:HighContrastDemo />
             </TabItem>
-            <TabItem Header="Variables">
-                <pages:VariablesDemo />
-            </TabItem>
             <TabItem Header="Icon">
                 <pages:IconDemo />
             </TabItem>

demo/Semi.Avalonia.Demo/Views/MainView.axaml.cs

@@ -114,12 +114,6 @@ public partial class MainViewModel : ObservableObject
                         Command = SelectLocaleCommand,
                         CommandParameter = new CultureInfo("de-de")
                     },
-                    new MenuItemViewModel
-                    {
-                        Header = "Español",
-                        Command = SelectLocaleCommand,
-                        CommandParameter = new CultureInfo("es-es")
-                    },
                 ]
             }
         ];

demo/Semi.Avalonia.TreeDataGrid.Demo/Converters/FileIconConverter.cs

@@ -3,13 +3,15 @@ using System.Collections.Generic;
 using System.Globalization;
 using Avalonia;
 using Avalonia.Data.Converters;
+using Avalonia.Media;
 using Avalonia.Metadata;
 
 namespace Semi.Avalonia.TreeDataGrid.Demo.Converters;
 
-public class FileIconConverter : IMultiValueConverter
+public class FileIconConverter: IMultiValueConverter
 {
-    [Content] public IDictionary<string, object?> Items { get; } = new Dictionary<string, object?>();
+    [Content] 
+    public Dictionary<string, PathGeometry> Items { get; set; } = new Dictionary<string, PathGeometry>();
 
     public object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
     {
@@ -19,10 +21,8 @@ public class FileIconConverter : IMultiValueConverter
             {
                 return Items["file"];
             }
-
             return isOpen ? Items["folderOpen"] : Items["folderClosed"];
         }
-
         return AvaloniaProperty.UnsetValue;
     }
 }

demo/Semi.Avalonia.TreeDataGrid.Demo/MainWindow.axaml

@@ -13,9 +13,9 @@
     mc:Ignorable="d">
     <Window.Resources>
         <converters:FileIconConverter x:Key="FileIconConverter">
-            <StaticResource x:Key="file" ResourceKey="SemiIconFile" />
-            <StaticResource x:Key="folderOpen" ResourceKey="SemiIconFolderOpen" />
-            <StaticResource x:Key="folderClosed" ResourceKey="SemiIconFolder" />
+            <PathGeometry x:Key="file">M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z</PathGeometry>
+            <PathGeometry x:Key="folderOpen">M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z</PathGeometry>
+            <PathGeometry x:Key="folderClosed">M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z</PathGeometry>
         </converters:FileIconConverter>
     </Window.Resources>
     <Grid RowDefinitions="Auto, *">
@@ -58,7 +58,7 @@
                     </TreeDataGrid.Resources>
                     <TreeDataGrid.Styles>
                         <Style Selector="TreeDataGrid TreeDataGridRow:nth-last-child(2n)">
-                            <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+                            <Setter Property="Background" Value="#20808080" />
                         </Style>
                     </TreeDataGrid.Styles>
                 </TreeDataGrid>
@@ -86,8 +86,10 @@
                             <DataTemplate x:Key="FileNameCell" DataType="vm:FileNodeViewModel">
                                 <StackPanel Orientation="Horizontal">
                                     <PathIcon
-                                        Theme="{StaticResource InnerPathIcon}"
-                                        Margin="8,0">
+                                        Width="16"
+                                        Height="16"
+                                        Margin="8,0"
+                                        VerticalAlignment="Center">
                                         <PathIcon.Data>
                                             <MultiBinding Converter="{StaticResource FileIconConverter}">
                                                 <Binding Path="IsDirectory" />
@@ -125,7 +127,7 @@
                         </TreeDataGrid.Resources>
                         <TreeDataGrid.Styles>
                             <Style Selector="TreeDataGrid TreeDataGridRow:nth-child(2n)">
-                                <Setter Property="Background" Value="{DynamicResource SemiColorFill0}" />
+                                <Setter Property="Background" Value="#20808080" />
                             </Style>
                         </TreeDataGrid.Styles>
                     </TreeDataGrid>
@@ -133,4 +135,4 @@
             </TabItem>
         </TabControl>
     </Grid>
-</Window>
+</Window>

src/Package.props

@@ -1,9 +1,9 @@
 <Project>
     <PropertyGroup>
-        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
+        <TargetFrameworks>net6.0;net8.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.2.1.6</Version>
+        <Version>11.2.1.3</Version>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>

src/Semi.Avalonia.ColorPicker/AssemblyInfo.cs

@@ -1,3 +0,0 @@
-using Avalonia.Metadata;
-
-[assembly: XmlnsDefinition("https://irihi.tech/semi", "Semi.Avalonia.ColorPicker")]

src/Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml

@@ -1,48 +1,62 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:primitives="using:Avalonia.Controls.Primitives"
     x:CompileBindings="True">
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
+    </ResourceDictionary.MergedDictionaries>
+
     <converters:CornerRadiusFilterConverter x:Key="LeftCornerRadiusFilterConverter" Filter="TopLeft, BottomLeft" />
     <converters:ToBrushConverter x:Key="ToBrushConverter" />
 
     <ControlTheme x:Key="{x:Type ColorPicker}" TargetType="ColorPicker">
+        <Setter Property="CornerRadius" Value="3" />
+        <Setter Property="Height" Value="32" />
+        <Setter Property="Width" Value="64" />
         <Setter Property="MinWidth" Value="64" />
-        <Setter Property="HorizontalAlignment" Value="Center" />
-        <Setter Property="MinHeight" Value="{DynamicResource ColorPickerMinHeight}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource ColorPickerCornerRadius}" />
+        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
         <Setter Property="Content">
             <Template>
                 <Panel>
                     <Border
                         Margin="1,1,0,1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
                         Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+                        CornerRadius="{TemplateBinding CornerRadius,
+                                                       Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                     <Border
                         Margin="1,1,0,1"
-                        Background="{TemplateBinding HsvColor, Converter={StaticResource ToBrushConverter}}"
-                        CornerRadius="{TemplateBinding CornerRadius, Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="{TemplateBinding HsvColor,
+                                                     Converter={StaticResource ToBrushConverter}}"
+                        CornerRadius="{TemplateBinding CornerRadius,
+                                                       Converter={StaticResource LeftCornerRadiusFilterConverter}}" />
                 </Panel>
             </Template>
         </Setter>
         <Setter Property="Palette">
-            <FluentColorPalette />
+            <controls:FluentColorPalette />
         </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type ColorPicker}">
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    MinWidth="{TemplateBinding MinWidth}"
-                    MinHeight="{TemplateBinding MinHeight}"
-                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    ClipToBounds="True"
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
-                    ClipToBounds="True"
                     UseLayoutRounding="False">
                     <DropDownButton.Styles>
                         <Style Selector="FlyoutPresenter.nopadding">
@@ -99,10 +113,13 @@
                                     <!--  Spectrum Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
                                         <TabItem.Header>
-                                            <PathIcon
-                                                Theme="{StaticResource InnerPathIcon}"
-                                                Data="{DynamicResource ColorViewSpectrumIconGlyph}"
-                                                Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewSpectrumIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
                                         </TabItem.Header>
                                         <Grid Margin="12" RowDefinitions="*">
                                             <Grid.ColumnDefinitions>
@@ -110,7 +127,7 @@
                                                 <ColumnDefinition Width="*" />
                                                 <ColumnDefinition Width="Auto" MinWidth="32" />
                                             </Grid.ColumnDefinitions>
-                                            <ColorSlider
+                                            <primitives:ColorSlider
                                                 Name="ColorSpectrumThirdComponentSlider"
                                                 Grid.Column="0"
                                                 Margin="0,0,12,0"
@@ -124,8 +141,8 @@
                                                 IsPerceptive="False"
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
-                                            <ColorSpectrum
-                                                Name="ColorSpectrum"
+                                            <primitives:ColorSpectrum
+                                                x:Name="ColorSpectrum"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Stretch"
@@ -138,7 +155,7 @@
                                                 MinSaturation="{TemplateBinding MinSaturation}"
                                                 MinValue="{TemplateBinding MinValue}"
                                                 Shape="{TemplateBinding ColorSpectrumShape}" />
-                                            <ColorSlider
+                                            <primitives:ColorSlider
                                                 Name="ColorSpectrumAlphaSlider"
                                                 Grid.Column="2"
                                                 Margin="12,0,0,0"
@@ -150,21 +167,24 @@
                                                 HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 Orientation="Vertical">
-                                                <ColorSlider.IsVisible>
+                                                <primitives:ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
                                                         <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
-                                                </ColorSlider.IsVisible>
-                                            </ColorSlider>
+                                                </primitives:ColorSlider.IsVisible>
+                                            </primitives:ColorSlider>
                                         </Grid>
                                     </TabItem>
                                     <!--  Palette Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
                                         <TabItem.Header>
-                                            <PathIcon
-                                                Theme="{StaticResource InnerPathIcon}"
-                                                Data="{DynamicResource ColorViewPaletteIconGlyph}"
-                                                Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewPaletteIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
                                         </TabItem.Header>
                                         <ListBox
                                             Margin="12"
@@ -197,15 +217,18 @@
                                     <!--  Components Tab  -->
                                     <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
                                         <TabItem.Header>
-                                            <PathIcon
-                                                Theme="{StaticResource InnerPathIcon}"
-                                                Data="{DynamicResource ColorViewComponentsIconGlyph}"
-                                                Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                                <PathIcon
+                                                    Width="16"
+                                                    Height="16"
+                                                    Data="{DynamicResource ColorViewComponentsIconGlyph}"
+                                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                            </Border>
                                         </TabItem.Header>
                                         <Grid
                                             Margin="12"
                                             ColumnDefinitions="Auto,*"
-                                            RowDefinitions="Auto,24,*,*,*,*,12"
+                                            RowDefinitions="Auto,24,1*,1*,1*,1*,12"
                                             Tag="{TemplateBinding ColorModel}">
                                             <Grid.Styles>
                                                 <Style Selector="NumericUpDown">
@@ -249,13 +272,13 @@
                                                 Grid.Row="0"
                                                 Grid.Column="0"
                                                 Grid.ColumnSpan="2"
-                                                ColumnDefinitions="*,12,*">
+                                                ColumnDefinitions="1*,12,1*">
                                                 <!--  RadioButtonGroup  -->
                                                 <Border
                                                     Padding="2"
                                                     Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
                                                     CornerRadius="3">
-                                                    <Grid ColumnDefinitions="*,*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                                    <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                                         <RadioButton
                                                             Name="RgbRadioButton"
                                                             Grid.Column="0"
@@ -264,9 +287,9 @@
                                                             Content="RGB"
                                                             CornerRadius="3,0,0,3"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static ColorModel.Rgba},
-                                                            Mode=TwoWay}"
+                                                                                        Converter={StaticResource EnumToBoolConverter},
+                                                                                        ConverterParameter={x:Static controls:ColorModel.Rgba},
+                                                                                        Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                         <RadioButton
                                                             Name="HsvRadioButton"
@@ -276,20 +299,21 @@
                                                             Content="HSV"
                                                             CornerRadius="0,3,3,0"
                                                             IsChecked="{TemplateBinding ColorModel,
-                                                            Converter={StaticResource EnumToBoolConverter},
-                                                            ConverterParameter={x:Static ColorModel.Hsva},
-                                                            Mode=TwoWay}"
+                                                                                        Converter={StaticResource EnumToBoolConverter},
+                                                                                        ConverterParameter={x:Static controls:ColorModel.Hsva},
+                                                                                        Mode=TwoWay}"
                                                             Theme="{DynamicResource ColorViewRadioButton}" />
                                                     </Grid>
                                                 </Border>
                                                 <TextBox
                                                     Name="PART_HexTextBox"
                                                     Grid.Column="2"
+                                                    Height="32"
                                                     HorizontalAlignment="Stretch"
                                                     AutomationProperties.Name="Hexadecimal Color"
                                                     InnerLeftContent="#"
                                                     IsVisible="{TemplateBinding IsHexInputVisible}"
-                                                    MaxLength="8" />
+                                                    MaxLength="9" />
                                             </Grid>
                                             <!--  Color component editing controls  -->
                                             <!--  Component 1 RGB:Red HSV:Hue  -->
@@ -308,14 +332,15 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component1Slider}" />
-                                            <ColorSlider
-                                                Name="Component1Slider"
+                                            <primitives:ColorSlider
+                                                x:Name="Component1Slider"
                                                 Grid.Row="2"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component1"
-                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -338,14 +363,15 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component2Slider}" />
-                                            <ColorSlider
-                                                Name="Component2Slider"
+                                            <primitives:ColorSlider
+                                                x:Name="Component2Slider"
                                                 Grid.Row="3"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component2"
-                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -368,14 +394,15 @@
                                                 NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                                 ShowButtonSpinner="False"
                                                 Value="{Binding Value, ElementName=Component3Slider}" />
-                                            <ColorSlider
-                                                Name="Component3Slider"
+                                            <primitives:ColorSlider
+                                                x:Name="Component3Slider"
                                                 Grid.Row="4"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Component3"
-                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
@@ -405,33 +432,34 @@
                                                     </MultiBinding>
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
-                                            <ColorSlider
-                                                Name="AlphaComponentSlider"
+                                            <primitives:ColorSlider
+                                                x:Name="AlphaComponentSlider"
                                                 Grid.Row="5"
                                                 Grid.Column="1"
                                                 HorizontalAlignment="Stretch"
                                                 VerticalAlignment="Center"
                                                 ColorComponent="Alpha"
-                                                ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                                ColorModel="{TemplateBinding ColorModel,
+                                                                             Mode=OneWay}"
                                                 HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 IsRoundingEnabled="True"
                                                 IsSnapToTickEnabled="True"
                                                 Orientation="Horizontal"
                                                 TickFrequency="1">
-                                                <ColorSlider.IsVisible>
+                                                <primitives:ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
                                                         <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                         <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
-                                                </ColorSlider.IsVisible>
-                                            </ColorSlider>
+                                                </primitives:ColorSlider.IsVisible>
+                                            </primitives:ColorSlider>
                                         </Grid>
                                     </TabItem>
                                 </TabControl>
                                 <!--  Previewer  -->
                                 <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
-                                <ColorPreviewer
+                                <primitives:ColorPreviewer
                                     Grid.Row="1"
                                     Margin="12,-5,12,7"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -443,9 +471,9 @@
                 </DropDownButton>
             </ControlTemplate>
         </Setter>
-
+        
         <Style Selector="^ /template/ DropDownButton">
-            <Setter Property="Padding" Value="0 0 10 0" />
+            <Setter Property="Padding" Value="0 0 10 0"></Setter>
         </Style>
     </ControlTheme>
 
@@ -453,7 +481,7 @@
         x:Key="HexColorPicker"
         BasedOn="{StaticResource {x:Type ColorPicker}}"
         TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="200" />
+        <Setter Property="Width" Value="200" />
         <Setter Property="Content">
             <Template>
                 <Grid ColumnDefinitions="Auto, *">
@@ -471,7 +499,8 @@
                         Margin="1,1,0,1"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
+                        Background="{TemplateBinding HsvColor,
+                                                     Converter={StaticResource ToBrushConverter}}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <TextBlock
                         Grid.Column="1"
@@ -496,12 +525,9 @@
                 <DropDownButton
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    MinWidth="{TemplateBinding MinWidth}"
-                    MinHeight="{TemplateBinding MinHeight}"
-                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
-                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    ClipToBounds="True"
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
@@ -531,8 +557,8 @@
                                     Grid.Row="0"
                                     CornerRadius="8 8 0 0"
                                     ClipToBounds="True">
-                                    <ColorSpectrum
-                                        Name="ColorSpectrum"
+                                    <primitives:ColorSpectrum
+                                        x:Name="ColorSpectrum"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         Components="{TemplateBinding ColorSpectrumComponents}"
@@ -545,7 +571,7 @@
                                         MinValue="{TemplateBinding MinValue}"
                                         Shape="{TemplateBinding ColorSpectrumShape}" />
                                 </Border>
-                                <ColorSlider
+                                <primitives:ColorSlider
                                     Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Row="1"
                                     HorizontalAlignment="Stretch"
@@ -557,8 +583,8 @@
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Horizontal" />
 
-                                <ColorSlider
-                                    Name="ColorSpectrumAlphaSlider"
+                                <primitives:ColorSlider
+                                    x:Name="ColorSpectrumAlphaSlider"
                                     Grid.Row="2"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
@@ -571,7 +597,8 @@
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     TickFrequency="1"
-                                    Orientation="Horizontal" />
+                                    Orientation="Horizontal">
+                                </primitives:ColorSlider>
                                 <StackPanel
                                     Grid.Row="3"
                                     HorizontalAlignment="Stretch"
@@ -648,7 +675,7 @@
         x:Key="HexSimpleColorPicker"
         BasedOn="{StaticResource SimpleColorPicker}"
         TargetType="ColorPicker">
-        <Setter Property="MinWidth" Value="200" />
+        <Setter Property="Width" Value="200" />
         <Setter Property="Content">
             <Template>
                 <Grid ColumnDefinitions="Auto, *">
@@ -666,7 +693,8 @@
                         Margin="1,1,0,1"
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
-                        Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
+                        Background="{TemplateBinding HsvColor,
+                                                     Converter={StaticResource ToBrushConverter}}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                     <TextBlock
                         Grid.Column="1"
@@ -681,4 +709,4 @@
         </Setter>
     </ControlTheme>
 
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml

@@ -33,16 +33,17 @@
                                 Name="PART_AccentDecrement2Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
-                                Converter={StaticResource AccentColorConverter},
-                                ConverterParameter='-2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource LeftCornerRadiusFilterConverter}}"
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='-2'}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource LeftCornerRadiusFilterConverter}}"
                                 Tag="-2" />
                             <Border
                                 Name="PART_AccentDecrement1Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
-                                Converter={StaticResource AccentColorConverter},
-                                ConverterParameter='-1'}"
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='-1'}"
                                 Tag="-1" />
                         </Grid>
                         <!--  Right accent colors  -->
@@ -62,16 +63,17 @@
                                 Name="PART_AccentIncrement1Border"
                                 Grid.Column="0"
                                 Background="{TemplateBinding HsvColor,
-                                Converter={StaticResource AccentColorConverter},
-                                ConverterParameter='1'}"
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='1'}"
                                 Tag="1" />
                             <Border
                                 Name="PART_AccentIncrement2Border"
                                 Grid.Column="1"
                                 Background="{TemplateBinding HsvColor,
-                                Converter={StaticResource AccentColorConverter},
-                                ConverterParameter='2'}"
-                                CornerRadius="{TemplateBinding CornerRadius,Converter={StaticResource RightCornerRadiusFilterConverter}}"
+                                                             Converter={StaticResource AccentColorConverter},
+                                                             ConverterParameter='2'}"
+                                CornerRadius="{TemplateBinding CornerRadius,
+                                                               Converter={StaticResource RightCornerRadiusFilterConverter}}"
                                 Tag="2" />
                         </Grid>
                         <!--  Preview color: Must be last for drop shadow Z-index  -->
@@ -83,13 +85,12 @@
                             BoxShadow="{DynamicResource ColorPreviewerMainBoxShadow}"
                             CornerRadius="{TemplateBinding CornerRadius}">
                             <Panel>
-                                <Border
-                                    Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                    CornerRadius="{TemplateBinding CornerRadius}" />
+                                <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
                                 <Border
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
-                                    Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
+                                    Background="{TemplateBinding HsvColor,
+                                                                 Converter={StaticResource ToBrushConverter}}"
                                     CornerRadius="{TemplateBinding CornerRadius}" />
                             </Panel>
                         </Border>
@@ -99,15 +100,15 @@
                         HorizontalAlignment="Stretch"
                         VerticalAlignment="Stretch"
                         CornerRadius="{TemplateBinding CornerRadius}"
-                        IsVisible="{TemplateBinding IsAccentColorsVisible,Converter={x:Static BoolConverters.Not}}">
+                        IsVisible="{TemplateBinding IsAccentColorsVisible,
+                                                    Converter={x:Static BoolConverters.Not}}">
                         <Panel>
-                            <Border
-                                Background="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                CornerRadius="{TemplateBinding CornerRadius}" />
+                            <Border Background="{DynamicResource ColorControlCheckeredBackgroundBrush}" CornerRadius="{TemplateBinding CornerRadius}" />
                             <Border
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
-                                Background="{TemplateBinding HsvColor,Converter={StaticResource ToBrushConverter}}"
+                                Background="{TemplateBinding HsvColor,
+                                                             Converter={StaticResource ToBrushConverter}}"
                                 CornerRadius="{TemplateBinding CornerRadius}" />
                         </Panel>
                     </Border>

src/Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml

@@ -11,17 +11,19 @@
         <Setter Property="UseLayoutRounding" Value="False" />
         <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDefaultBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource ColorSliderThumbCornerRadius}" />
+        <Setter Property="CornerRadius" Value="999" />
         <Setter Property="Template">
-            <ControlTemplate>
-                <Border
-                    Margin="1"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    BoxShadow="{DynamicResource ColorSliderBoxShadow}"
-                    CornerRadius="{TemplateBinding CornerRadius}" />
-            </ControlTemplate>
+            <Setter.Value>
+                <ControlTemplate>
+                    <Border
+                        Margin="1"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        BoxShadow="{DynamicResource ColorSliderBoxShadow}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                </ControlTemplate>
+            </Setter.Value>
         </Setter>
     </ControlTheme>
 
@@ -43,16 +45,20 @@
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
                                 Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
                                 Height="12"
@@ -62,7 +68,8 @@
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="Horizontal"
-                                Value="{TemplateBinding Value,Mode=TwoWay}">
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_DecreaseButton"
@@ -99,8 +106,10 @@
                                 </Track.IncreaseButton>
                                 <Thumb
                                     Name="ColorSliderThumb"
-                                    Width="{TemplateBinding Height}"
-                                    Height="{TemplateBinding Height}"
+                                    Width="16"
+                                    Height="16"
+                                    Margin="0"
+                                    Padding="0"
                                     DataContext="{TemplateBinding Value}"
                                     Theme="{StaticResource ColorSliderThumbTheme}" />
                             </Track>
@@ -127,16 +136,20 @@
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Rectangle
                                 Width="{Binding #PART_Track.Bounds.Width}"
                                 Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{TemplateBinding Background}"
-                                RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                                RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
                                 Width="12"
@@ -146,7 +159,8 @@
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="Vertical"
-                                Value="{TemplateBinding Value,Mode=TwoWay}">
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_DecreaseButton"
@@ -185,6 +199,8 @@
                                     Name="ColorSliderThumb"
                                     Width="{TemplateBinding Width}"
                                     Height="{TemplateBinding Width}"
+                                    Margin="0"
+                                    Padding="0"
                                     DataContext="{TemplateBinding Value}"
                                     Theme="{StaticResource ColorSliderThumbTheme}" />
                             </Track>
@@ -215,4 +231,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml

@@ -1,115 +1,125 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
     <converters:EnumToBoolConverter x:Key="EnumToBoolConverter" />
     <converters:CornerRadiusToDoubleConverter x:Key="TopLeftCornerRadiusConverter" Corner="TopLeft" />
     <converters:CornerRadiusToDoubleConverter x:Key="BottomRightCornerRadiusConverter" Corner="BottomRight" />
 
+
     <ControlTheme x:Key="{x:Type ColorSpectrum}" TargetType="ColorSpectrum">
-        <Setter Property="CornerRadius" Value="{DynamicResource ColorSpectrumCornerRadius}" />
+        <Setter Property="CornerRadius" Value="6" />
         <Setter Property="Template">
-            <ControlTemplate TargetType="{x:Type ColorSpectrum}">
-                <Panel
-                    Name="PART_LayoutRoot"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type ColorSpectrum}">
                     <Panel
-                        Name="PART_SizingPanel"
-                        HorizontalAlignment="Center"
-                        VerticalAlignment="Center"
-                        ClipToBounds="True">
-                        <Rectangle
-                            Name="PART_SpectrumRectangle"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                        <Rectangle
-                            Name="PART_SpectrumOverlayRectangle"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                        <Ellipse
-                            Name="PART_SpectrumEllipse"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
-                        <Ellipse
-                            Name="PART_SpectrumOverlayEllipse"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
-                        <Canvas
-                            Name="PART_InputTarget"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            Background="Transparent">
-                            <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
-                            <Panel
-                                Name="PART_SelectionEllipsePanel"
-                                ToolTip.Placement="Top"
-                                ToolTip.VerticalOffset="-10">
-                                <Ellipse
-                                    Name="FocusEllipse"
-                                    Margin="-2"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch"
-                                    IsHitTestVisible="False"
-                                    StrokeThickness="2" />
-                                <Ellipse
-                                    Name="SelectionEllipse"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch"
-                                    IsHitTestVisible="False"
-                                    StrokeThickness="2" />
-                                <ToolTip.Tip>
-                                    <!--  Set in code-behind  -->
-                                </ToolTip.Tip>
-                            </Panel>
-                        </Canvas>
-                        <Rectangle
-                            Name="BorderRectangle"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Box}}"
-                            RadiusX="{TemplateBinding CornerRadius,Converter={StaticResource TopLeftCornerRadiusConverter}}"
-                            RadiusY="{TemplateBinding CornerRadius,Converter={StaticResource BottomRightCornerRadiusConverter}}" />
-                        <Ellipse
-                            Name="BorderEllipse"
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Stretch"
-                            IsHitTestVisible="False"
-                            IsVisible="{TemplateBinding Shape,
-                            Converter={StaticResource EnumToBoolConverter},
-                            ConverterParameter={x:Static ColorSpectrumShape.Ring}}" />
+                        Name="PART_LayoutRoot"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
+                        <Panel
+                            Name="PART_SizingPanel"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
+                            ClipToBounds="True">
+                            <Rectangle
+                                Name="PART_SpectrumRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Rectangle
+                                Name="PART_SpectrumOverlayRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Ellipse
+                                Name="PART_SpectrumEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                            <Ellipse
+                                Name="PART_SpectrumOverlayEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                            <Canvas
+                                Name="PART_InputTarget"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                Background="Transparent">
+                                <!--  Note: ToolTip.VerticalOffset is for touch devices to keep the tip above fingers  -->
+                                <Panel
+                                    Name="PART_SelectionEllipsePanel"
+                                    ToolTip.Placement="Top"
+                                    ToolTip.VerticalOffset="-10">
+                                    <Ellipse
+                                        Name="FocusEllipse"
+                                        Margin="-2"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        IsHitTestVisible="False"
+                                        StrokeThickness="2" />
+                                    <Ellipse
+                                        Name="SelectionEllipse"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch"
+                                        IsHitTestVisible="False"
+                                        StrokeThickness="2" />
+                                    <ToolTip.Tip>
+                                        <!--  Set in code-behind  -->
+                                    </ToolTip.Tip>
+                                </Panel>
+                            </Canvas>
+                            <Rectangle
+                                Name="BorderRectangle"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Box}}"
+                                RadiusX="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource TopLeftCornerRadiusConverter}}"
+                                RadiusY="{TemplateBinding CornerRadius,
+                                                          Converter={StaticResource BottomRightCornerRadiusConverter}}" />
+                            <Ellipse
+                                Name="BorderEllipse"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Stretch"
+                                IsHitTestVisible="False"
+                                IsVisible="{TemplateBinding Shape,
+                                                            Converter={StaticResource EnumToBoolConverter},
+                                                            ConverterParameter={x:Static controls:ColorSpectrumShape.Ring}}" />
+                        </Panel>
                     </Panel>
-                </Panel>
-            </ControlTemplate>
+                </ControlTemplate>
+            </Setter.Value>
         </Setter>
 
         <!--  Normal  -->
         <!--  Separating this allows easier customization in applications  -->
-        <Style Selector="^ /template/ Ellipse#BorderEllipse,^ /template/ Rectangle#BorderRectangle">
+        <Style Selector="^ /template/ Ellipse#BorderEllipse,                      ^ /template/ Rectangle#BorderRectangle">
             <Setter Property="Stroke" Value="{DynamicResource ColorSpectrumBorderBrush}" />
             <Setter Property="StrokeThickness" Value="1" />
         </Style>

src/Semi.Avalonia.ColorPicker/Controls/ColorView.axaml

@@ -1,9 +1,11 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="using:Avalonia.Controls"
     xmlns:converters="using:Avalonia.Controls.Converters"
     xmlns:globalization="using:System.Globalization"
     xmlns:pc="using:Avalonia.Controls.Primitives.Converters"
+    xmlns:primitives="using:Avalonia.Controls.Primitives"
     xmlns:cvts="clr-namespace:Semi.Avalonia.ColorPicker.Converters"
     x:CompileBindings="True">
     <pc:ContrastBrushConverter x:Key="ContrastBrushConverter" />
@@ -17,15 +19,6 @@
     <cvts:ToColorModel x:Key="ToColorModel" />
     <globalization:NumberFormatInfo x:Key="ColorViewComponentNumberFormat" NumberDecimalDigits="0" />
 
-    <Design.PreviewWith>
-        <ColorView
-            Theme="{StaticResource SimpleColorView}"
-            IsAlphaVisible="True"
-            IsAlphaEnabled="True"
-            ColorModel="Hsva"
-            HsvColor="hsv(120,7%,90%)" />
-    </Design.PreviewWith>
-
     <VisualBrush
         x:Key="ColorControlCheckeredBackgroundBrush"
         DestinationRect="0,0,8,8"
@@ -123,12 +116,12 @@
     </ControlTheme>
 
     <ControlTheme x:Key="ColorViewRadioButton" TargetType="RadioButton">
-        <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
-        <Setter Property="Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
-        <Setter Property="Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
-        <Setter Property="Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
-        <Setter Property="Template">
+        <Setter Property="RadioButton.Cursor" Value="Hand" />
+        <Setter Property="RadioButton.FontWeight" Value="{DynamicResource ColorViewRadioButtonFontWeight}" />
+        <Setter Property="RadioButton.Padding" Value="{DynamicResource ColorViewRadioButtonPadding}" />
+        <Setter Property="RadioButton.Foreground" Value="{DynamicResource ColorViewRadioButtonForeground}" />
+        <Setter Property="RadioButton.Background" Value="{DynamicResource ColorViewRadioButtonBackground}" />
+        <Setter Property="RadioButton.Template">
             <ControlTemplate TargetType="RadioButton">
                 <ContentPresenter
                     Name="PART_ContentPresenter"
@@ -170,10 +163,10 @@
 
     <ControlTheme x:Key="{x:Type ColorView}" TargetType="ColorView">
         <Setter Property="CornerRadius" Value="{DynamicResource ControlCornerRadius}" />
-        <Setter Property="Width" Value="300" />
-        <Setter Property="Height" Value="300" />
-        <Setter Property="Palette">
-            <FluentColorPalette />
+        <Setter Property="ColorView.Width" Value="300" />
+        <Setter Property="ColorView.Height" Value="300" />
+        <Setter Property="ColorView.Palette">
+            <controls:FluentColorPalette />
         </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="{x:Type ColorView}">
@@ -215,10 +208,13 @@
                         <!--  Spectrum Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorSpectrumVisible}">
                             <TabItem.Header>
-                                <PathIcon
-                                    Theme="{StaticResource InnerPathIcon}"
-                                    Data="{DynamicResource ColorViewSpectrumIconGlyph}"
-                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewSpectrumIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
                             </TabItem.Header>
                             <Grid Margin="12" RowDefinitions="*">
                                 <Grid.ColumnDefinitions>
@@ -226,7 +222,7 @@
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="Auto" MinWidth="32" />
                                 </Grid.ColumnDefinitions>
-                                <ColorSlider
+                                <primitives:ColorSlider
                                     Name="ColorSpectrumThirdComponentSlider"
                                     Grid.Column="0"
                                     Margin="0,0,12,0"
@@ -240,8 +236,8 @@
                                     IsPerceptive="False"
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
-                                <ColorSpectrum
-                                    Name="ColorSpectrum"
+                                <primitives:ColorSpectrum
+                                    x:Name="ColorSpectrum"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
@@ -254,8 +250,8 @@
                                     MinSaturation="{TemplateBinding MinSaturation}"
                                     MinValue="{TemplateBinding MinValue}"
                                     Shape="{TemplateBinding ColorSpectrumShape}" />
-                                <ColorSlider
-                                    Name="ColorSpectrumAlphaSlider"
+                                <primitives:ColorSlider
+                                    x:Name="ColorSpectrumAlphaSlider"
                                     Grid.Column="2"
                                     Margin="12,0,0,0"
                                     HorizontalAlignment="Center"
@@ -266,21 +262,24 @@
                                     HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     Orientation="Vertical">
-                                    <ColorSlider.IsVisible>
+                                    <primitives:ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
                                             <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
-                                    </ColorSlider.IsVisible>
-                                </ColorSlider>
+                                    </primitives:ColorSlider.IsVisible>
+                                </primitives:ColorSlider>
                             </Grid>
                         </TabItem>
                         <!--  Palette Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorPaletteVisible}">
                             <TabItem.Header>
-                                <PathIcon
-                                    Theme="{StaticResource InnerPathIcon}"
-                                    Data="{DynamicResource ColorViewPaletteIconGlyph}"
-                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewPaletteIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
                             </TabItem.Header>
                             <ListBox
                                 Margin="12"
@@ -313,15 +312,18 @@
                         <!--  Components Tab  -->
                         <TabItem IsVisible="{TemplateBinding IsColorComponentsVisible}">
                             <TabItem.Header>
-                                <PathIcon
-                                    Theme="{StaticResource InnerPathIcon}"
-                                    Data="{DynamicResource ColorViewComponentsIconGlyph}"
-                                    Foreground="{Binding $parent[TabItem].Foreground}" />
+                                <Border Height="{DynamicResource ColorViewTabStripHeight}">
+                                    <PathIcon
+                                        Width="16"
+                                        Height="16"
+                                        Data="{DynamicResource ColorViewComponentsIconGlyph}"
+                                        Foreground="{Binding $parent[TabItem].Foreground}" />
+                                </Border>
                             </TabItem.Header>
                             <Grid
                                 Margin="12"
                                 ColumnDefinitions="Auto,*"
-                                RowDefinitions="Auto,24,*,*,*,*,12"
+                                RowDefinitions="Auto,24,1*,1*,1*,1*,12"
                                 UseLayoutRounding="False">
                                 <Grid.Styles>
                                     <Style Selector="NumericUpDown">
@@ -337,42 +339,43 @@
                                     Grid.Row="0"
                                     Grid.Column="0"
                                     Grid.ColumnSpan="2"
-                                    ColumnDefinitions="*,12,*">
+                                    ColumnDefinitions="1*,12,1*">
                                     <!--  RadioButtonGroup  -->
                                     <Border
                                         Padding="2"
                                         Background="{DynamicResource ColorViewRadioButtonPointeroverBackground}"
                                         CornerRadius="3">
-                                        <Grid ColumnDefinitions="*,*" IsVisible="{TemplateBinding IsColorModelVisible}">
+                                        <Grid ColumnDefinitions="1*,1*" IsVisible="{TemplateBinding IsColorModelVisible}">
                                             <RadioButton
-                                                Name="RgbRadioButton"
+                                                x:Name="RgbRadioButton"
                                                 Grid.Column="0"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
                                                 Content="RGB"
                                                 CornerRadius="3,0,0,3"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                Converter={StaticResource EnumToBoolConverter},
-                                                ConverterParameter={x:Static ColorModel.Rgba},
-                                                Mode=TwoWay}"
+                                                                            Converter={StaticResource EnumToBoolConverter},
+                                                                            ConverterParameter={x:Static controls:ColorModel.Rgba},
+                                                                            Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                             <RadioButton
-                                                Name="HsvRadioButton"
+                                                x:Name="HsvRadioButton"
                                                 Grid.Column="1"
                                                 HorizontalContentAlignment="Center"
                                                 VerticalContentAlignment="Center"
                                                 Content="HSV"
                                                 CornerRadius="0,3,3,0"
                                                 IsChecked="{TemplateBinding ColorModel,
-                                                Converter={StaticResource EnumToBoolConverter},
-                                                ConverterParameter={x:Static ColorModel.Hsva},
-                                                Mode=TwoWay}"
+                                                                            Converter={StaticResource EnumToBoolConverter},
+                                                                            ConverterParameter={x:Static controls:ColorModel.Hsva},
+                                                                            Mode=TwoWay}"
                                                 Theme="{DynamicResource ColorViewRadioButton}" />
                                         </Grid>
                                     </Border>
                                     <TextBox
-                                        Name="PART_HexTextBox"
+                                        x:Name="PART_HexTextBox"
                                         Grid.Column="2"
+                                        Height="32"
                                         HorizontalAlignment="Stretch"
                                         AutomationProperties.Name="Hexadecimal Color"
                                         InnerLeftContent="#"
@@ -396,14 +399,15 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component1Slider}" />
-                                <ColorSlider
-                                    Name="Component1Slider"
+                                <primitives:ColorSlider
+                                    x:Name="Component1Slider"
                                     Grid.Row="2"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component1"
-                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -426,14 +430,15 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component2Slider}" />
-                                <ColorSlider
-                                    Name="Component2Slider"
+                                <primitives:ColorSlider
+                                    x:Name="Component2Slider"
                                     Grid.Row="3"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component2"
-                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -456,14 +461,15 @@
                                     NumberFormat="{StaticResource ColorViewComponentNumberFormat}"
                                     ShowButtonSpinner="False"
                                     Value="{Binding Value, ElementName=Component3Slider}" />
-                                <ColorSlider
-                                    Name="Component3Slider"
+                                <primitives:ColorSlider
+                                    x:Name="Component3Slider"
                                     Grid.Row="4"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Component3"
-                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
@@ -493,33 +499,34 @@
                                         </MultiBinding>
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
-                                <ColorSlider
-                                    Name="AlphaComponentSlider"
+                                <primitives:ColorSlider
+                                    x:Name="AlphaComponentSlider"
                                     Grid.Row="5"
                                     Grid.Column="1"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Center"
                                     ColorComponent="Alpha"
-                                    ColorModel="{TemplateBinding ColorModel,Mode=OneWay}"
+                                    ColorModel="{TemplateBinding ColorModel,
+                                                                 Mode=OneWay}"
                                     HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     IsRoundingEnabled="True"
                                     IsSnapToTickEnabled="True"
                                     Orientation="Horizontal"
                                     TickFrequency="1">
-                                    <ColorSlider.IsVisible>
+                                    <primitives:ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
                                             <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                             <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
-                                    </ColorSlider.IsVisible>
-                                </ColorSlider>
+                                    </primitives:ColorSlider.IsVisible>
+                                </primitives:ColorSlider>
                             </Grid>
                         </TabItem>
                     </TabControl>
                     <!--  Previewer  -->
                     <!--  Note that top/bottom margins have -5 to remove for drop shadow padding  -->
-                    <ColorPreviewer
+                    <primitives:ColorPreviewer
                         Grid.Row="1"
                         Margin="12,-5,12,7"
                         HsvColor="{Binding HsvColor, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
@@ -576,8 +583,8 @@
                         Grid.Row="0"
                         CornerRadius="8 8 0 0"
                         ClipToBounds="True">
-                        <ColorSpectrum
-                            Name="ColorSpectrum"
+                        <primitives:ColorSpectrum
+                            x:Name="ColorSpectrum"
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Components="{TemplateBinding ColorSpectrumComponents}"
@@ -590,7 +597,7 @@
                             MinValue="{TemplateBinding MinValue}"
                             Shape="{TemplateBinding ColorSpectrumShape}" />
                     </Border>
-                    <ColorSlider
+                    <primitives:ColorSlider
                         Name="ColorSpectrumThirdComponentSlider"
                         Grid.Row="1"
                         HorizontalAlignment="Stretch"
@@ -602,7 +609,7 @@
                         IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                         Orientation="Horizontal" />
 
-                    <ColorSlider
+                    <primitives:ColorSlider
                         x:Name="ColorSpectrumAlphaSlider"
                         Grid.Row="2"
                         HorizontalAlignment="Stretch"
@@ -616,7 +623,8 @@
                         IsRoundingEnabled="True"
                         IsSnapToTickEnabled="True"
                         TickFrequency="1"
-                        Orientation="Horizontal" />
+                        Orientation="Horizontal">
+                    </primitives:ColorSlider>
                     <StackPanel
                         Grid.Row="3"
                         HorizontalAlignment="Stretch"
@@ -685,4 +693,13 @@
             <Setter Property="Width" Value="176" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+
+    <Design.PreviewWith>
+        <ColorView
+            Theme="{StaticResource SimpleColorView}"
+            IsAlphaVisible="True"
+            IsAlphaEnabled="True"
+            ColorModel="Hsva"
+            HsvColor="hsv(120,7%,90%)" />
+    </Design.PreviewWith>
+</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Controls/_index.axaml

@@ -1,12 +0,0 @@
-<ResourceDictionary
-    x:CompileBindings="True"
-    xmlns="https://github.com/avaloniaui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ResourceDictionary.MergedDictionaries>
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPreviewer.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSlider.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorSpectrum.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorView.axaml" />
-    </ResourceDictionary.MergedDictionaries>
-</ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Dark.axaml

@@ -1,17 +1,21 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
-    <StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="ColorViewRadioButtonPressedBackground" ResourceKey="SemiColorFill2" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedForeground" ResourceKey="SemiColorWhite" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedBackground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryPointerover" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryActive" />
-    <StaticResource x:Key="ColorViewTabItemSelectedForeground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorSliderDefaultBorderBrush" ResourceKey="SemiColorBlack" />
-    <StaticResource x:Key="ColorSliderLightBorderBrush" ResourceKey="SemiColorWhite" />
-    <StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
-    <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
-    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
+    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#54A9FF" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.20" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#54A9FF" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#7FC1FF" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#A9D7FF" />
+
+    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#54A9FF" />
+
+
+    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
+    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
+    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
+
+    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
+
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">inset 0 0 0 1 #1AFFFFFF, 0 4 14 #40000000</BoxShadows>
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Index.axaml

@@ -6,7 +6,7 @@
                 <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
-                <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/_index.axaml" />
+                <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />
                 <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Shared.axaml" />
             </ResourceDictionary.MergedDictionaries>
         </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Light.axaml

@@ -1,17 +1,21 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="ColorViewRadioButtonForeground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorViewRadioButtonBackground" ResourceKey="SemiColorBackground0" />
-    <StaticResource x:Key="ColorViewRadioButtonPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="ColorViewRadioButtonPressedBackground" ResourceKey="SemiColorFill2" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedForeground" ResourceKey="SemiColorWhite" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedBackground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryPointerover" />
-    <StaticResource x:Key="ColorViewRadioButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryActive" />
-    <StaticResource x:Key="ColorViewTabItemSelectedForeground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="ColorSliderDefaultBorderBrush" ResourceKey="SemiColorBlack" />
-    <StaticResource x:Key="ColorSliderLightBorderBrush" ResourceKey="SemiColorWhite" />
-    <StaticResource x:Key="ColorSliderDarkBorderBrush" ResourceKey="SemiColorBlack" />
-    <StaticResource x:Key="ColorSpectrumBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="ColorPreviewerMainBoxShadow" ResourceKey="SemiShadowElevated" />
-    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
+    <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#0077FA" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonPressedBackground" Opacity="0.13" Color="#2E3238" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedForeground" Color="White" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedBackground" Color="#0077FA" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPointeroverBackground" Color="#0062D6" />
+    <SolidColorBrush x:Key="ColorViewRadioButtonCheckedPressedBackground" Color="#004FB3" />
+
+    <SolidColorBrush x:Key="ColorViewTabItemSelectedForeground" Color="#0077FA" />
+
+
+    <SolidColorBrush x:Key="ColorSliderDefaultBorderBrush" Color="Black" />
+    <SolidColorBrush x:Key="ColorSliderLightBorderBrush" Color="White" />
+    <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
+
+    <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
+
+    <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 1 #4A000000, 0 4 14 #1A000000</BoxShadows>
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Semi.Avalonia.ColorPicker.csproj

@@ -4,7 +4,7 @@
 
     <PropertyGroup>
         <Title>Semi.Avalonia.ColorPicker</Title>
-        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.2.1.6</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Semi.Avalonia.ColorPicker 11.2.1.3</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -12,6 +12,7 @@
     </PropertyGroup>
 
     <ItemGroup>
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
         <PackageReference Include="Avalonia.Controls.ColorPicker" Version="$(AvaloniaVersion)"/>
     </ItemGroup>
 

src/Semi.Avalonia.ColorPicker/Shared.axaml

@@ -1,31 +1,30 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:semi="https://irihi.tech/semi">
-    <StaticResource x:Key="ColorViewRadioButtonFontWeight" ResourceKey="SemiFontWeightBold" />
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
+    <FontWeight x:Key="ColorViewRadioButtonFontWeight">600</FontWeight>
     <Thickness x:Key="ColorViewRadioButtonPadding">16 4</Thickness>
     <x:Double x:Key="ColorViewNumericUpDownWidth">70</x:Double>
 
-    <StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" />
-    <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" />
-    <StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" />
+    <StreamGeometry x:Key="ColorViewSpectrumIconGlyph">M1.22 20.77a4.24 4.24 0 0 1 .02-5.98l9.33-9.28-.94-.95a1.41 1.41 0 0 1 0-1.99 1.39 1.39 0 0 1 1.97 0l.95.97L14.9 1.2a4.16 4.16 0 0 1 5.89.02 4.24 4.24 0 0 1-.02 5.98l-2.3 2.28 1.02 1.02c.54.55.54 1.44 0 1.99-.55.55-1.43.55-1.97 0l-1.03-1.03-9.37 9.32a4.16 4.16 0 0 1-5.89-.02ZM12.54 7.49l1.97 1.99-9.35 9.3c-.55.55-1.42.55-1.97 0a1.41 1.41 0 0 1 .01-2l9.34-9.29Z</StreamGeometry>
+    <StreamGeometry x:Key="ColorViewPaletteIconGlyph">M2 4c0-1.1.9-2 2-2h5a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4Zm6 13.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm11.59-8.91L16.4 5.4a2 2 0 0 0-2.82 0L13 6v12l6.59-6.59a2 2 0 0 0 0-2.82ZM22 16a2 2 0 0 0-2-2l-8 8h8a2 2 0 0 0 2-2v-4Z</StreamGeometry>
+    <StreamGeometry x:Key="ColorViewComponentsIconGlyph">M4 6.5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM9.5 3a1.5 1.5 0 1 0 0 3h11a1.5 1.5 0 0 0 0-3h-11ZM8 11.5c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 11.5Zm0 7c0-.83.67-1.5 1.5-1.5h11a1.5 1.5 0 0 1 0 3h-11A1.5 1.5 0 0 1 8 18.5Zm-2-7a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-2 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z</StreamGeometry>
+    <!-- <StaticResource x:Key="ColorViewSpectrumIconGlyph" ResourceKey="SemiIconEyedropper" /> -->
+    <!-- <StaticResource x:Key="ColorViewPaletteIconGlyph" ResourceKey="SemiIconColorPalette" /> -->
+    <!-- <StaticResource x:Key="ColorViewComponentsIconGlyph" ResourceKey="SemiIconList" /> -->
 
-    <StaticResource x:Key="ColorSliderWidth" ResourceKey="SemiSpacingBase" />
-    <StaticResource x:Key="ColorSliderCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
-    <StaticResource x:Key="ColorSliderThumbBorderBrush" ResourceKey="SemiThicknessSuperTight" />
-    <StaticResource x:Key="ColorSliderThumbCornerRadius" ResourceKey="SemiBorderRadiusFull" />
+    <x:Double x:Key="ColorSliderWidth">16</x:Double>
+    <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
+    <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
+    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
 
     <x:Double x:Key="ColorPreviewerAccentSectionWidth">80</x:Double>
     <x:Double x:Key="ColorPreviewerAccentSectionHeight">20</x:Double>
     <x:Double x:Key="ColorPreviewerHeight">48</x:Double>
-    <StaticResource x:Key="ColorPreviewerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
 
-    <semi:SemiColorDarkPalette x:Key="SemiColorPalette" />
+    <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
 
-    <StaticResource x:Key="ColorSpectrumCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
-
-    <StaticResource x:Key="ColorPickerMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="ColorPickerCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
     <PlacementMode x:Key="ColorPickerFlyoutPlacement">AnchorAndGravity</PlacementMode>
     <PlacementMode x:Key="SimpleColorPickerFlyoutPlacement">BottomEdgeAlignedLeft</PlacementMode>
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/Dark.axaml

@@ -1,21 +1,29 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="DataGridLineBrush" ResourceKey="SemiColorBorder" />
+    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="White" />
+
     <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridCellFocusBorderBrush" ResourceKey="SemiColorTertiaryLightActive" />
-    <StaticResource x:Key="DataGridCellCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="DataGridCellErrorBrush" ResourceKey="SemiColorDangerLight" />
-    <StaticResource x:Key="DataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
+    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#41464C" />
+    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="White" />
+    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#6C090B" />
+
+
+    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.6" Color="#F9F9F9" />
     <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridColumnHeaderPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="DataGridColumnHeaderPressedBackground" ResourceKey="SemiColorFill2" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.20" Color="White" />
+
     <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridRowErrorBackground" ResourceKey="SemiColorDangerLight" />
+
+    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#6C090B" />
     <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridRowPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="DataGridRowSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <StaticResource x:Key="DataGridRowSelectedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
-    <StaticResource x:Key="DataGridRowGroupHeaderExpandIconForeground" ResourceKey="SemiColorText2" />
-    <StaticResource x:Key="DataGridRowGroupHeaderBackground" ResourceKey="SemiColorFill0" />
-    <StaticResource x:Key="DataGridRowGroupHeaderCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="DataGridDisabledBackground" ResourceKey="SemiColorDisabledFill" />
+
+    <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Opacity="0.3" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderExpandIconForeground" Opacity="0.6" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderBackground" Opacity="0.12" Color="White" />
+
+    <SolidColorBrush x:Key="DataGridRowGroupHeaderCurrentBorderBrush" Opacity="0.08" Color="White" />
+
+    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#E6E8EA" Opacity="0.04" />
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -126,19 +126,21 @@
                             Name="HeaderBackground"
                             Grid.ColumnSpan="2"
                             Margin="4"
-                            CornerRadius="{DynamicResource DataGridColumnHeaderCornerRadius}" />
+                            CornerRadius="3" />
                         <Grid
-                            ColumnDefinitions="*,Auto"
                             Margin="{TemplateBinding Padding}"
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
-                            <ContentPresenter
-                                Content="{TemplateBinding Content}"
-                                ContentTemplate="{TemplateBinding ContentTemplate}" />
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="Auto" />
+                            </Grid.ColumnDefinitions>
+                            <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
                             <PathIcon
                                 Name="SortIcon"
                                 Grid.Column="1"
-                                Theme="{StaticResource InnerPathIcon}"
+                                Width="8"
+                                Height="8"
                                 Margin="0,0,8,0"
                                 Foreground="{TemplateBinding Foreground}" />
                         </Grid>
@@ -291,7 +293,7 @@
                             Grid.ColumnSpan="2"
                             Margin="{DynamicResource DataGridRowMargin}"
                             Background="{DynamicResource DataGridRowBackground}"
-                            CornerRadius="{DynamicResource DataGridRowCornerRadius}" />
+                            CornerRadius="3" />
                         <Rectangle
                             Name="InvalidVisualElement"
                             Grid.ColumnSpan="2"
@@ -356,7 +358,8 @@
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleButton">
                 <PathIcon
-                    Theme="{StaticResource InnerPathIcon}"
+                    Width="12"
+                    Height="12"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     Background="Transparent"
@@ -372,7 +375,7 @@
     <ControlTheme x:Key="{x:Type DataGridRowGroupHeader}" TargetType="DataGridRowGroupHeader">
         <Setter Property="Focusable" Value="False" />
         <Setter Property="Background" Value="{DynamicResource DataGridRowGroupHeaderBackground}" />
-        <Setter Property="MinHeight" Value="{DynamicResource DataGridRowGroupHeaderMinHeight}" />
+        <Setter Property="MinHeight" Value="32" />
         <Setter Property="Template">
             <ControlTemplate x:DataType="collections:DataGridCollectionViewGroup" TargetType="DataGridRowGroupHeader">
                 <DataGridFrozenGrid
@@ -397,18 +400,20 @@
                         Grid.Column="3"
                         Margin="12,0,0,0"
                         VerticalAlignment="Center"
-                        Orientation="Horizontal"
-                        Spacing="4">
+                        Orientation="Horizontal">
                         <TextBlock
                             Name="PART_PropertyNameElement"
+                            Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding IsPropertyNameVisible}" />
                         <ContentControl
                             Name="PART_GroupKeyContentControl"
+                            Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             Content="{Binding Key}" />
                         <TextBlock
                             Name="PART_ItemCountElement"
+                            Margin="4,0,0,0"
                             Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding IsItemCountVisible}" />
                     </StackPanel>
@@ -525,7 +530,6 @@
                             Name="PART_VerticalScrollbar"
                             Grid.Row="1"
                             Grid.Column="2"
-                            AllowAutoHide="{Binding Path=(ScrollViewer.AllowAutoHide), RelativeSource={RelativeSource TemplatedParent}}"
                             Orientation="Vertical" />
 
                         <Grid
@@ -536,7 +540,6 @@
                             <ScrollBar
                                 Name="PART_HorizontalScrollbar"
                                 Grid.Column="1"
-                                AllowAutoHide="{Binding Path=(ScrollViewer.AllowAutoHide), RelativeSource={RelativeSource TemplatedParent}}"
                                 Height="{DynamicResource ScrollBarSize}"
                                 Orientation="Horizontal" />
                         </Grid>
@@ -549,7 +552,7 @@
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
                             Background="{DynamicResource DataGridDisabledBackground}"
-                            CornerRadius="{DynamicResource DataGridDisabledCornerRadius}"
+                            CornerRadius="2"
                             IsHitTestVisible="False"
                             IsVisible="{Binding !$parent[DataGrid].IsEnabled}" />
                     </Grid>
@@ -569,7 +572,7 @@
             </Style>
         </Style>
 
-        <Style Selector="^.InsetContent">
+        <Style Selector="^[(ScrollViewer.AllowAutoHide)=False]">
             <Style Selector="^ /template/ DataGridRowsPresenter#PART_RowsPresenter">
                 <Setter Property="Grid.RowSpan" Value="1" />
                 <Setter Property="Grid.ColumnSpan" Value="2" />
@@ -579,4 +582,4 @@
             </Style>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia.DataGrid/Light.axaml

@@ -1,21 +1,29 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="DataGridLineBrush" ResourceKey="SemiColorBorder" />
+    <SolidColorBrush x:Key="DataGridLineBrush" Opacity="0.08" Color="#1C1F23" />
+
     <SolidColorBrush x:Key="DataGridCellBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridCellFocusBorderBrush" ResourceKey="SemiColorTertiaryLightActive" />
-    <StaticResource x:Key="DataGridCellCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="DataGridCellErrorBrush" ResourceKey="SemiColorDangerLight" />
-    <StaticResource x:Key="DataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
+    <SolidColorBrush x:Key="DataGridCellFocusBorderBrush" Color="#C6CACD" />
+    <SolidColorBrush x:Key="DataGridCellCurrentBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="DataGridCellErrorBrush" Color="#FEF2ED" />
+
+
+    <SolidColorBrush x:Key="DataGridColumnHeaderForeground" Opacity="0.62" Color="#1C1F23" />
     <SolidColorBrush x:Key="DataGridColumnHeaderBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridColumnHeaderPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="DataGridColumnHeaderPressedBackground" ResourceKey="SemiColorFill2" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="DataGridColumnHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />
+
     <SolidColorBrush x:Key="DataGridRowBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridRowErrorBackground" ResourceKey="SemiColorDangerLight" />
+
+    <SolidColorBrush x:Key="DataGridRowErrorBackground" Color="#FEF2ED" />
     <SolidColorBrush x:Key="DataGridDetailsPresenterBackground" Color="Transparent" />
-    <StaticResource x:Key="DataGridRowPointeroverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="DataGridRowSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <StaticResource x:Key="DataGridRowSelectedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
-    <StaticResource x:Key="DataGridRowGroupHeaderExpandIconForeground" ResourceKey="SemiColorText2" />
-    <StaticResource x:Key="DataGridRowGroupHeaderBackground" ResourceKey="SemiColorFill0" />
-    <StaticResource x:Key="DataGridRowGroupHeaderCurrentBorderBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="DataGridDisabledBackground" ResourceKey="SemiColorDisabledFill" />
+
+    <SolidColorBrush x:Key="DataGridRowPointeroverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="DataGridRowSelectedBackground" Color="#EAF5FF" />
+    <SolidColorBrush x:Key="DataGridRowSelectedPointeroverBackground" Color="#CBE7FE" />
+    <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" />
+
+    <SolidColorBrush x:Key="DataGridDisabledBackground" Color="#2E3238" Opacity="0.02" />
 </ResourceDictionary>

src/Semi.Avalonia.DataGrid/Semi.Avalonia.DataGrid.csproj

@@ -1,18 +1,10 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
+    <Import Project="../Package.props"/>
+
     <PropertyGroup>
-        <TargetFrameworks>netstandard2.0;net6.0;net8.0</TargetFrameworks>
-        <Nullable>enable</Nullable>
-        <LangVersion>latest</LangVersion>
-        <Version>11.2.1.6</Version>
-        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.6</PackageReleaseNotes>
-        <Authors>IRIHI Technology Co., Ltd.</Authors>
-        <Description>Avalonia Theme inspired by Semi Design.</Description>
-        <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>
-        <PackageLicenseExpression>MIT</PackageLicenseExpression>
-        <PackageIcon>irihi.png</PackageIcon>
-        <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
         <Title>Semi.Avalonia.DataGrid</Title>
+        <PackageReleaseNotes>Update to Semi.Avalonia.DataGrid 11.2.1.3</PackageReleaseNotes>
     </PropertyGroup>
 
     <PropertyGroup Condition="$([MSBuild]::IsTargetFrameworkCompatible('$(TargetFramework)', 'net8.0'))">
@@ -20,8 +12,8 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.2.1"/>
-        <None Include="irihi.png" Pack="true" PackagePath=""/>
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)"/>
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)"/>
     </ItemGroup>
 
 </Project>

src/Semi.Avalonia.DataGrid/Shared.axaml

@@ -1,22 +1,23 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <Thickness x:Key="DataGridCellTextBlockDefaultMargin">12 0</Thickness>
-    <StaticResource x:Key="DataGridCellMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="DataGridCellVisualBorderThickness" ResourceKey="SemiBorderThicknessControl" />
-    <StaticResource x:Key="DataGridCellVisualStrokeThickness" ResourceKey="SemiBorderSpacingControl" />
+
+    <x:Double x:Key="DataGridCellMinHeight">32</x:Double>
+    <Thickness x:Key="DataGridCellVisualBorderThickness">1</Thickness>
+    <x:Double x:Key="DataGridCellVisualStrokeThickness">1</x:Double>
 
     <Thickness x:Key="DataGridColumnHeaderPadding">12 0 0 0</Thickness>
-    <StaticResource x:Key="DataGridColumnHeaderMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="DataGridColumnHeaderCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
-    <StaticResource x:Key="DataGridColumnHeaderAscendingGlyph" ResourceKey="SemiIconSmallTriangleTop" />
-    <StaticResource x:Key="DataGridColumnHeaderDescendingGlyph" ResourceKey="SemiIconSmallTriangleDown" />
+    <x:Double x:Key="DataGridColumnHeaderMinHeight">32</x:Double>
+
+    <StreamGeometry x:Key="DataGridColumnHeaderAscendingGlyph">m6.45 8.34 4.8-5.48a1 1 0 0 1 1.5 0l4.8 5.48A1 1 0 0 1 16.8 10H7.2a1 1 0 0 1-.75-1.66Z</StreamGeometry>
+    <StreamGeometry x:Key="DataGridColumnHeaderDescendingGlyph">m17.55 15.66-4.8 5.48a1 1 0 0 1-1.5 0l-4.8-5.48A1 1 0 0 1 7.2 14h9.6a1 1 0 0 1 .75 1.66Z</StreamGeometry>
+    <!-- <StaticResource x:Key="DataGridColumnHeaderAscendingGlyph" ResourceKey="SemiIconCaretUp" /> -->
+    <!-- <StaticResource x:Key="DataGridColumnHeaderDescendingGlyph" ResourceKey="SemiIconCaretDown" /> -->
 
     <Thickness x:Key="DataGridRowHeaderMargin">8 0</Thickness>
-    <StaticResource x:Key="DataGridRowCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
-    <StaticResource x:Key="DataGridRowMargin" ResourceKey="SemiThicknessSuperTight" />
+    <Thickness x:Key="DataGridRowMargin">2</Thickness>
 
-    <StaticResource x:Key="DataGridRowGroupHeaderMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="DataGridRowGroupHeaderExpandIconGlyph" ResourceKey="SemiIconChevronRight" />
-    <StaticResource x:Key="DataGridRowGroupHeaderVisualStrokeThickness" ResourceKey="SemiBorderSpacingControl" />
+    <StreamGeometry x:Key="DataGridRowGroupHeaderExpandIconGlyph">M7.44 19.8a1.5 1.5 0 0 1 0-2.13l5.66-5.65-5.66-5.66a1.5 1.5 0 1 1 2.12-2.12l6.72 6.72a1.5 1.5 0 0 1 0 2.12L9.56 19.8a1.5 1.5 0 0 1-2.12 0Z</StreamGeometry>
+    <!-- <StaticResource x:Key="DataGridRowGroupHeaderExpandIconGlyph" ResourceKey="SemiIconChevronRight" /> -->
 
-    <StaticResource x:Key="DataGridDisabledCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <x:Double x:Key="DataGridRowGroupHeaderVisualStrokeThickness">1</x:Double>
 </ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/Dark.axaml

@@ -1,11 +1,11 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="TreeDataGridGridLinesBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="TreeDataGridHeaderPressedBackground" ResourceKey="SemiColorFill2" />
+    <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="White" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.20" Color="White" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverForeground" ResourceKey="SemiColorText1" />
-    <StaticResource x:Key="TreeDataGridHeaderPressedForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="TreeDataGridCellSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <StaticResource x:Key="TreeDataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
-</ResourceDictionary>
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverForeground" Opacity="0.8" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedForeground" Opacity="1" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="TreeDataGridCellSelectedBackground" Opacity="0.2" Color="#FF54A9FF" />
+    <SolidColorBrush x:Key="TreeDataGridColumnHeaderForeground" Opacity="0.6" Color="#F9F9F9" />
+</ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/Light.axaml

@@ -1,11 +1,11 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="TreeDataGridGridLinesBrush" ResourceKey="SemiColorBorder" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="TreeDataGridHeaderPressedBackground" ResourceKey="SemiColorFill2" />
+    <SolidColorBrush x:Key="TreeDataGridGridLinesBrush" Opacity="0.08" Color="#1C1F23" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBackground" Opacity="0.09" Color="#2E3238" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedBackground" Opacity="0.13" Color="#2E3238" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="TreeDataGridHeaderPressedBorderBrush" Color="Transparent" />
-    <StaticResource x:Key="TreeDataGridHeaderPointerOverForeground" ResourceKey="SemiColorText1" />
-    <StaticResource x:Key="TreeDataGridHeaderPressedForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="TreeDataGridCellSelectedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <StaticResource x:Key="TreeDataGridColumnHeaderForeground" ResourceKey="SemiColorText2" />
-</ResourceDictionary>
+    <SolidColorBrush x:Key="TreeDataGridHeaderPointerOverForeground" Opacity="0.8" Color="#1C1F23" />
+    <SolidColorBrush x:Key="TreeDataGridHeaderPressedForeground" Opacity="1" Color="#1C1F23" />
+    <SolidColorBrush x:Key="TreeDataGridCellSelectedBackground" Color="#EAF5FF" />
+    <SolidColorBrush x:Key="TreeDataGridColumnHeaderForeground" Opacity="0.62" Color="#1C1F23" />
+</ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/Semi.Avalonia.TreeDataGrid.csproj

@@ -4,8 +4,8 @@
         <TargetFramework>net6.0</TargetFramework>
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
-        <Version>11.0.10.2</Version>
-        <PackageReleaseNotes>Update to 11.0.10.2</PackageReleaseNotes>
+        <Version>11.0.10.1</Version>
+        <PackageReleaseNotes>Update to 11.0.10.1</PackageReleaseNotes>
         <Authors>IRIHI Technology Co., Ltd.</Authors>
         <Description>Avalonia Theme inspired by Semi Design.</Description>
         <RepositoryUrl>https://github.com/irihitech/Semi.Avalonia</RepositoryUrl>

src/Semi.Avalonia.TreeDataGrid/Shared.axaml

@@ -1,11 +1,9 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <StaticResource x:Key="TreeDataGridSortIconAscendingPath" ResourceKey="SemiIconSmallTriangleTop" />
-    <StaticResource x:Key="TreeDataGridSortIconDescendingPath" ResourceKey="SemiIconSmallTriangleDown" />
-    <StaticResource x:Key="TreeDataGridItemCollapsedChevronPathData" ResourceKey="SemiIconTreeTriangleRight" />
-    <StaticResource x:Key="TreeDataGridItemCollapsedChevronWidth" ResourceKey="SemiWidthIconMedium" />
-    <StaticResource x:Key="TreeDataGridColumnHeaderCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
-    <StaticResource x:Key="TreeDataGridColumnHeaderMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="TreeDataGridRowCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
-    <StaticResource x:Key="TreeDataGridRowMinHeight" ResourceKey="SemiHeightControlDefault" />
-    <StaticResource x:Key="TreeDataGridRowMargin" ResourceKey="SemiThicknessSuperTight" />
+    <StreamGeometry x:Key="TreeDataGridSortIconAscendingPath">m6.45 8.34 4.8-5.48a1 1 0 0 1 1.5 0l4.8 5.48A1 1 0 0 1 16.8 10H7.2a1 1 0 0 1-.75-1.66Z</StreamGeometry>
+    <StreamGeometry x:Key="TreeDataGridSortIconDescendingPath">m17.55 15.66-4.8 5.48a1 1 0 0 1-1.5 0l-4.8-5.48A1 1 0 0 1 7.2 14h9.6a1 1 0 0 1 .75 1.66Z</StreamGeometry>
+    <StreamGeometry x:Key="TreeDataGridItemCollapsedChevronPathData">m9.66 3.44 8.97 7.8a1 1 0 0 1 0 1.51l-8.97 7.81A1 1 0 0 1 8 19.81V4.19a1 1 0 0 1 1.66-.75Z</StreamGeometry>
+    <!-- <StaticResource x:Key="TreeDataGridSortIconAscendingPath" ResourceKey="SemiIconCaretUp"/> -->
+    <!-- <StaticResource x:Key="TreeDataGridSortIconDescendingPath" ResourceKey="SemiIconCaretDown"/> -->
+    <!-- <StaticResource x:Key="TreeDataGridItemCollapsedChevronPathData" ResourceKey="SemiIconTreeTriangleRight"/> -->
+    <Thickness x:Key="TreeDataGridRowMargin">2</Thickness>
 </ResourceDictionary>

src/Semi.Avalonia.TreeDataGrid/TreeDataGrid.axaml

@@ -49,10 +49,10 @@
 
     <ControlTheme x:Key="{x:Type TreeDataGridColumnHeader}" TargetType="TreeDataGridColumnHeader">
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="MinHeight" Value="{DynamicResource TreeDataGridColumnHeaderMinHeight}" />
+        <Setter Property="MinHeight" Value="32" />
         <Setter Property="Padding" Value="8 2 0 2" />
         <Setter Property="Cursor" Value="Hand" />
-        <Setter Property="CornerRadius" Value="{DynamicResource TreeDataGridColumnHeaderCornerRadius}" />
+        <Setter Property="CornerRadius" Value="4" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Foreground" Value="{DynamicResource TreeDataGridColumnHeaderForeground}" />
         <Setter Property="Template">
@@ -87,8 +87,11 @@
                         </Panel>
                         <PathIcon
                             Name="SortIcon"
-                            Theme="{StaticResource InnerPathIcon}"
+                            Width="8"
+                            Height="8"
                             Margin="0,0,8,0"
+                            HorizontalAlignment="Center"
+                            VerticalAlignment="Center"
                             DockPanel.Dock="Right"
                             Foreground="{TemplateBinding Foreground}"
                             TabIndex="1" />
@@ -137,8 +140,8 @@
 
     <ControlTheme x:Key="{x:Type TreeDataGridRow}" TargetType="TreeDataGridRow">
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="CornerRadius" Value="{DynamicResource TreeDataGridRowCornerRadius}" />
-        <Setter Property="MinHeight" Value="{DynamicResource TreeDataGridRowMinHeight}" />
+        <Setter Property="CornerRadius" Value="3" />
+        <Setter Property="MinHeight" Value="32" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate>
@@ -189,17 +192,25 @@
     </ControlTheme>
 
     <ControlTheme x:Key="TreeDataGridExpandCollapseChevron" TargetType="ToggleButton">
+        <Setter Property="Margin" Value="0" />
+        <Setter Property="Width" Value="8" />
+        <Setter Property="Height" Value="8" />
         <Setter Property="Foreground" Value="{DynamicResource TreeDataGridColumnHeaderForeground}" />
         <Setter Property="Template">
             <ControlTemplate>
-                <PathIcon
-                    Name="ChevronPath"
+                <Border
                     Width="{TemplateBinding Width}"
                     Height="{TemplateBinding Height}"
-                    Theme="{StaticResource InnerPathIcon}"
-                    Classes="Small"
-                    Data="{DynamicResource TreeDataGridItemCollapsedChevronPathData}"
-                    Foreground="{TemplateBinding Foreground}" />
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Background="Transparent">
+                    <PathIcon
+                        Name="ChevronPath"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        Data="{DynamicResource TreeDataGridItemCollapsedChevronPathData}"
+                        Foreground="{TemplateBinding Foreground}" />
+                </Border>
             </ControlTemplate>
         </Setter>
         <Style Selector="^:checked /template/ PathIcon#ChevronPath">
@@ -212,16 +223,18 @@
             <ControlTemplate>
                 <Border
                     Name="CellBorder"
-                    Padding="{TemplateBinding Indent,Converter={x:Static conv:IndentConverter.Instance}}"
+                    Padding="{TemplateBinding Indent,
+                                              Converter={x:Static conv:IndentConverter.Instance}}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
                         <Border
-                            DockPanel.Dock="Left"
-                            Width="{DynamicResource TreeDataGridItemCollapsedChevronWidth}"
-                            Margin="4,0">
+                            Width="12"
+                            Height="12"
+                            Margin="4,0"
+                            DockPanel.Dock="Left">
                             <ToggleButton
                                 Focusable="False"
                                 IsChecked="{TemplateBinding IsExpanded, Mode=TwoWay}"
@@ -322,4 +335,4 @@
             </Setter>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/AdornerLayer.axaml

@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:CompileBindings="True">
+    x:ClassModifier="internal">
     <ControlTheme x:Key="{x:Type AdornerLayer}" TargetType="AdornerLayer">
         <Setter Property="DefaultFocusAdorner">
             <FocusAdornerTemplate>

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -79,12 +79,12 @@
                                 BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                 BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                 CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                <ListBox
-                                    Name="PART_SelectingItemsControl"
-                                    Foreground="{TemplateBinding Foreground}"
-                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                    <ListBox
+                                        Name="PART_SelectingItemsControl"
+                                        Foreground="{TemplateBinding Foreground}"
+                                        ItemTemplate="{TemplateBinding ItemTemplate}"
+                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
                             </Border>
                         </Popup>
                     </Panel>
@@ -98,4 +98,4 @@
             <Setter Property="MinHeight" Value="{DynamicResource AutoCompleteBoxSmallHeight}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Border.axaml

@@ -31,4 +31,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Button.axaml

@@ -108,9 +108,11 @@
                         Classes="Solid" />
             </FocusAdornerTemplate>
         </Setter>
-        <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
-        <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
+        </Style>
 
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
             <Setter Property="Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
@@ -270,8 +272,8 @@
     </ControlTheme>
 
     <ControlTheme x:Key="InnerIconButton" TargetType="Button">
-        <Setter Property="Width" Value="{DynamicResource SemiWidthIconMedium}" />
-        <Setter Property="Height" Value="{DynamicResource SemiWidthIconMedium}" />
+        <Setter Property="Width" Value="16"/>
+        <Setter Property="Height" Value="16"/>
         <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Cursor" Value="Hand" />

src/Semi.Avalonia/Controls/ButtonSpinner.axaml

@@ -98,7 +98,7 @@
             <Setter Property="Margin" Value="0 0 4 0" />
         </Style>
         <Style Selector="^:pointerover /template/ Border#ButtonGroup">
-            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonSpinnerRepeatButtonPointeroverBorderBrush}"/>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Calendar.axaml

@@ -2,11 +2,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <Design.PreviewWith>
-        <Border Padding="20">
-            <Calendar />
-        </Border>
-    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type Calendar}" TargetType="Calendar">
         <Setter Property="Foreground" Value="{DynamicResource CalendarForeground}" />
         <Setter Property="Background" Value="{DynamicResource CalendarBackground}" />
@@ -42,8 +37,7 @@
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     x:DataType="x:String"
-                    FontSize="{DynamicResource CalendarItemWeekDayNameFontSize}"
-                    FontWeight="{DynamicResource CalendarItemWeekDayNameFontWeight}"
+                    FontSize="12"
                     Foreground="{DynamicResource CalendarItemWeekDayNameForeground}"
                     Text="{Binding}" />
             </Template>
@@ -64,41 +58,38 @@
                         VerticalAlignment="Stretch"
                         RowDefinitions="Auto,*">
                         <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto">
-                            <RepeatButton
+                            <Button
                                 Name="PART_PreviousButton"
                                 Grid.Column="0"
-                                Padding="0"
-                                MinWidth="{Binding $self.MinHeight}"
+                                HorizontalContentAlignment="Left"
                                 Foreground="{TemplateBinding Foreground}"
-                                Theme="{DynamicResource BorderlessRepeatButton}">
+                                Theme="{DynamicResource BorderlessButton}">
                                 <PathIcon
                                     Theme="{DynamicResource InnerPathIcon}"
                                     Classes="Large"
                                     Data="{DynamicResource CalendarItemPreviousIconGlyph}"
                                     Foreground="{DynamicResource CalendarItemIconForeground}" />
-                            </RepeatButton>
+                            </Button>
 
                             <Button
                                 Name="PART_HeaderButton"
                                 Grid.Column="1"
                                 HorizontalContentAlignment="Center"
-                                HorizontalAlignment="Stretch"
                                 Foreground="{TemplateBinding Foreground}"
                                 Theme="{DynamicResource BorderlessButton}" />
 
-                            <RepeatButton
+                            <Button
                                 Name="PART_NextButton"
                                 Grid.Column="2"
-                                Padding="0"
-                                MinWidth="{Binding $self.MinHeight}"
+                                HorizontalContentAlignment="Left"
                                 Foreground="{TemplateBinding Foreground}"
-                                Theme="{DynamicResource BorderlessRepeatButton}">
+                                Theme="{DynamicResource BorderlessButton}">
                                 <PathIcon
                                     Theme="{DynamicResource InnerPathIcon}"
                                     Classes="Large"
                                     Data="{DynamicResource CalendarItemNextIconGlyph}"
                                     Foreground="{DynamicResource CalendarItemIconForeground}" />
-                            </RepeatButton>
+                            </Button>
                         </Grid>
                         <Grid
                             Name="PART_MonthView"
@@ -253,4 +244,4 @@
             <Setter Property="Foreground" Value="{DynamicResource CalendarItemCalendarDayButtonDisabledForeground}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/CalendarDatePicker.axaml

@@ -13,7 +13,7 @@
         <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource CalendarDatePickerBorderThickness}" />
         <Setter Property="CornerRadius" Value="{DynamicResource CalendarDatePickerCornerRadius}" />
-        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
+        <Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>
         <Setter Property="IsTodayHighlighted" Value="True" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
@@ -34,7 +34,7 @@
                             Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="{TemplateBinding CornerRadius}" />
+                            CornerRadius="{TemplateBinding CornerRadius}"/>
                         <Grid
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
@@ -227,4 +227,4 @@
             </Style>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/CaptionButtons.axaml

@@ -5,14 +5,15 @@
     <Design.PreviewWith>
         <CaptionButtons />
     </Design.PreviewWith>
-
     <ControlTheme x:Key="CaptionButton" TargetType="Button">
+        <Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CaptionButtonPressedBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="CornerRadius" Value="{StaticResource CaptionButtonCornerRadius}" />
-        <Setter Property="Padding" Value="{StaticResource CaptionButtonPadding}" />
-        <Setter Property="Width" Value="{StaticResource CaptionButtonWidth}" />
-        <Setter Property="Height" Value="{StaticResource CaptionButtonHeight}" />
+        <Setter Property="CornerRadius" Value="6" />
+        <Setter Property="Margin" Value="0, 4" />
+        <Setter Property="Padding" Value="4" />
+        <Setter Property="Height" Value="28" />
+        <Setter Property="Width" Value="28" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="VerticalAlignment" Value="Stretch" />
         <Setter Property="Template">
@@ -20,76 +21,77 @@
                 <ContentPresenter
                     Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
-                    Foreground="{TemplateBinding Foreground}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Background="Transparent"
                     Content="{TemplateBinding Content}"
-                    ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}" />
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonPointeroverBackground}" />
+        <Style Selector="^:pointerover /template/ ContentPresenter">
+            <Setter Property="Background" Value="{TemplateBinding Background}" />
         </Style>
 
-        <Style Selector="^:pressed">
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonPressedBackground}" />
+        <Style Selector="^:pressed /template/ ContentPresenter">
+            <Setter Property="Background" Value="{TemplateBinding BorderBrush}" />
         </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type CaptionButtons}" TargetType="CaptionButtons">
         <Setter Property="Foreground" Value="{DynamicResource CaptionButtonForeground}" />
+        <Setter Property="Margin" Value="0 0 4 0" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CaptionButtons">
-                <StackPanel Orientation="Horizontal">
+                <StackPanel
+                    VerticalAlignment="Stretch"
+                    Orientation="Horizontal"
+                    Spacing="2"
+                    TextElement.FontSize="10">
                     <Button Name="PART_FullScreenButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Name="PART_FullScreenButtonIcon"
-                            Theme="{StaticResource InnerPathIcon}"
-                            Data="{StaticResource WindowExpandGlyph}"
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Data="{DynamicResource WindowExpandGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
                     <Button Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
-                            Name="PART_MinimizeButtonIcon"
-                            Theme="{StaticResource InnerPathIcon}"
-                            Data="{StaticResource WindowMinimizeGlyph}"
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Data="{DynamicResource WindowMinimizeGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
                     <Button Name="PART_RestoreButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Name="PART_RestoreButtonIcon"
-                            Theme="{StaticResource InnerPathIcon}"
-                            Data="{StaticResource WindowMaximizeGlyph}"
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Data="{DynamicResource WindowMaximizeGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
-                    <Button Name="PART_CloseButton" Theme="{StaticResource CaptionButton}">
+                    <Button
+                        Name="PART_CloseButton"
+                        Background="{DynamicResource CaptionButtonClosePointeroverBackground}"
+                        BorderBrush="{DynamicResource CaptionButtonClosePressedBackground}"
+                        Theme="{StaticResource CaptionButton}">
+                        <Button.Styles>
+                            <Style Selector="Button:pointerover">
+                                <Setter Property="Foreground" Value="White" />
+                            </Style>
+                            <Style Selector="Button:pressed">
+                                <Setter Property="Foreground" Value="White" />
+                            </Style>
+                        </Button.Styles>
                         <PathIcon
-                            Name="PART_CloseButtonIcon"
-                            Theme="{StaticResource InnerPathIcon}"
-                            Data="{StaticResource WindowCloseIconGlyph}"
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Data="{DynamicResource WindowCloseIconGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
                 </StackPanel>
             </ControlTemplate>
         </Setter>
-
-        <Style Selector="^ /template/ Button#PART_CloseButton:pointerover">
-            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePointeroverBackground}" />
-        </Style>
-        <Style Selector="^ /template/ Button#PART_CloseButton:pressed">
-            <Setter Property="Foreground" Value="{DynamicResource CaptionButtonCloseForeground}" />
-            <Setter Property="Background" Value="{DynamicResource CaptionButtonClosePressedBackground}" />
-        </Style>
-
         <Style Selector="^:maximized /template/ PathIcon#PART_RestoreButtonIcon">
-            <Setter Property="Data" Value="{StaticResource WindowRestoreGlyph}" />
+            <Setter Property="Data" Value="{DynamicResource WindowRestoreGlyph}" />
         </Style>
         <Style Selector="^:fullscreen /template/ PathIcon#PART_FullScreenButtonIcon">
-            <Setter Property="Data" Value="{StaticResource WindowCollapseGlyph}" />
+            <Setter Property="Data" Value="{DynamicResource WindowCollapseGlyph}" />
         </Style>
         <Style Selector="^:fullscreen /template/ Button#PART_RestoreButton">
             <Setter Property="IsVisible" Value="False" />
@@ -98,4 +100,4 @@
             <Setter Property="IsVisible" Value="False" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Carousel.axaml

@@ -83,7 +83,7 @@
 
     <ControlTheme x:Key="CarouselIndicatorDotListBoxItem" TargetType="ListBoxItem">
         <Setter Property="Foreground" Value="{DynamicResource CarouselIndicatorForeground}" />
-        <Setter Property="Margin" Value="4 0" />
+        <Setter Property="Margin" Value="4 0"/>
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
@@ -108,7 +108,7 @@
     <ControlTheme x:Key="CarouselIndicatorLineListBoxItem"
                   BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
                   TargetType="ListBoxItem">
-        <Setter Property="Margin" Value="2 0" />
+        <Setter Property="Margin" Value="2 0"/>
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
                 <Rectangle
@@ -122,9 +122,9 @@
     <ControlTheme x:Key="CarouselIndicatorColumnarListBoxItem"
                   BasedOn="{StaticResource CarouselIndicatorDotListBoxItem}"
                   TargetType="ListBoxItem">
-        <Setter Property="Width" Value="{DynamicResource CarouselIndicatorColumnarWidth}" />
-        <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}" />
-        <Setter Property="Margin" Value="2 0" />
+        <Setter Property="Width" Value="{DynamicResource CarouselIndicatorColumnarWidth}"/>
+        <Setter Property="Height" Value="{DynamicResource CarouselIndicatorColumnarSelectedHeight}"/>
+        <Setter Property="Margin" Value="2 0"/>
         <Setter Property="Template">
             <ControlTemplate TargetType="ListBoxItem">
                 <Rectangle
@@ -250,4 +250,4 @@
             <Setter Property="HorizontalAlignment" Value="Right" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -12,7 +12,7 @@
                 <ComboBoxItem>BBB</ComboBoxItem>
                 <ComboBoxItem>CCC</ComboBoxItem>
             </ComboBox>
-            <ComboBox Width="100" PlaceholderText="Select" PlaceholderForeground="Red">
+            <ComboBox Width="100" PlaceholderText="Select">
                 <ComboBoxItem>AAA</ComboBoxItem>
                 <ComboBoxItem>BBB</ComboBoxItem>
                 <ComboBoxItem>CCC</ComboBoxItem>
@@ -44,7 +44,6 @@
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
         <Setter Property="MinHeight" Value="{DynamicResource ComboBoxDefaultHeight}" />
-        <Setter Property="PlaceholderForeground" Value="{DynamicResource ComboBoxSelectorPlaceHolderForeground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ComboBox">
                 <DataValidationErrors>
@@ -66,8 +65,9 @@
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             TextTrimming="CharacterEllipsis"
-                            Foreground="{TemplateBinding PlaceholderForeground}"
+                            Foreground="{TemplateBinding Foreground}"
                             IsVisible="{TemplateBinding SelectionBoxItem,Converter={x:Static ObjectConverters.IsNull}}"
+                            Opacity="0.3"
                             Text="{TemplateBinding PlaceholderText}" />
                         <ContentPresenter
                             Name="ContentPresenter"
@@ -137,7 +137,7 @@
                 <Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNotNull}}" />
             </Style>
             <Style Selector="^:pointerover /template/ PathIcon#DropDownGlyph">
-                <Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNull}}" />
+                <Setter Property="IsVisible" Value="{Binding $parent[ComboBox].SelectionBoxItem, Converter={x:Static ObjectConverters.IsNull}}"/>
             </Style>
         </Style>
 
@@ -320,4 +320,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ContextMenu.axaml

@@ -10,10 +10,9 @@
         <Setter Property="MaxWidth" Value="{DynamicResource MenuFlyoutMaxWidth}" />
         <Setter Property="MinHeight" Value="{DynamicResource MenuFlyoutMinHeight}" />
         <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPadding}" />
-        <Setter Property="Focusable" Value="True" />
+        <Setter Property="Focusable" Value="True"></Setter>
         <Setter Property="HorizontalAlignment" Value="Stretch" />
-        <Setter Property="FontSize" Value="{DynamicResource MenuFlyoutFontSize}" />
-        <Setter Property="FontWeight" Value="{DynamicResource MenuFlyoutFontWeight}" />
+        <Setter Property="FontWeight" Value="Normal" />
         <Setter Property="WindowManagerAddShadowHint" Value="False" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ContextMenu">
@@ -39,4 +38,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/DataValidationErrors.axaml

@@ -104,4 +104,4 @@
             </DataTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/DatePicker.axaml

@@ -2,19 +2,15 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <Design.PreviewWith>
-        <Border Padding="20">
-            <DatePickerPresenter />
-        </Border>
-    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type DatePickerPresenter}" TargetType="DatePickerPresenter">
         <Setter Property="Width" Value="296" />
         <Setter Property="MinWidth" Value="296" />
         <Setter Property="MaxHeight" Value="300" />
+        <Setter Property="FontWeight" Value="Normal" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerPopupBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerPopupBorderBrush}" />
         <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="CornerRadius" Value="{DynamicResource DateTimePickerPopupCornerRadius}" />
+        <Setter Property="CornerRadius" Value="6" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DatePickerPresenter">
                 <Border
@@ -96,7 +92,8 @@
                                     VerticalAlignment="Stretch"
                                     Theme="{StaticResource DateTimePickerButton}">
                                     <PathIcon
-                                        Theme="{StaticResource InnerPathIcon}"
+                                        Width="12"
+                                        Height="12"
                                         Data="{DynamicResource DateTimePickerAcceptGlyph}" />
                                 </Button>
                                 <Rectangle
@@ -110,7 +107,8 @@
                                     VerticalAlignment="Stretch"
                                     Theme="{StaticResource DateTimePickerButton}">
                                     <PathIcon
-                                        Theme="{StaticResource InnerPathIcon}"
+                                        Width="12"
+                                        Height="12"
                                         Data="{DynamicResource DateTimePickerDismissGlyph}" />
                                 </Button>
                                 <Rectangle
@@ -171,6 +169,7 @@
                                 <Grid
                                     Name="PART_ButtonContentGrid"
                                     Grid.Column="0"
+                                    VerticalAlignment="Center"
                                     ColumnDefinitions="78*,Auto,132*,Auto,78*">
                                     <TextBlock
                                         Name="PART_DayTextBlock"
@@ -204,12 +203,16 @@
                                         Name="PART_FirstSpacer"
                                         Grid.Column="1"
                                         Width="1"
+                                        Height="{TemplateBinding Height}"
+                                        MinHeight="{TemplateBinding MinHeight}"
                                         HorizontalAlignment="Center"
                                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                                     <Rectangle
                                         Name="PART_SecondSpacer"
                                         Grid.Column="3"
                                         Width="1"
+                                        Height="{TemplateBinding Height}"
+                                        MinHeight="{TemplateBinding MinHeight}"
                                         HorizontalAlignment="Center"
                                         Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                                 </Grid>
@@ -270,4 +273,4 @@
         </Style>
     </ControlTheme>
 
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/DateTimePickerShared.axaml

@@ -115,8 +115,8 @@
         <Setter Property="Content">
             <Template>
                 <PathIcon
-                    Theme="{StaticResource InnerPathIcon}"
-                    Classes="ExtraSmall"
+                    Width="8"
+                    Height="8"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     Data="{DynamicResource DateTimePickerButtonUpGlyph}" />
@@ -136,12 +136,12 @@
         <Setter Property="Content">
             <Template>
                 <PathIcon
-                    Theme="{StaticResource InnerPathIcon}"
-                    Classes="ExtraSmall"
+                    Width="8"
+                    Height="8"
                     HorizontalAlignment="Center"
                     VerticalAlignment="Center"
                     Data="{DynamicResource DateTimePickerButtonDownGlyph}" />
             </Template>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/EmbeddableControlRoot.axaml

@@ -3,7 +3,6 @@
         <Setter Property="Background" Value="{DynamicResource WindowDefaultBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource WindowDefaultForeground}" />
         <Setter Property="FontSize" Value="{DynamicResource DefaultFontSize}" />
-        <Setter Property="FontWeight" Value="{DynamicResource DefaultFontWeight}" />
         <Setter Property="FontFamily" Value="{DynamicResource DefaultFontFamily}" />
         <Setter Property="Template">
             <ControlTemplate>
@@ -22,4 +21,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Expander.axaml

@@ -149,4 +149,4 @@
             <Setter Property="Foreground" Value="{DynamicResource ExpanderHeaderDisabledForeground}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/FlyoutPresenter.axaml

@@ -90,4 +90,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/GridSplitter.axaml

@@ -26,4 +26,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ItemsControl.axaml

@@ -16,4 +16,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Label.axaml

@@ -170,13 +170,14 @@
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="UseLayoutRounding" Value="False" />
         <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Padding" Value="{DynamicResource LabelTagSmallPadding}" />
         <Setter Property="FontSize" Value="{DynamicResource LabelTagFontSize}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Label">
                 <ContentPresenter
                     Name="PART_ContentPresenter"
+                    MinWidth="{TemplateBinding MinWidth}"
+                    MinHeight="{TemplateBinding MinHeight}"
                     Padding="{TemplateBinding Padding}"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
@@ -405,4 +406,4 @@
             </Style>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ListBox.axaml

@@ -59,6 +59,7 @@
                     Content="{TemplateBinding Content}"
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
+                    FontWeight="Normal"
                     Foreground="{TemplateBinding Foreground}" />
             </ControlTemplate>
         </Setter>

src/Semi.Avalonia/Controls/ManagedFileChooser.axaml

@@ -195,7 +195,7 @@
     <ControlTheme x:Key="{x:Type dialogs:ManagedFileChooserOverwritePrompt}"
                   TargetType="dialogs:ManagedFileChooserOverwritePrompt">
         <Setter Property="MaxWidth" Value="400" />
-        <Setter Property="Padding" Value="10" />
+        <Setter Property="Padding" Value="10"/>
         <Setter Property="Template">
             <ControlTemplate>
                 <Border Background="{TemplateBinding Background}"
@@ -233,4 +233,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Menu.axaml

@@ -3,6 +3,28 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="using:Avalonia.Controls.Converters"
     x:CompileBindings="True">
+    <Design.PreviewWith>
+        <StackPanel Width="300" Height="300" Margin="10">
+            <Menu>
+                <MenuItem Header="_Icon">
+                    <MenuItem Header="Nothing" Icon="🐼" />
+                    <MenuItem Header="TextBlock">
+                        <MenuItem.Icon>
+                            <TextBlock Text="🐼" />
+                        </MenuItem.Icon>
+                    </MenuItem>
+                    <MenuItem Header="Geometry" Icon="{StaticResource SemiIconSemiLogo}" />
+                    <MenuItem Header="PathIcon">
+                        <MenuItem.Icon>
+                            <PathIcon
+                                Theme="{StaticResource InnerPathIcon}"
+                                Data="{DynamicResource SemiIconSemiLogo}" />
+                        </MenuItem.Icon>
+                    </MenuItem>
+                </MenuItem>
+            </Menu>
+        </StackPanel>
+    </Design.PreviewWith>
 
     <converters:PlatformKeyGestureConverter x:Key="KeyGestureConverter" />
 
@@ -24,7 +46,6 @@
                         Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
                         CornerRadius="0"
                         MinHeight="0"
-                        Padding="0 4"
                         DockPanel.Dock="Top"
                         RenderTransform="{x:Null}">
                         <RepeatButton.IsVisible>
@@ -38,8 +59,8 @@
                             </MultiBinding>
                         </RepeatButton.IsVisible>
                         <PathIcon
-                            Theme="{StaticResource InnerPathIcon}"
-                            Classes="ExtraSmall"
+                            Width="8"
+                            Height="8"
                             Data="{DynamicResource MenuScrollViewerUpButtonGlyph}"
                             Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
                     </RepeatButton>
@@ -50,9 +71,8 @@
                         BorderThickness="0"
                         Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
                         CornerRadius="0"
-                        MinHeight="0"
-                        Padding="0 4"
                         DockPanel.Dock="Bottom"
+                        MinHeight="0"
                         RenderTransform="{x:Null}">
                         <RepeatButton.IsVisible>
                             <MultiBinding
@@ -65,8 +85,8 @@
                             </MultiBinding>
                         </RepeatButton.IsVisible>
                         <PathIcon
-                            Theme="{StaticResource InnerPathIcon}"
-                            Classes="ExtraSmall"
+                            Width="8"
+                            Height="8"
                             Data="{DynamicResource MenuScrollViewerDownButtonGlyph}"
                             Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
                     </RepeatButton>
@@ -138,28 +158,23 @@
                             <ContentControl
                                 Name="PART_ToggleIconPresenter"
                                 Grid.Column="0"
-                                Width="16"
-                                Height="16"
                                 Margin="{DynamicResource MenuItemIconMargin}"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
                                 IsVisible="False" />
 
-                            <Viewbox
+                            <ContentControl
                                 Name="PART_IconPresenter"
                                 Grid.Column="1"
-                                Width="16"
-                                Height="16"
                                 Margin="{DynamicResource MenuItemIconMargin}"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                IsVisible="False"
-                                Stretch="Uniform">
-                                <ContentPresenter
-                                    HorizontalAlignment="Center"
-                                    VerticalAlignment="Center"
-                                    Content="{TemplateBinding Icon}" />
-                            </Viewbox>
+                                Content="{TemplateBinding Icon}"
+                                IsVisible="{TemplateBinding Icon, Converter={x:Static ObjectConverters.IsNotNull}}">
+                                <ContentControl.DataTemplates>
+                                    <DataTemplate DataType="Geometry">
+                                        <PathIcon
+                                            Theme="{StaticResource InnerPathIcon}"
+                                            Data="{Binding}" />
+                                    </DataTemplate>
+                                </ContentControl.DataTemplates>
+                            </ContentControl>
 
                             <ContentPresenter
                                 Name="PART_HeaderPresenter"
@@ -222,9 +237,6 @@
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^:icon /template/ Viewbox#PART_IconPresenter">
-            <Setter Property="IsVisible" Value="True" />
-        </Style>
 
         <Style Selector="^:selected">
             <Style Selector="^ /template/ Border#PART_LayoutRoot">
@@ -303,8 +315,7 @@
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="CornerRadius" Value="{DynamicResource MenuItemCornerRadius}" />
         <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
-        <Setter Property="Padding" Value="{DynamicResource TopLevelMenuItemPadding}" />
-        <Setter Property="MinHeight" Value="{DynamicResource TopLevelMenuItemMinHeight}" />
+        <Setter Property="Padding" Value="{DynamicResource MenuItemPadding}" />
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
@@ -327,7 +338,8 @@
                             MinWidth="{Binding $parent[MenuItem].Bounds.Width}"
                             HorizontalOffset="-8"
                             IsLightDismissEnabled="True"
-                            IsOpen="{TemplateBinding IsSubMenuOpen,Mode=TwoWay}"
+                            IsOpen="{TemplateBinding IsSubMenuOpen,
+                                                     Mode=TwoWay}"
                             OverlayInputPassThroughElement="{Binding $parent[Menu]}"
                             Placement="BottomEdgeAlignedLeft"
                             VerticalOffset="-4"

src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml

@@ -55,4 +55,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/NotificationCard.axaml

@@ -172,7 +172,7 @@
             <Setter Property="Background" Value="{DynamicResource NotificationCardLightBackground}" />
             <Style Selector="^:information /template/ Border#PART_RootBorder">
                 <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightInformationBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource NotificationCardLightInformationBackground}" />
+                <Setter Property="Background" Value="{DynamicResource NotificationCardLightInformationBackground}"/>
             </Style>
             <Style Selector="^:success /template/ Border#PART_RootBorder">
                 <Setter Property="BorderBrush" Value="{DynamicResource NotificationCardLightSuccessBorderBrush}" />

src/Semi.Avalonia/Controls/PathIcon.axaml

@@ -25,8 +25,8 @@
     </ControlTheme>
 
     <ControlTheme x:Key="InnerPathIcon" TargetType="PathIcon">
-        <Setter Property="Width" Value="{StaticResource SemiWidthIconMedium}" />
-        <Setter Property="Height" Value="{StaticResource SemiWidthIconMedium}" />
+        <Setter Property="Height" Value="16" />
+        <Setter Property="Width" Value="16" />
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
             <ControlTemplate TargetType="PathIcon">
@@ -48,20 +48,20 @@
             <Setter Property="Fill" Value="{TemplateBinding BorderBrush}" />
         </Style>
         <Style Selector="^.ExtraSmall">
-            <Setter Property="Width" Value="{StaticResource SemiWidthIconExtraSmall}" />
-            <Setter Property="Height" Value="{StaticResource SemiWidthIconExtraSmall}" />
+            <Setter Property="Height" Value="8" />
+            <Setter Property="Width" Value="8" />
         </Style>
         <Style Selector="^.Small">
-            <Setter Property="Width" Value="{StaticResource SemiWidthIconSmall}" />
-            <Setter Property="Height" Value="{StaticResource SemiWidthIconSmall}" />
+            <Setter Property="Height" Value="12" />
+            <Setter Property="Width" Value="12" />
         </Style>
         <Style Selector="^.Large">
-            <Setter Property="Width" Value="{StaticResource SemiWidthIconLarge}" />
-            <Setter Property="Height" Value="{StaticResource SemiWidthIconLarge}" />
+            <Setter Property="Height" Value="20" />
+            <Setter Property="Width" Value="20" />
         </Style>
         <Style Selector="^.ExtraLarge">
-            <Setter Property="Width" Value="{StaticResource SemiWidthIconExtraLarge}" />
-            <Setter Property="Height" Value="{StaticResource SemiWidthIconExtraLarge}" />
+            <Setter Property="Height" Value="24" />
+            <Setter Property="Width" Value="24" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Popup.axaml

@@ -5,9 +5,6 @@
     <ControlTheme x:Key="{x:Type PopupRoot}" TargetType="PopupRoot">
         <Setter Property="Background" Value="{x:Null}" />
         <Setter Property="TransparencyLevelHint" Value="Transparent" />
-        <Setter Property="FontSize" Value="{DynamicResource DefaultFontSize}" />
-        <Setter Property="FontWeight" Value="{DynamicResource DefaultFontWeight}" />
-        <Setter Property="FontFamily" Value="{DynamicResource DefaultFontFamily}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="PopupRoot">
                 <LayoutTransformControl LayoutTransform="{TemplateBinding Transform}">
@@ -47,4 +44,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ProgressBar.axaml

@@ -210,7 +210,9 @@
         </Style>
         <Style Selector="^:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
             <Setter Property="LayoutTransform">
-                <RotateTransform Angle="90" />
+                <Setter.Value>
+                    <RotateTransform Angle="90" />
+                </Setter.Value>
             </Setter>
         </Style>
         <Style Selector="^:indeterminate /template/ Panel#DeterminateRoot">
@@ -443,4 +445,4 @@
             </Style.Animations>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/RadioButton.axaml

@@ -384,7 +384,7 @@
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     RecognizesAccessKey="True"
-                    UseLayoutRounding="False"
+                    UseLayoutRounding="False" 
                     TextWrapping="Wrap" />
             </ControlTemplate>
         </Setter>
@@ -421,4 +421,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/RepeatButton.axaml

@@ -265,4 +265,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ScrollViewer.axaml

@@ -2,6 +2,7 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:converters="using:Avalonia.Controls.Converters"
+    xmlns:dialog="using:Avalonia.Dialogs"
     x:CompileBindings="True">
     <Design.PreviewWith>
         <StackPanel>
@@ -17,16 +18,15 @@
                     Height="400"
                     Background="aqua" />
             </ScrollViewer>
+            <dialog:ManagedFileChooser />
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="ScrollBarRepeatButton" TargetType="{x:Type RepeatButton}">
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
+        <Setter Property="Foreground" Value="Gray" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Border
-                    Padding="{TemplateBinding Padding}"
-                    Background="{TemplateBinding Background}">
+                <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
                     <ContentPresenter
                         HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
@@ -39,42 +39,35 @@
 
     <ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar">
         <Setter Property="Cursor" Value="Arrow" />
-        <Setter Property="Transitions">
-            <Transitions>
-                <DoubleTransition Property="Width" Duration="0:0:0.1" />
-                <DoubleTransition Property="Height" Duration="0:0:0.1" />
-                <!--<TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.1" />-->
-            </Transitions>
-        </Setter>
         <Style Selector="^:horizontal">
-            <Setter Property="Height" Value="{StaticResource ScrollBarThickness}" />
+            <Setter Property="Height" Value="{DynamicResource ScrollBarThickness}" />
             <Setter Property="Template">
                 <ControlTemplate TargetType="ScrollBar">
-                    <Border
-                        Background="{DynamicResource ScrollBarBackground}"
-                        UseLayoutRounding="False">
+                    <Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False">
                         <Grid Name="PART_RootGrid" ColumnDefinitions="Auto,*,Auto">
                             <RepeatButton
                                 Name="PART_LineUpButton"
                                 Grid.Row="0"
                                 Grid.Column="0"
-                                MinWidth="{StaticResource ScrollBarThickness}"
+                                MinWidth="{DynamicResource ScrollBarThickness}"
+                                Padding="4,0"
                                 VerticalAlignment="Center"
                                 Focusable="False"
-                                Theme="{StaticResource ScrollBarRepeatButton}">
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
                                 <PathIcon
-                                    Theme="{StaticResource InnerPathIcon}"
-                                    Classes="Large"
-                                    Data="{StaticResource ScrollBarLeftGlyph}" />
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarLeftGlyph}" />
                             </RepeatButton>
                             <Track
                                 Grid.Column="1"
-                                DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="{TemplateBinding Orientation}"
                                 ViewportSize="{TemplateBinding ViewportSize}"
-                                Value="{TemplateBinding Value, Mode=TwoWay}">
+                                DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_PageUpButton"
@@ -83,7 +76,7 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
-                                        Theme="{StaticResource ScrollBarRepeatButton}" />
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
@@ -93,7 +86,7 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
-                                        Theme="{StaticResource ScrollBarRepeatButton}" />
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
@@ -101,13 +94,14 @@
                                 Name="PART_LineDownButton"
                                 Grid.Column="2"
                                 MinWidth="{DynamicResource ScrollBarThickness}"
+                                Padding="4,0"
                                 VerticalAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 Focusable="False"
                                 Theme="{DynamicResource ScrollBarRepeatButton}">
                                 <PathIcon
-                                    Theme="{DynamicResource InnerPathIcon}"
-                                    Classes="Large"
+                                    Width="10"
+                                    Height="10"
                                     Data="{DynamicResource ScrollBarRightGlyph}" />
                             </RepeatButton>
                         </Grid>
@@ -116,36 +110,36 @@
             </Setter>
         </Style>
         <Style Selector="^:vertical">
-            <Setter Property="Width" Value="{StaticResource ScrollBarThickness}" />
+            <Setter Property="Width" Value="{DynamicResource ScrollBarThickness}" />
             <Setter Property="Template">
                 <ControlTemplate TargetType="ScrollBar">
-                    <Border
-                        Background="{DynamicResource ScrollBarBackground}"
-                        UseLayoutRounding="False">
+                    <Border Background="{DynamicResource ScrollBarBackground}" UseLayoutRounding="False">
                         <Grid RowDefinitions="Auto,*,Auto">
                             <RepeatButton
                                 Name="PART_LineUpButton"
                                 Grid.Row="0"
-                                MinHeight="{StaticResource ScrollBarThickness}"
+                                MinHeight="{DynamicResource ScrollBarThickness}"
+                                Padding="0,4"
                                 VerticalAlignment="Center"
                                 HorizontalContentAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 Focusable="False"
-                                Theme="{StaticResource ScrollBarRepeatButton}">
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
                                 <PathIcon
-                                    Theme="{StaticResource InnerPathIcon}"
-                                    Classes="Large"
-                                    Data="{StaticResource ScrollBarUpGlyph}" />
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarUpGlyph}" />
                             </RepeatButton>
                             <Track
                                 Grid.Row="1"
-                                DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                 IsDirectionReversed="True"
                                 Maximum="{TemplateBinding Maximum}"
                                 Minimum="{TemplateBinding Minimum}"
                                 Orientation="{TemplateBinding Orientation}"
                                 ViewportSize="{TemplateBinding ViewportSize}"
-                                Value="{TemplateBinding Value, Mode=TwoWay}">
+                                DeferThumbDrag="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
                                 <Track.DecreaseButton>
                                     <RepeatButton
                                         Name="PART_PageUpButton"
@@ -154,7 +148,7 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
-                                        Theme="{StaticResource ScrollBarRepeatButton}" />
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
@@ -164,22 +158,23 @@
                                         VerticalAlignment="Stretch"
                                         CornerRadius="0"
                                         Focusable="False"
-                                        Theme="{StaticResource ScrollBarRepeatButton}" />
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
                             <RepeatButton
                                 Name="PART_LineDownButton"
                                 Grid.Row="2"
-                                MinHeight="{StaticResource ScrollBarThickness}"
+                                MinHeight="{DynamicResource ScrollBarThickness}"
+                                Padding="0,4"
                                 HorizontalContentAlignment="Center"
                                 VerticalContentAlignment="Center"
                                 Focusable="False"
-                                Theme="{StaticResource ScrollBarRepeatButton}">
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
                                 <PathIcon
-                                    Theme="{StaticResource InnerPathIcon}"
-                                    Classes="Large"
-                                    Data="{StaticResource ScrollBarDownGlyph}" />
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarDownGlyph}" />
                             </RepeatButton>
                         </Grid>
                     </Border>
@@ -189,12 +184,14 @@
         <Style Selector="^ /template/ Thumb#thumb">
             <Setter Property="Foreground" Value="{DynamicResource ScrollBarThumbForeground}" />
             <Setter Property="Template">
-                <ControlTemplate TargetType="Thumb">
-                    <Border
-                        Background="{TemplateBinding Foreground}"
-                        CornerRadius="{DynamicResource ScrollBarThumbCornerRadius}"
-                        UseLayoutRounding="False" />
-                </ControlTemplate>
+                <Setter.Value>
+                    <ControlTemplate TargetType="Thumb">
+                        <Border
+                            Background="{TemplateBinding Foreground}"
+                            CornerRadius="24"
+                            UseLayoutRounding="False" />
+                    </ControlTemplate>
+                </Setter.Value>
             </Setter>
         </Style>
         <Style Selector="^ /template/ Thumb#thumb:pointerover">
@@ -218,17 +215,6 @@
             <Setter Property="RenderTransform" Value="scale(0.92)" />
         </Style>
 
-        <Style Selector="^[IsExpanded=False]">
-            <Style Selector="^ /template/ RepeatButton">
-                <Setter Property="IsVisible" Value="False" />
-            </Style>
-            <Style Selector="^:vertical">
-                <Setter Property="Width" Value="2" />
-            </Style>
-            <Style Selector="^:horizontal">
-                <Setter Property="Height" Value="2" />
-            </Style>
-        </Style>
     </ControlTheme>
     <ControlTheme x:Key="{x:Type ScrollViewer}" TargetType="ScrollViewer">
         <Setter Property="Background" Value="Transparent" />
@@ -263,11 +249,14 @@
                         Grid.Row="0"
                         Grid.Column="1"
                         Orientation="Vertical" />
+                    <Panel
+                        Grid.Row="1"
+                        Grid.Column="1" />
                 </Grid>
             </ControlTemplate>
         </Setter>
         <Style Selector="^ /template/ ScrollBar">
-            <Setter Property="Opacity" Value="0" />
+            <Setter Property="Opacity" Value="0"></Setter>
         </Style>
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar">
@@ -277,14 +266,9 @@
                 <Setter Property="Opacity" Value="1" />
             </Style>
         </Style>
-        <Style Selector="^.InsetContent /template/ ScrollContentPresenter#PART_ContentPresenter">
-            <Setter Property="Grid.RowSpan" Value="1"/>
-            <Setter Property="Grid.ColumnSpan" Value="1"/>
-        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="StaticScrollViewer" TargetType="ScrollViewer">
-        <!-- This ControlTheme equivalent to default ScrollViewer with InsetContent style class. It exists for easier setting via style.  -->
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ScrollViewer">
@@ -315,6 +299,9 @@
                         Grid.Row="0"
                         Grid.Column="1"
                         Orientation="Vertical" />
+                    <Panel
+                        Grid.Row="1"
+                        Grid.Column="1" />
                 </Grid>
             </ControlTemplate>
         </Setter>
@@ -367,4 +354,4 @@
             <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/SelectableTextBlock.axaml

@@ -86,4 +86,4 @@
             <Setter Property="Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Slider.axaml

@@ -272,4 +272,4 @@
         </Style>
 
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/SplitButton.axaml

@@ -3,19 +3,8 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
     <Design.PreviewWith>
-        <StackPanel Width="500" Height="500" Margin="20" Spacing="8">
-            <SplitButton
-                Theme="{DynamicResource SolidSplitButton}"
-                Content="Hello" />
-            <ToggleSplitButton
-                IsChecked="True"
-                HorizontalAlignment="Stretch"
-                Content="Hello" />
-            <SplitButton
-                Theme="{DynamicResource SolidSplitButton}" />
-            <ToggleSplitButton
-                IsChecked="True"
-                HorizontalAlignment="Stretch" />
+        <StackPanel Margin="20">
+            <SplitButton>Hello</SplitButton>
         </StackPanel>
     </Design.PreviewWith>
 
@@ -24,18 +13,22 @@
         <Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
         <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
         <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="RenderTransform" Value="none" />
         <Setter Property="FontSize" Value="{DynamicResource ButtonDefaultFontSize}" />
         <Setter Property="FontWeight" Value="{DynamicResource ButtonDefaultFontWeight}" />
         <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Button">
                 <ContentPresenter
                     Name="PART_ContentPresenter"
                     Padding="{TemplateBinding Padding}"
-                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
-                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch"
                     HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                     VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Background="{TemplateBinding Background}"
@@ -62,7 +55,7 @@
         <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
         <Setter Property="RenderTransform" Value="none" />
         <Setter Property="HorizontalAlignment" Value="Center" />
-        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="FontSize" Value="{DynamicResource ButtonDefaultFontSize}" />
         <Setter Property="FontWeight" Value="{DynamicResource ButtonDefaultFontWeight}" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
@@ -75,28 +68,11 @@
                     ClipToBounds="True"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <DockPanel>
-                        <Button
-                            Name="PART_SecondaryButton"
-                            Padding="4,0"
-                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="0"
-                            DockPanel.Dock="Right"
-                            Theme="{DynamicResource SemiSplitButtonElement}">
-                            <PathIcon
-                                Theme="{DynamicResource InnerPathIcon}"
-                                Data="{DynamicResource SplitButtonIconGlyph}"
-                                Foreground="{Binding $parent[Button].Foreground}" />
-                        </Button>
-                        <Rectangle
-                            Name="SeparatorBorder"
-                            Width="{DynamicResource SplitButtonSeparatorWidth}"
-                            VerticalAlignment="Stretch"
-                            DockPanel.Dock="Right"
-                            Fill="Transparent"
-                            StrokeThickness="0" />
                         <Button
                             Name="PART_PrimaryButton"
                             Padding="{TemplateBinding Padding}"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
                             HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                             BorderThickness="{TemplateBinding BorderThickness}"
@@ -108,7 +84,29 @@
                             FontFamily="{TemplateBinding FontFamily}"
                             FontSize="{TemplateBinding FontSize}"
                             FontWeight="{TemplateBinding FontWeight}"
+                            DockPanel.Dock="Left"
                             Theme="{DynamicResource SemiSplitButtonElement}" />
+                        <Rectangle
+                            Name="SeparatorBorder"
+                            Width="{DynamicResource SplitButtonSeparatorWidth}"
+                            VerticalAlignment="Stretch"
+                            DockPanel.Dock="Left"
+                            Fill="Transparent"
+                            StrokeThickness="0" />
+                        <Button
+                            Name="PART_SecondaryButton"
+                            Padding="4,0"
+                            VerticalAlignment="Stretch"
+                            HorizontalContentAlignment="Center"
+                            VerticalContentAlignment="Center"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="0"
+                            Theme="{DynamicResource SemiSplitButtonElement}">
+                            <PathIcon
+                                Theme="{DynamicResource InnerPathIcon}"
+                                Data="{DynamicResource SplitButtonIconGlyph}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
                     </DockPanel>
                 </Border>
             </ControlTemplate>

src/Semi.Avalonia/Controls/SplitView.axaml

@@ -243,4 +243,4 @@
             <Setter Property="IsVisible" Value="True" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/TabControl.axaml

@@ -64,7 +64,7 @@
         </Style>
         -->
     </ControlTheme>
-
+    
     <ControlTheme x:Key="ScrollTabControl" TargetType="TabControl">
         <Setter Property="Margin" Value="0" />
         <Setter Property="Padding" Value="0" />
@@ -86,7 +86,7 @@
                     <DockPanel>
                         <Panel DockPanel.Dock="{TemplateBinding TabStripPlacement}">
                             <ScrollViewer Name="PART_ScrollViewer">
-                                <ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" Margin="0 0 12 12" />
+                                <ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" Margin="0 0 12 12"/>
                             </ScrollViewer>
                             <Border Name="PART_BorderSeparator" Background="{DynamicResource TabItemLinePipePressedBorderBrush}" />
                         </Panel>
@@ -101,12 +101,12 @@
                 </Border>
             </ControlTemplate>
         </Setter>
-
+        
         <Style Selector="^[TabStripPlacement=Left], ^[TabStripPlacement=Right]">
             <Style Selector="^ /template/ ItemsPresenter">
                 <Setter Property="ItemsPanel">
                     <ItemsPanelTemplate>
-                        <VirtualizingStackPanel Orientation="Vertical" />
+                        <VirtualizingStackPanel Orientation="Vertical"></VirtualizingStackPanel>
                     </ItemsPanelTemplate>
                 </Setter>
             </Style>
@@ -124,7 +124,7 @@
             <Setter Property="Width" Value="1" />
             <Setter Property="VerticalAlignment" Value="Stretch" />
             <Setter Property="HorizontalAlignment" Value="Right" />
-            <Setter Property="Margin" Value="0 0 12 0" />
+            <Setter Property="Margin" Value="0 0 12 0"></Setter>
         </Style>
         <Style Selector="^[TabStripPlacement=Right] /template/ ScrollViewer#PART_ScrollViewer">
             <Setter Property="HorizontalScrollBarVisibility" Value="Disabled" />
@@ -134,7 +134,7 @@
             <Setter Property="Height" Value="1" />
             <Setter Property="HorizontalAlignment" Value="Stretch" />
             <Setter Property="VerticalAlignment" Value="Bottom" />
-            <Setter Property="Margin" Value="0 0 0 12" />
+            <Setter Property="Margin" Value="0 0 0 12"></Setter>
         </Style>
         <Style Selector="^[TabStripPlacement=Top] /template/ ScrollViewer#PART_ScrollViewer">
             <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
@@ -150,4 +150,4 @@
             <Setter Property="VerticalScrollBarVisibility" Value="Disabled" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/TabItem.axaml

@@ -130,4 +130,4 @@
         </Style>
     </ControlTheme>
 
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/TabStrip.axaml

@@ -106,4 +106,4 @@
             <Setter Property="TextElement.Foreground" Value="{DynamicResource TabItemHeaderForegroundDisabled}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/TextBlock.axaml

@@ -75,4 +75,4 @@
             <Setter Property="Foreground" Value="{DynamicResource TextBlockDisabledForeground}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/TextBox.axaml

@@ -29,6 +29,7 @@
         <Setter Property="BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
         <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
         <Setter Property="CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
+        <Setter Property="FontSize" Value="14" />
         <Setter Property="Cursor" Value="Ibeam" />
         <Setter Property="CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
         <Setter Property="Padding" Value="{DynamicResource TextBoxContentPadding}" />
@@ -74,8 +75,8 @@
                                         TextWrapping="{TemplateBinding TextWrapping}">
                                         <TextBlock.IsVisible>
                                             <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                <Binding ElementName="PART_TextPresenter" Path="PreeditText" Converter="{x:Static StringConverters.IsNullOrEmpty}" />
-                                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Text" Converter="{x:Static StringConverters.IsNullOrEmpty}" />
+                                                <Binding ElementName="PART_TextPresenter" Path="PreeditText" Converter="{x:Static StringConverters.IsNullOrEmpty}"/>
+                                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Text" Converter="{x:Static StringConverters.IsNullOrEmpty}"/>
                                             </MultiBinding>
                                         </TextBlock.IsVisible>
                                     </TextBlock>
@@ -171,7 +172,7 @@
             </Style>
         </Style>
         <Style Selector="^.revealPasswordButton, ^.RevealPasswordButton">
-            <Setter Property="PasswordChar" Value="•" />
+            <Setter Property="PasswordChar" Value="•"/>
             <Style Selector="^ /template/ ToggleButton#PART_RevealButton">
                 <Setter Property="IsVisible" Value="True" />
             </Style>
@@ -218,10 +219,10 @@
                 </Style>
             </Style>
         </Style>
-
+        
         <Style Selector="^.TextArea">
-            <Setter Property="AcceptsReturn" Value="True" />
-            <Setter Property="VerticalContentAlignment" Value="Top" />
+            <Setter Property="AcceptsReturn" Value="True"/>
+            <Setter Property="VerticalContentAlignment" Value="Top"/>
             <Setter Property="Padding" Value="{DynamicResource TextBoxTextAreaContentPadding}" />
             <Setter Property="MinHeight" Value="{DynamicResource TextBoxTextAreaHeight}" />
         </Style>
@@ -236,6 +237,7 @@
         <Setter Property="BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
         <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
         <Setter Property="CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
+        <Setter Property="FontSize" Value="14" />
         <Setter Property="Cursor" Value="Ibeam" />
         <Setter Property="CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
         <Setter Property="Padding" Value="{DynamicResource TextBoxContentPadding}" />
@@ -281,8 +283,8 @@
                                         TextWrapping="{TemplateBinding TextWrapping}">
                                         <TextBlock.IsVisible>
                                             <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                <Binding ElementName="PART_TextPresenter" Path="PreeditText" Converter="{x:Static StringConverters.IsNullOrEmpty}" />
-                                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Text" Converter="{x:Static StringConverters.IsNullOrEmpty}" />
+                                                <Binding ElementName="PART_TextPresenter" Path="PreeditText" Converter="{x:Static StringConverters.IsNullOrEmpty}"/>
+                                                <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Text" Converter="{x:Static StringConverters.IsNullOrEmpty}"/>
                                             </MultiBinding>
                                         </TextBlock.IsVisible>
                                     </TextBlock>
@@ -378,7 +380,7 @@
             </Style>
         </Style>
         <Style Selector="^.revealPasswordButton, ^.RevealPasswordButton">
-            <Setter Property="PasswordChar" Value="•" />
+            <Setter Property="PasswordChar" Value="•"/>
             <Style Selector="^ /template/ ToggleButton#PART_RevealButton">
                 <Setter Property="IsVisible" Value="True" />
             </Style>
@@ -427,8 +429,8 @@
         </Style>
 
         <Style Selector="^.TextArea">
-            <Setter Property="AcceptsReturn" Value="True" />
-            <Setter Property="VerticalContentAlignment" Value="Top" />
+            <Setter Property="AcceptsReturn" Value="True"/>
+            <Setter Property="VerticalContentAlignment" Value="Top"/>
             <Setter Property="Padding" Value="{DynamicResource TextBoxTextAreaContentPadding}" />
             <Setter Property="MinHeight" Value="{DynamicResource TextBoxTextAreaHeight}" />
         </Style>
@@ -438,6 +440,7 @@
         <Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
         <Setter Property="SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
         <Setter Property="SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
+        <Setter Property="FontSize" Value="14" />
         <Setter Property="Cursor" Value="Ibeam" />
         <Setter Property="CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
         <Setter Property="Padding" Value="{DynamicResource TextBoxContentPadding}" />
@@ -509,8 +512,8 @@
     </ControlTheme>
 
     <ControlTheme x:Key="InputToggleButton" TargetType="ToggleButton">
-        <Setter Property="Width" Value="16" />
-        <Setter Property="Height" Value="16" />
+        <Setter Property="Width" Value="16"/>
+        <Setter Property="Height" Value="16"/>
         <Setter Property="Foreground" Value="{DynamicResource ButtonInputInnerForeground}" />
         <!--  Background must be transparent or hit test will fail  -->
         <Setter Property="Background" Value="Transparent" />
@@ -540,4 +543,4 @@
         </Style>
     </ControlTheme>
 
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ThemeVariantScope.axaml

@@ -5,7 +5,6 @@
     <ControlTheme x:Key="{x:Type ThemeVariantScope}" TargetType="ThemeVariantScope">
         <Setter Property="TextElement.Foreground" Value="{DynamicResource DefaultForeground}" />
         <Setter Property="TextElement.FontSize" Value="{DynamicResource DefaultFontSize}" />
-        <Setter Property="TextElement.FontWeight" Value="{DynamicResource DefaultFontWeight}" />
         <Setter Property="TextElement.FontFamily" Value="{DynamicResource DefaultFontFamily}" />
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/TimePicker.axaml

@@ -2,11 +2,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     x:CompileBindings="True">
-    <Design.PreviewWith>
-        <Border Padding="20">
-            <TimePickerPresenter />
-        </Border>
-    </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type TimePickerPresenter}" TargetType="TimePickerPresenter">
         <Setter Property="Width" Value="242" />
         <Setter Property="MinWidth" Value="242" />
@@ -15,7 +10,7 @@
         <Setter Property="Background" Value="{DynamicResource DateTimePickerPopupBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerPopupBorderBrush}" />
         <Setter Property="BorderThickness" Value="1" />
-        <Setter Property="CornerRadius" Value="{DynamicResource DateTimePickerPopupCornerRadius}" />
+        <Setter Property="CornerRadius" Value="6" />
         <Setter Property="Template">
             <ControlTemplate TargetType="TimePickerPresenter">
                 <Border
@@ -118,7 +113,8 @@
                                     VerticalAlignment="Stretch"
                                     Theme="{StaticResource DateTimePickerButton}">
                                     <PathIcon
-                                        Theme="{StaticResource InnerPathIcon}"
+                                        Width="12"
+                                        Height="12"
                                         Data="{DynamicResource DateTimePickerAcceptGlyph}" />
                                 </Button>
                                 <Rectangle
@@ -130,9 +126,11 @@
                                     Grid.Column="2"
                                     HorizontalAlignment="Stretch"
                                     VerticalAlignment="Stretch"
+                                    FontSize="16"
                                     Theme="{StaticResource DateTimePickerButton}">
                                     <PathIcon
-                                        Theme="{StaticResource InnerPathIcon}"
+                                        Width="12"
+                                        Height="12"
                                         Data="{DynamicResource DateTimePickerDismissGlyph}" />
                                 </Button>
                                 <Rectangle
@@ -159,8 +157,8 @@
         <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonForeground}" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonBorderBrush}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource DateTimePickerButtonBorderThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource DateTimePickerButtonCornerRadius}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="CornerRadius" Value="3" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonDefaultHeight}" />
@@ -251,9 +249,9 @@
                                             FontFamily="{TemplateBinding FontFamily}"
                                             FontSize="{TemplateBinding FontSize}"
                                             FontWeight="{TemplateBinding FontWeight}"
-                                            Text="{DynamicResource STRING_TIMEPICKER_SECOND_TEXT}" />
+                                            Text="{DynamicResource STRING_TIMEPICKER_SECOND_TEXT}"/>
                                     </Border>
-
+                                    
                                     <Rectangle
                                         Name="PART_ThirdColumnDivider"
                                         Grid.Column="5"
@@ -310,7 +308,7 @@
                 </DataValidationErrors>
             </ControlTemplate>
         </Setter>
-
+        
         <Style Selector="^.clearButton:pointerover, ^.ClearButton:pointerover">
             <Style Selector="^:not(:hasnotime) /template/ Button#ClearButton">
                 <Setter Property="IsVisible" Value="True" />
@@ -335,4 +333,4 @@
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonSmallHeight}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/TitleBar.axaml

@@ -49,4 +49,4 @@
             <Setter Property="RenderTransform" Value="none" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ToggleButton.axaml

@@ -30,8 +30,8 @@
         <Setter Property="RenderTransform" Value="none" />
         <Setter Property="FontSize" Value="{DynamicResource ToggleButtonDefaultFontSize}" />
         <Setter Property="FontWeight" Value="{DynamicResource ToggleButtonDefaultFontWeight}" />
-        <Setter Property="HorizontalAlignment" Value="Center" />
-        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalAlignment" Value="Center"/>
+        <Setter Property="VerticalAlignment" Value="Center"/>
         <Setter Property="HorizontalContentAlignment" Value="Center" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" />
@@ -280,4 +280,4 @@
             <Setter Property="MinHeight" Value="{DynamicResource ButtonSmallHeight}" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Tooltip.axaml

@@ -39,4 +39,4 @@
             <Setter Property="Opacity" Value="1" />
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/TransitioningContentControl.axaml

@@ -30,4 +30,4 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>