Merge pull request #217 from irihitech/11.0

feat: upgrade to v11.

.github/workflows/Pack.yml

@@ -0,0 +1,55 @@
+name: Pack
+
+on:
+  push:
+    branches: [ "release" ]
+  pull_request:
+    branches: [ "release" ]
+
+jobs:
+  nuget_desktop:
+    runs-on: windows-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Nuget Semi.Avalonia
+        run: dotnet pack ./src/Semi.Avalonia -o ./nugets
+
+      - name: Nuget Semi.Avalonia.DataGrid
+        run: dotnet pack ./src/Semi.Avalonia.DataGrid  -o ./nugets
+
+      - name: Nuget Semi.Avalonia.ColorPicker
+        run: dotnet pack ./src/Semi.Avalonia.ColorPicker  -o ./nugets
+
+      - name: Desktop
+        run: dotnet publish ./demo/Semi.Avalonia.Demo.Desktop -r win-x64 -c Release /p:PublishSingleFile=true /p:IncludeNativeLibrariesForSelfExtract=true --self-contained true
+
+      - name: Upload
+        uses: actions/upload-artifact@v3.1.2
+        with:
+          name: nuget_desktop
+          path: |
+            ./nugets
+            ./**/publish/*.exe
+
+  android:
+    runs-on: windows-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: CD Android
+        run: cd ./demo/Semi.Avalonia.Demo.Android
+
+      - name: Restore Dependencies
+        run: dotnet restore
+
+      - name: Build
+        run: dotnet publish ./demo/Semi.Avalonia.Demo.Android -c Release -f net7.0-android --no-restore
+
+      - name: Upload a Build Artifact
+        uses: actions/upload-artifact@v3.1.2
+        with:
+          name: android
+          path: ./**/publish/*Signed.apk

.run/SC-Single.run.xml

@@ -0,0 +1,6 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="SC-Single" type="DotNetFolderPublish" factoryName="Publish to folder">
+    <riderPublish configuration="Release" include_native_libs_for_self_extract="true" platform="Any CPU" produce_single_file="true" runtime="win-x64" self_contained="true" target_folder="$PROJECT_DIR$/demo/Semi.Avalonia.Demo.Desktop/bin/Release/net7.0/win-x64/publish" target_framework="net7.0" uuid_high="3088527218258560748" uuid_low="-8649338673481336678" />
+    <method v="2" />
+  </configuration>
+</component>

README.md

@@ -5,13 +5,11 @@
 
 Avalonia Theme inspired by Semi Design
 
-> Semi.Avalonia is still in very early stage. Please don't use in production.
-
 # How to Use
 
 ## Installation
 ```bash
-dotnet add package Semi.Avalonia --version 0.1.0-preview6
+dotnet add package Semi.Avalonia --version 11.0.0-rc1
 ```
 Include Semi Design Styles in application:
 
@@ -25,8 +23,8 @@ That's all.
 
 DataGrid and ColorPicker are distributed in separated packages. Please install if you need. 
 ```bash
-dotnet add package Semi.Avalonia.ColorPicker --version 0.1.0-preview6
-dotnet add package Semi.Avalonia.DataGrid --version 0.1.0-preview6
+dotnet add package Semi.Avalonia.ColorPicker --version 11.0.0-rc1
+dotnet add package Semi.Avalonia.DataGrid --version 11.0.0-rc1
 ```
 ```xaml
 <Application.Styles>
@@ -44,9 +42,17 @@ https://github.com/irihitech/Semi.Avalonia/releases
 
 | Semi Design Version | Avalonia Version |
 |:--------------------|:-----------------|
+| 11.0.0-rc1          | 11.0.0-rc1.1     |
 | 0.1.0-preview3      | 11.0-preview4    |
 | 0.1.0-preview5.x    | 11.0-preview5    |
 | 0.1.0-preview6.x    | 11.0-preview6    |
+| 0.1.0-preview7.x    | 11.0-preview7    |
+| 0.1.0-preview8.x    | 11.0-preview8    |
+
+**NOTE**
+
+Semi Avalonia theme is moving forward together with Avalonia preview versions now. So new feature/fixes are not backported to previous preview versions. If you need a feature/fix for outdated avalonia preview version, please raise an issue so we can do that for you. 
+
 
 ## TODO
 * DataValidationErrors

demo/Directory.Build.props

@@ -1,6 +1,6 @@
 <Project>
   <PropertyGroup>
     <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.0.0-preview4</AvaloniaVersion>
+    <AvaloniaVersion>11.0.0</AvaloniaVersion>
   </PropertyGroup>
 </Project>

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

@@ -12,8 +12,10 @@
         <RootNamespace>Semi.Avalonia.Demo.Android</RootNamespace>
     </PropertyGroup>
 
+    <Import Project="../Directory.Build.props" />
+
     <ItemGroup>
-      <PackageReference Include="Avalonia.Android" Version="11.0.0-preview6" />
+      <PackageReference Include="Avalonia.Android" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>

demo/Semi.Avalonia.Demo.Android/SplashActivity.cs

@@ -7,7 +7,7 @@ using Application = Android.App.Application;
 namespace Semi.Avalonia.Demo.Android;
 
 [Activity(Theme = "@style/MyTheme.Splash", MainLauncher = true, NoHistory = true)]
-public class SplashActivity: AvaloniaSplashActivity<App>
+public class SplashActivity: AvaloniaMainActivity<App>
 {
     protected override AppBuilder CustomizeAppBuilder(AppBuilder builder)
     {

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

@@ -16,13 +16,13 @@
     </PropertyGroup>
     
     <ItemGroup>
-        <RdXmlFile Include="rd.xml"/>
+        <RdXmlFile Include="rd.xml" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Desktop" Version="11.0.0-preview6" />
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview6" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>

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

@@ -19,8 +19,8 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia.Browser" Version="11.0.0-preview6" />
-        <PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.0-preview6" />
+        <PackageReference Include="Avalonia.Browser" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>

demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.axaml

@@ -21,8 +21,8 @@
                         HorizontalAlignment="Stretch"
                         Background="{TemplateBinding Background}"
                         CornerRadius="6" />
-                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *">
-                        <!--  Row 0-1 ResourceKey  -->
+                    <Grid ColumnDefinitions="*, Auto" RowDefinitions="*, *, *, *, *, *, *">
+                        <!--  Row 0-1-2 ResourceKey  -->
                         <TextBlock
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
@@ -48,23 +48,43 @@
                                 Data="{StaticResource CopyIcon}"
                                 Foreground="{Binding $parent[Button].Foreground}" />
                         </Button>
-
-                        <!--  Row 2-3 HEX  -->
-                        <TextBlock
+                        <SelectableTextBlock
                             Grid.Row="2"
                             Grid.Column="0"
+                            VerticalAlignment="Center"
+                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Text="{TemplateBinding ColorResourceKey}" />
+                        <Button
+                            Grid.Row="2"
+                            Grid.Column="1"
+                            Classes="Tertiary"
+                            Command="{Binding $parent[controls:ColorDetailControl].Copy}"
+                            CommandParameter="{x:Static controls:ColorDetailControl.KEY_ColorResourceKey}"
+                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ColorResourceKey, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            Theme="{DynamicResource BorderlessButton}">
+                            <PathIcon
+                                Width="12"
+                                Height="12"
+                                Data="{StaticResource CopyIcon}"
+                                Foreground="{Binding $parent[Button].Foreground}" />
+                        </Button>
+
+                        <!--  Row 3-4 HEX  -->
+                        <TextBlock
+                            Grid.Row="3"
+                            Grid.Column="0"
                             Grid.ColumnSpan="2"
                             Margin="4,8,0,0"
                             VerticalAlignment="Center"
                             Classes="Tertiary"
                             Text="ARGB" />
                         <SelectableTextBlock
-                            Grid.Row="3"
+                            Grid.Row="4"
                             Grid.Column="0"
                             VerticalAlignment="Center"
                             Text="{TemplateBinding Hex}" />
                         <Button
-                            Grid.Row="3"
+                            Grid.Row="4"
                             Grid.Column="1"
                             Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"
@@ -77,9 +97,9 @@
                                 Foreground="{Binding $parent[Button].Foreground}" />
                         </Button>
 
-                        <!--  Row 4-5 Opacity  -->
+                        <!--  Row 5-6 Opacity  -->
                         <TextBlock
-                            Grid.Row="4"
+                            Grid.Row="5"
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
                             Margin="4,8,0,0"
@@ -87,12 +107,12 @@
                             Classes="Tertiary"
                             Text="Opacity" />
                         <SelectableTextBlock
-                            Grid.Row="5"
+                            Grid.Row="6"
                             Grid.Column="0"
                             VerticalAlignment="Center"
                             Text="{TemplateBinding OpacityNumber}" />
                         <Button
-                            Grid.Row="5"
+                            Grid.Row="6"
                             Grid.Column="1"
                             Classes="Tertiary"
                             Command="{Binding $parent[controls:ColorDetailControl].Copy}"

demo/Semi.Avalonia.Demo/Controls/ColorDetailControl.cs

@@ -1,5 +1,6 @@
 using System.Globalization;
 using Avalonia;
+using Avalonia.Controls;
 using Avalonia.Controls.Primitives;
 using Avalonia.Input.Platform;
 using Avalonia.Media;
@@ -12,6 +13,7 @@ public class ColorDetailControl: TemplatedControl
     public const string KEY_ResourceKey = "ResourceKey";
     public const string KEY_Hex = "Hex";
     public const string KEY_Opacity = "Opacity";
+    public const string KEY_ColorResourceKey = "ColorResourceKey";
     
     public static readonly StyledProperty<string?> ResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
         nameof(ResourceKey));
@@ -30,6 +32,15 @@ public class ColorDetailControl: TemplatedControl
         set => SetValue(ResourceNameProperty, value);
     }
 
+    public static readonly StyledProperty<string?> ColorResourceKeyProperty = AvaloniaProperty.Register<ColorDetailControl, string?>(
+        nameof(ColorResourceKey));
+
+    public string? ColorResourceKey
+    {
+        get => GetValue(ColorResourceKeyProperty);
+        set => SetValue(ColorResourceKeyProperty, value);
+    }
+
     public static readonly DirectProperty<ColorDetailControl, string?> HexProperty = AvaloniaProperty.RegisterDirect<ColorDetailControl, string?>(
         nameof(Hex), o => o.Hex);
     private string? _hex;
@@ -49,6 +60,8 @@ public class ColorDetailControl: TemplatedControl
     }
     
     
+    
+    
     static ColorDetailControl()
     {
         BackgroundProperty.Changed.AddClassHandler<ColorDetailControl>((o, e) => o.OnBackgroundChanged(e));
@@ -77,15 +90,18 @@ public class ColorDetailControl: TemplatedControl
                     break;
                 case KEY_Opacity: text = OpacityNumber;
                     break;
+                case KEY_ColorResourceKey: text = ColorResourceKey;
+                    break;
                 default: text = string.Empty; break;
             }
         }
 
-        if (Application.Current is { Clipboard: { } c })
+        var toplevel = TopLevel.GetTopLevel(this);
+        if (toplevel?.Clipboard is { } c)
         {
             await c.SetTextAsync(text??string.Empty);
         }
-        
+
     }
     
 }

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

@@ -19,15 +19,14 @@
                         Theme="{DynamicResource TitleTextBlock}" />
                     <TabControl Grid.Row="1">
                         <TabItem Header="Light">
-                            <DataGrid IsReadOnly="True" Items="{TemplateBinding LightColors}">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding LightColors}">
                                 <DataGrid.Columns>
                                     <DataGridTemplateColumn Width="70" Header="Color">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <controls:ColorItemControl
                                                     Width="40"
                                                     Height="20"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Background="{Binding Brush}"
                                                     CornerRadius="3" />
                                             </DataTemplate>
@@ -35,11 +34,10 @@
                                     </DataGridTemplateColumn>
                                     <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
@@ -47,28 +45,26 @@
                                     <DataGridTextColumn
                                         Width="*"
                                         x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
+                                        Binding="{ReflectionBinding ColorDisplayName}"
                                         CanUserSort="False"
                                         Header="Name" />
                                     <DataGridTemplateColumn Width="100" Header="Hex">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
                                     <DataGridTemplateColumn Width="80" Header="Opacity">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     HorizontalAlignment="Right"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding Brush.Opacity}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
@@ -77,15 +73,14 @@
                             </DataGrid>
                         </TabItem>
                         <TabItem Header="Dark">
-                            <DataGrid IsReadOnly="True" Items="{TemplateBinding DarkColors}">
+                            <DataGrid IsReadOnly="True" ItemsSource="{TemplateBinding DarkColors}">
                                 <DataGrid.Columns>
                                     <DataGridTemplateColumn Width="70" Header="Color">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <controls:ColorItemControl
                                                     Width="40"
                                                     Height="20"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Background="{Binding Brush}"
                                                     CornerRadius="3" />
                                             </DataTemplate>
@@ -93,11 +88,10 @@
                                     </DataGridTemplateColumn>
                                     <DataGridTemplateColumn Width="*" Header="ResourceKey">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding ResourceKey}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
@@ -105,28 +99,26 @@
                                     <DataGridTextColumn
                                         Width="*"
                                         x:DataType="viewModels:ColorItemViewModel"
-                                        Binding="{Binding ColorDisplayName}"
+                                        Binding="{ReflectionBinding ColorDisplayName}"
                                         CanUserSort="False"
                                         Header="Name" />
                                     <DataGridTemplateColumn Width="100" Header="Hex">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding Hex}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>
                                     </DataGridTemplateColumn>
                                     <DataGridTemplateColumn Width="80" Header="Opacity">
                                         <DataGridTemplateColumn.CellTemplate>
-                                            <DataTemplate>
+                                            <DataTemplate DataType="viewModels:ColorItemViewModel">
                                                 <SelectableTextBlock
                                                     Margin="12,0,12,0"
                                                     HorizontalAlignment="Right"
                                                     VerticalAlignment="Center"
-                                                    x:DataType="viewModels:ColorItemViewModel"
                                                     Text="{Binding Brush.Opacity}" />
                                             </DataTemplate>
                                         </DataGridTemplateColumn.CellTemplate>

demo/Semi.Avalonia.Demo/Controls/FunctionalColorGroupControl.cs

@@ -14,19 +14,19 @@ public class FunctionalColorGroupControl: TemplatedControl
         set => SetValue(TitleProperty, value);
     }
     
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable> LightColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable>(
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> LightColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
         nameof(LightColors), o => o.LightColors, (o, v) => o.LightColors = v);
-    private IEnumerable _lightColors;
-    public IEnumerable LightColors
+    private IEnumerable? _lightColors;
+    public IEnumerable? LightColors
     {
         get => _lightColors;
         set => SetAndRaise(LightColorsProperty, ref _lightColors, value);
     }
     
-    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable> DarkColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable>(
+    public static readonly DirectProperty<FunctionalColorGroupControl, IEnumerable?> DarkColorsProperty = AvaloniaProperty.RegisterDirect<FunctionalColorGroupControl, IEnumerable?>(
         nameof(DarkColors), o => o.DarkColors, (o, v) => o.DarkColors = v);
-    private IEnumerable _darkColors;
-    public IEnumerable DarkColors
+    private IEnumerable? _darkColors;
+    public IEnumerable? DarkColors
     {
         get => _darkColors;
         set => SetAndRaise(DarkColorsProperty, ref _darkColors, value);

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

@@ -20,7 +20,7 @@
             </Style>
         </StackPanel.Styles>
         <AutoCompleteBox
-            Items="{Binding States}"
+            ItemsSource="{Binding States}"
             ValueMemberBinding="{Binding Name}"
             Watermark="Please select a State">
             <AutoCompleteBox.ItemTemplate>
@@ -31,7 +31,7 @@
         </AutoCompleteBox>
         <AutoCompleteBox
             Classes="Large"
-            Items="{Binding States}"
+            ItemsSource="{Binding States}"
             ValueMemberBinding="{ReflectionBinding Name}">
             <AutoCompleteBox.ItemTemplate>
                 <DataTemplate DataType="local:StateData">
@@ -41,7 +41,7 @@
         </AutoCompleteBox>
         <AutoCompleteBox
             Classes="Small"
-            Items="{Binding States}"
+            ItemsSource="{Binding States}"
             ValueMemberBinding="{ReflectionBinding Name}">
             <AutoCompleteBox.ItemTemplate>
                 <DataTemplate DataType="local:StateData">
@@ -51,7 +51,7 @@
         </AutoCompleteBox>
         <AutoCompleteBox
             Classes="Bordered"
-            Items="{Binding States}"
+            ItemsSource="{Binding States}"
             ValueMemberBinding="{ReflectionBinding Name}">
             <AutoCompleteBox.ItemTemplate>
                 <DataTemplate DataType="local:StateData">
@@ -61,7 +61,7 @@
         </AutoCompleteBox>
         <AutoCompleteBox
             IsEnabled="False"
-            Items="{Binding States}"
+            ItemsSource="{Binding States}"
             ValueMemberBinding="{ReflectionBinding Name}"
             Watermark="Disabled">
             <AutoCompleteBox.ItemTemplate>

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

@@ -13,6 +13,7 @@
             <Button Classes="Primary">Primary</Button>
             <Button Classes="Secondary">Secondary</Button>
             <Button Classes="Tertiary">Tertiary</Button>
+            <Button Classes="Success">Success</Button>
             <Button Classes="Warning">Warning</Button>
             <Button Classes="Danger">Danger</Button>
             <Button Classes="Primary" IsEnabled="False">Danger</Button>
@@ -22,6 +23,7 @@
             <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
             <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
             <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
+            <Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
             <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
             <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
             <Button
@@ -36,6 +38,7 @@
             <Button Classes="Primary" Theme="{DynamicResource BorderlessButton}">Primary</Button>
             <Button Classes="Secondary" Theme="{DynamicResource BorderlessButton}">Secondary</Button>
             <Button Classes="Tertiary" Theme="{DynamicResource BorderlessButton}">Tertiary</Button>
+            <Button Classes="Success" Theme="{DynamicResource BorderlessButton}">Success</Button>
             <Button Classes="Warning" Theme="{DynamicResource BorderlessButton}">Warning</Button>
             <Button Classes="Danger" Theme="{DynamicResource BorderlessButton}">Danger</Button>
             <Button
@@ -45,7 +48,7 @@
                 Danger
             </Button>
         </StackPanel>
-        <TextBlock>DropdownButton</TextBlock>
+        <TextBlock>DropDownButton</TextBlock>
         <StackPanel Orientation="Horizontal" Spacing="8">
             <DropDownButton Content="Submit">
                 <DropDownButton.Flyout>
@@ -55,7 +58,7 @@
                     </MenuFlyout>
                 </DropDownButton.Flyout>
             </DropDownButton>
-            <DropDownButton Content="Submit" Theme="{DynamicResource SolidDropdownButton}">
+            <DropDownButton Content="Submit" Theme="{DynamicResource SolidDropDownButton}">
                 <DropDownButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
                         <MenuItem Header="Submit All" />
@@ -63,7 +66,7 @@
                     </MenuFlyout>
                 </DropDownButton.Flyout>
             </DropDownButton>
-            <DropDownButton Content="Submit" Theme="{DynamicResource BorderlessDropdownButton}">
+            <DropDownButton Content="Submit" Theme="{DynamicResource BorderlessDropDownButton}">
                 <DropDownButton.Flyout>
                     <MenuFlyout Placement="BottomEdgeAlignedRight">
                         <MenuItem Header="Submit All" />
@@ -83,6 +86,7 @@
             </SplitButton>
             <SplitButton Classes="Secondary" Content="Submit" />
             <SplitButton Classes="Tertiary" Content="Submit" />
+            <SplitButton Classes="Success" Content="Submit" />
             <SplitButton Classes="Warning" Content="Submit" />
             <SplitButton Classes="Danger" Content="Submit" />
             <SplitButton
@@ -101,6 +105,7 @@
             </ToggleSplitButton>
             <ToggleSplitButton Classes="Secondary" Content="Submit" />
             <ToggleSplitButton Classes="Tertiary" Content="Submit" />
+            <ToggleSplitButton Classes="Success" Content="Submit" />
             <ToggleSplitButton Classes="Warning" Content="Submit" />
             <ToggleSplitButton Classes="Danger" Content="Submit" />
             <ToggleSplitButton

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

@@ -14,6 +14,7 @@
         <Style Selector="TextBlock">
             <Setter Property="HorizontalAlignment" Value="Center" />
             <Setter Property="VerticalAlignment" Value="Center" />
+            <Setter Property="Foreground" Value="#1C1F23" />
         </Style>
     </UserControl.Styles>
     <StackPanel Spacing="20">

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

@@ -8,21 +8,47 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <ScrollViewer HorizontalScrollBarVisibility="Auto">
-        <StackPanel HorizontalAlignment="Left">
-            <CheckBox>Unchecked</CheckBox>
-            <CheckBox IsEnabled="False">Unchecked</CheckBox>
-            <CheckBox IsChecked="True">Checked</CheckBox>
-            <CheckBox IsChecked="True" IsEnabled="False">Checked</CheckBox>
-            <CheckBox IsChecked="{x:Null}" IsThreeState="True">Indeterminate</CheckBox>
-            <CheckBox
-                IsChecked="{x:Null}"
-                IsEnabled="False"
-                IsThreeState="True">
-                Indeterminate
-            </CheckBox>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <TextBlock Text="CheckBox" />
+            <StackPanel Orientation="Horizontal">
+                <CheckBox>Unchecked</CheckBox>
+                <CheckBox IsChecked="True">Checked</CheckBox>
+                <CheckBox IsChecked="{x:Null}" IsThreeState="True">Indeterminate</CheckBox>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox IsEnabled="False">Unchecked</CheckBox>
+                <CheckBox IsChecked="True" IsEnabled="False">Checked</CheckBox>
+                <CheckBox
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True">
+                    Indeterminate
+                </CheckBox>
+            </StackPanel>
             <CheckBox Width="120" HorizontalAlignment="Left">Checkbox should wrap its text</CheckBox>
+            <TextBlock Text="SimpleCheckBox" />
+            <StackPanel Orientation="Horizontal">
+                <CheckBox Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox IsChecked="True" Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox
+                    IsChecked="{x:Null}"
+                    IsThreeState="True"
+                    Theme="{StaticResource SimpleCheckBox}" />
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox IsEnabled="False" Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{StaticResource SimpleCheckBox}" />
+                <CheckBox
+                    IsChecked="{x:Null}"
+                    IsEnabled="False"
+                    IsThreeState="True"
+                    Theme="{StaticResource SimpleCheckBox}" />
+            </StackPanel>
             <TextBlock Margin="0,16" Text="CardCheckBox" />
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Horizontal">
                 <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">复选框标题</TextBlock>
@@ -38,6 +64,18 @@
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsThreeState="True"
+                    Theme="{DynamicResource CardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
                 <CheckBox
                     Width="300"
                     IsEnabled="False"
@@ -57,17 +95,6 @@
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </CheckBox>
-                <CheckBox
-                    Width="300"
-                    IsChecked="{x:Null}"
-                    IsEnabled="True"
-                    IsThreeState="True"
-                    Theme="{DynamicResource CardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
                 <CheckBox
                     Width="300"
                     IsChecked="{x:Null}"
@@ -81,7 +108,7 @@
                 </CheckBox>
             </StackPanel>
             <TextBlock Margin="0,16" Text="PureCardCheckBox" />
-            <StackPanel Orientation="Vertical">
+            <StackPanel Orientation="Horizontal">
                 <CheckBox Width="300" Theme="{DynamicResource PureCardCheckBox}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">复选框标题</TextBlock>
@@ -97,6 +124,19 @@
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </CheckBox>
+                <CheckBox
+                    Width="300"
+                    IsChecked="{x:Null}"
+                    IsEnabled="True"
+                    IsThreeState="True"
+                    Theme="{DynamicResource PureCardCheckBox}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </CheckBox>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
                 <CheckBox
                     Width="300"
                     IsEnabled="False"
@@ -116,17 +156,6 @@
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </CheckBox>
-                <CheckBox
-                    Width="300"
-                    IsChecked="{x:Null}"
-                    IsEnabled="True"
-                    IsThreeState="True"
-                    Theme="{DynamicResource PureCardCheckBox}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">复选框标题</TextBlock>
-                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                    </StackPanel>
-                </CheckBox>
                 <CheckBox
                     Width="300"
                     IsChecked="{x:Null}"
@@ -141,4 +170,4 @@
             </StackPanel>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -2,6 +2,7 @@
     x:Class="Semi.Avalonia.Demo.Pages.ColorPickerDemo"
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    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"
@@ -15,11 +16,7 @@
             Spacing="20">
             <ColorView ColorSpectrumShape="Ring" />
             <ColorView ColorSpectrumShape="Box" />
-            <ColorView>
-                <ColorView.Palette>
-                    <controls:MaterialColorPalette />
-                </ColorView.Palette>
-            </ColorView>
+            <ColorView Palette="{DynamicResource SemiColorPalette}" />
         </StackPanel>
         <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
             <ColorPicker ColorSpectrumShape="Ring">
@@ -29,7 +26,7 @@
             </ColorPicker>
             <ColorPicker ColorSpectrumShape="Box">
                 <ColorPicker.Palette>
-                    <controls:MaterialColorPalette />
+                    <colorPicker:SemiColorLightPalette />
                 </ColorPicker.Palette>
             </ColorPicker>
         </StackPanel>

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

@@ -143,7 +143,7 @@
                     Name="dataGridEdit"
                     Grid.Row="1"
                     Margin="12"
-                    Items="{Binding DataGrid3Source}">
+                    ItemsSource="{Binding DataGrid3Source}">
                     <DataGrid.Columns>
                         <DataGridTextColumn
                             Width="2*"

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

@@ -38,7 +38,7 @@ public partial class DataGridDemo : UserControl
                 collectionView1.SortDescriptions.Add(dataGridSortDescription);
             }
         };
-        dg1.Items = collectionView1;
+        dg1.ItemsSource = collectionView1;
 
         var dg2 = this.Get<DataGrid>("dataGridGrouping");
         dg2.IsReadOnly = true;
@@ -46,7 +46,7 @@ public partial class DataGridDemo : UserControl
         var collectionView2 = new DataGridCollectionView(Countries.All);
         collectionView2.GroupDescriptions.Add(new DataGridPathGroupDescription("Region"));
 
-        dg2.Items = collectionView2;
+        dg2.ItemsSource = collectionView2;
 
         var dg3 = this.Get<DataGrid>("dataGridEdit");
         dg3.IsReadOnly = false;

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

@@ -0,0 +1,83 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.DataValidationErrorsDemo"
+    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:system="clr-namespace:System;assembly=netstandard"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <AutoCompleteBox Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </AutoCompleteBox>
+            <AutoCompleteBox Width="300" Classes="Large">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </AutoCompleteBox>
+            <AutoCompleteBox Width="300" Classes="Small">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </AutoCompleteBox>
+            <CalendarDatePicker Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </CalendarDatePicker>
+            <ComboBox Width="300">
+                <ComboBoxItem>AAA</ComboBoxItem>
+                <ComboBoxItem>BBB</ComboBoxItem>
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </ComboBox>
+            <DatePicker Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </DatePicker>
+            <NumericUpDown Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </NumericUpDown>
+            <Slider Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </Slider>
+            <TimePicker Width="300">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </TimePicker>
+            <TextBox
+                Width="300"
+                InnerLeftContent="http://"
+                InnerRightContent=".com">
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </TextBox>
+            <TextBox
+                Width="300"
+                InnerLeftContent="http://"
+                InnerRightContent=".com">
+                <TextBox.Styles>
+                    <Style Selector="TextBox /template/ DataValidationErrors">
+                        <Setter Property="Theme" Value="{DynamicResource TooltipDataValidationErrors}" />
+                    </Style>
+                </TextBox.Styles>
+                <DataValidationErrors.Error>
+                    <system:Exception />
+                </DataValidationErrors.Error>
+            </TextBox>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class DataValidationErrorsDemo : UserControl
+{
+    public DataValidationErrorsDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}

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

@@ -19,7 +19,7 @@
                 <Button Content="Hello Avalonia World!" />
             </Expander>
         </StackPanel>
-        <Grid ColumnDefinitions="* *">
+        <Grid ColumnDefinitions="*, *">
             <Expander
                 Height="200"
                 ExpandDirection="Right"

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

@@ -15,8 +15,8 @@
     <Grid
         HorizontalAlignment="Center"
         VerticalAlignment="Center"
-        ColumnDefinitions="* * * * *"
-        RowDefinitions="* * * * *">
+        ColumnDefinitions="*, *, *, *, *"
+        RowDefinitions="*, *, *, *, *, *">
         <Button
             Grid.Row="0"
             Grid.Column="1"
@@ -113,6 +113,44 @@
                 <Flyout Content="BottomEdgeAlignedRight" Placement="BottomEdgeAlignedRight" />
             </Button.Flyout>
         </Button>
+
+        <Button
+            Grid.Row="2"
+            Grid.Column="2"
+            Content="Center">
+            <Button.Flyout>
+                <Flyout Content="Center" Placement="Center" />
+            </Button.Flyout>
+        </Button>
+
+        <Button
+            Grid.Row="5"
+            Grid.Column="2" Content="LightFlyout">
+            <Button.Flyout>
+                <Flyout FlyoutPresenterTheme="{StaticResource LightFlyout}" Placement="Top">
+                    <StackPanel>
+                        <Label Classes="Amber" Theme="{StaticResource TagLabel}">Amber</Label>
+                        <Label Classes="Blue" Theme="{StaticResource TagLabel}">Blue</Label>
+                        <Label Classes="Cyan" Theme="{StaticResource TagLabel}">Cyan</Label>
+                        <Label Classes="Green" Theme="{StaticResource TagLabel}">Green</Label>
+                        <Label Classes="Grey" Theme="{StaticResource TagLabel}">Grey</Label>
+                        <Label Classes="Indigo" Theme="{StaticResource TagLabel}">Indigo</Label>
+                        <Label Classes="LightBlue" Theme="{StaticResource TagLabel}">LightBlue</Label>
+                        <Label Classes="LightGreen" Theme="{StaticResource TagLabel}">LightGreen</Label>
+                        <Label Classes="Lime" Theme="{StaticResource TagLabel}">Lime</Label>
+                        <Label Classes="Orange" Theme="{StaticResource TagLabel}">Orange</Label>
+                        <Label Classes="Pink" Theme="{StaticResource TagLabel}">Pink</Label>
+                        <Label Classes="Purple" Theme="{StaticResource TagLabel}">Purple</Label>
+                        <Label Classes="Red" Theme="{StaticResource TagLabel}">Red</Label>
+                        <Label Classes="Teal" Theme="{StaticResource TagLabel}">Teal</Label>
+                        <Label Classes="Violet" Theme="{StaticResource TagLabel}">Violet</Label>
+                        <Label Classes="Yellow" Theme="{StaticResource TagLabel}">Yellow</Label>
+                        <Label Classes="White" Theme="{StaticResource TagLabel}">White</Label>
+                    </StackPanel>
+                </Flyout>
+            </Button.Flyout>
+        </Button>
     </Grid>
 
-</UserControl>
+
+</UserControl>

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

@@ -0,0 +1,14 @@
+<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"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <HeaderedContentControl Theme="{DynamicResource GroupBox}" Header="Semi Design">
+                <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
+            </HeaderedContentControl>
+        </StackPanel>
+    </ScrollViewer>
+</UserControl>

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

@@ -0,0 +1,11 @@
+using Avalonia.Controls;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class HeaderedContentControlDemo : UserControl
+{
+    public HeaderedContentControlDemo()
+    {
+        InitializeComponent();
+    }
+}

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

@@ -27,5 +27,15 @@
             Maximum="100"
             Minimum="0"
             ShowButtonSpinner="False" />
+        <NumericUpDown
+            Width="200"
+            Classes="Large"
+            Maximum="100"
+            Minimum="0" />
+        <NumericUpDown
+            Width="200"
+            Classes="Small"
+            Maximum="100"
+            Minimum="0" />
     </StackPanel>
 </UserControl>

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

@@ -13,6 +13,7 @@
                 <Button Classes="Primary" Theme="{DynamicResource SolidButton}">Primary</Button>
                 <Button Classes="Secondary" Theme="{DynamicResource SolidButton}">Secondary</Button>
                 <Button Classes="Tertiary" Theme="{DynamicResource SolidButton}">Tertiary</Button>
+                <Button Classes="Success" Theme="{DynamicResource SolidButton}">Success</Button>
                 <Button Classes="Warning" Theme="{DynamicResource SolidButton}">Warning</Button>
                 <Button Classes="Danger" Theme="{DynamicResource SolidButton}">Danger</Button>
                 <Button
@@ -47,27 +48,101 @@
                         <RadioButton Theme="{StaticResource ButtonRadioButton}">选项 2</RadioButton>
                     </StackPanel>
                 </Border>
-                <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">Option 1</TextBlock>
-                        <TextBlock Classes="Tertiary">Description 1</TextBlock>
-                    </StackPanel>
-                </RadioButton>
-                <RadioButton
-                    Margin="4"
-                    IsChecked="True"
-                    Theme="{StaticResource CardRadioButton}">
-                    <StackPanel>
-                        <TextBlock FontWeight="Bold">Option 2</TextBlock>
-                        <TextBlock Classes="Tertiary">Description 2</TextBlock>
-                    </StackPanel>
-                </RadioButton>
+                <StackPanel Orientation="Horizontal">
+                    <RadioButton Margin="4" Theme="{StaticResource CardRadioButton}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                        </StackPanel>
+                    </RadioButton>
+                    <RadioButton
+                        Margin="4"
+                        IsChecked="True"
+                        Theme="{StaticResource CardRadioButton}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                        </StackPanel>
+                    </RadioButton>
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <RadioButton Margin="4" Theme="{StaticResource PureCardRadioButton}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                        </StackPanel>
+                    </RadioButton>
+                    <RadioButton
+                        Margin="4"
+                        IsChecked="True"
+                        Theme="{StaticResource PureCardRadioButton}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                        </StackPanel>
+                    </RadioButton>
+                </StackPanel>
             </StackPanel>
-            <StackPanel Orientation="Horizontal" />
             <StackPanel Orientation="Horizontal">
-                <CheckBox Margin="0,0,8,0">Avalonia</CheckBox>
-                <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
-                <CheckBox IsChecked="{x:Null}" IsThreeState="True">UWP</CheckBox>
+                <StackPanel Orientation="Horizontal">
+                    <CheckBox Margin="0,0,8,0">Avalonia</CheckBox>
+                    <CheckBox Margin="0,0,8,0" IsChecked="True">WPF</CheckBox>
+                    <CheckBox IsChecked="{x:Null}" IsThreeState="True">UWP</CheckBox>
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <CheckBox Margin="4" Theme="{StaticResource CardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="True"
+                        Theme="{StaticResource CardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="{x:Null}"
+                        IsThreeState="True"
+                        Theme="{StaticResource CardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 3</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 3</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <CheckBox Margin="4" Theme="{StaticResource PureCardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 1</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 1</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="True"
+                        Theme="{StaticResource PureCardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 2</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 2</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                    <CheckBox
+                        Margin="4"
+                        IsChecked="{x:Null}"
+                        IsThreeState="True"
+                        Theme="{StaticResource PureCardCheckBox}">
+                        <StackPanel>
+                            <TextBlock FontWeight="Bold">Option 3</TextBlock>
+                            <TextBlock Classes="Tertiary">Description 3</TextBlock>
+                        </StackPanel>
+                    </CheckBox>
+                </StackPanel>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
                 <ToggleSwitch
@@ -96,7 +171,7 @@
                 </TabItem>
             </TabControl>
             <StackPanel Orientation="Horizontal" Spacing="20">
-                <ComboBox Width="200" PlaceholderText="Please Select" >
+                <ComboBox Width="200" PlaceholderText="Please Select">
                     <ComboBoxItem>Item 1</ComboBoxItem>
                     <ComboBoxItem>Item 2</ComboBoxItem>
                     <ComboBoxItem>Item 3</ComboBoxItem>
@@ -105,7 +180,7 @@
                 <TimePicker />
                 <CalendarDatePicker />
             </StackPanel>
-            <Grid ColumnDefinitions="* * *">
+            <Grid ColumnDefinitions="*, *, *">
                 <Border Theme="{StaticResource CardBorder}">
                     <TextBlock>Card</TextBlock>
                 </Border>
@@ -157,4 +232,4 @@
             </StackPanel>
         </StackPanel>
     </ScrollViewer>
-</UserControl>
+</UserControl>

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

@@ -46,6 +46,7 @@
                             TextWrapping="Wrap" />
                         <controls:ColorDetailControl
                             Background="{Binding SelectedColor.Brush}"
+                            ColorResourceKey="{Binding SelectedColor.ColorResourceKey}"
                             IsVisible="{Binding SelectedColor, Converter={x:Static ObjectConverters.IsNotNull}}"
                             ResourceKey="{Binding SelectedColor.ResourceKey}"
                             ResourceName="{Binding SelectedColor.ColorDisplayName}" />
@@ -62,7 +63,7 @@
                         Theme="{DynamicResource TitleTextBlock}" />
                     <TabControl>
                         <TabItem Header="Light">
-                            <ItemsControl Margin="16" Items="{Binding LightLists}">
+                            <ItemsControl Margin="16" ItemsSource="{Binding LightLists}">
                                 <ItemsControl.ItemsPanel>
                                     <ItemsPanelTemplate>
                                         <WrapPanel Orientation="Horizontal" />
@@ -70,7 +71,7 @@
                                 </ItemsControl.ItemsPanel>
                                 <ItemsControl.ItemTemplate>
                                     <DataTemplate x:DataType="viewModels:ColorListViewModel">
-                                        <ItemsControl Margin="4,0" Items="{Binding Color}">
+                                        <ItemsControl Margin="4,0" ItemsSource="{Binding Color}">
                                             <ItemsControl.ItemTemplate>
                                                 <DataTemplate x:DataType="viewModels:ColorItemViewModel">
                                                     <controls:ColorItemControl
@@ -86,7 +87,7 @@
                             </ItemsControl>
                         </TabItem>
                         <TabItem Header="Dark">
-                            <ItemsControl Margin="16" Items="{Binding DarkLists}">
+                            <ItemsControl Margin="16" ItemsSource="{Binding DarkLists}">
                                 <ItemsControl.ItemsPanel>
                                     <ItemsPanelTemplate>
                                         <WrapPanel Orientation="Horizontal" />
@@ -94,7 +95,7 @@
                                 </ItemsControl.ItemsPanel>
                                 <ItemsControl.ItemTemplate>
                                     <DataTemplate x:DataType="viewModels:ColorListViewModel">
-                                        <ItemsControl Margin="4,0" Items="{Binding Color}">
+                                        <ItemsControl Margin="4,0" ItemsSource="{Binding Color}">
                                             <ItemsControl.ItemTemplate>
                                                 <DataTemplate x:DataType="viewModels:ColorItemViewModel">
                                                     <controls:ColorItemControl
@@ -111,7 +112,7 @@
                         </TabItem>
                     </TabControl>
 
-                    <ItemsControl Items="{Binding FunctionalColors}">
+                    <ItemsControl ItemsSource="{Binding FunctionalColors}">
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
                                 <!--    -->

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

@@ -7,114 +7,159 @@
     d:DesignHeight="800"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <ProgressBar
-            Width="200"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="20" />
-        <ProgressBar
-            Width="200"
-            IsIndeterminate="True"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="20" />
-        <ProgressBar
-            Width="200"
-            Classes="Left"
-            IsIndeterminate="True"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="20" />
-        <ProgressBar
-            Width="200"
-            Classes="Left"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="20" />
-        <ProgressBar
-            Width="200"
-            Classes="Right"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="20" />
-        <StackPanel
-            HorizontalAlignment="Left"
-            Orientation="Horizontal"
-            Spacing="20">
-            <ProgressBar
-                Classes="Left"
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <StackPanel
+                HorizontalAlignment="Left"
+                Orientation="Horizontal"
+                Spacing="20">
+                <ProgressBar
+                    Width="100"
+                    Height="100"
+                    Maximum="{Binding #slider.Maximum}"
+                    Minimum="{Binding #slider.Minimum}"
+                    Theme="{DynamicResource ProgressRing}"
+                    Value="{Binding #slider.Value}"
+                    ShowProgressText="True"/>
+                <ProgressBar
+                    Width="100"
+                    Height="100"
+                    IsIndeterminate="True"
+                    Maximum="{Binding #slider.Maximum}"
+                    Minimum="{Binding #slider.Minimum}"
+                    Theme="{DynamicResource ProgressRing}"
+                    ShowProgressText="True"/>
+            </StackPanel>
+            <Slider
+                Name="slider"
+                Width="300"
+                IsSnapToTickEnabled="True"
+                Maximum="100"
+                Minimum="0"
+                TickFrequency="10" />
+            <ProgressBar
+                Width="200"
+                Maximum="100"
+                Minimum="0"
+                ShowProgressText="True"
+                Value="{Binding #slider.Value}" />
+            <ProgressBar
+                Width="200"
+                IsIndeterminate="True"
                 Maximum="100"
                 Minimum="0"
-                Orientation="Vertical"
                 ShowProgressText="True"
                 Value="20" />
             <ProgressBar
+                Width="200"
+                Classes="Left"
+                IsIndeterminate="True"
+                Maximum="100"
+                Minimum="0"
+                ShowProgressText="True"
+                Value="20" />
+            <ProgressBar
+                Width="200"
+                Classes="Left"
+                Maximum="100"
+                Minimum="0"
+                ShowProgressText="True"
+                Value="20" />
+            <ProgressBar
+                Width="200"
                 Classes="Right"
                 Maximum="100"
                 Minimum="0"
-                Orientation="Vertical"
                 ShowProgressText="True"
                 Value="20" />
+            <StackPanel
+                HorizontalAlignment="Left"
+                Orientation="Horizontal"
+                Spacing="20">
+                <ProgressBar
+                    Classes="Left"
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="True"
+                    Value="20" />
+                <ProgressBar
+                    Classes="Right"
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="True"
+                    Value="20" />
+                <ProgressBar
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="True"
+                    Value="20" />
+                <ProgressBar
+                    Classes="Left"
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="False"
+                    Value="20" />
+                <ProgressBar
+                    IsIndeterminate="True"
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="True"
+                    Value="20" />
+                <ProgressBar
+                    IsIndeterminate="True"
+                    Maximum="100"
+                    Minimum="0"
+                    Orientation="Vertical"
+                    ShowProgressText="False"
+                    Value="20" />
+            </StackPanel>
             <ProgressBar
+                Width="200"
+                Classes="Primary"
                 Maximum="100"
                 Minimum="0"
-                Orientation="Vertical"
                 ShowProgressText="True"
-                Value="20" />
+                Value="60" />
             <ProgressBar
-                Classes="Left"
+                Width="200"
+                Classes="Secondary"
                 Maximum="100"
                 Minimum="0"
-                Orientation="Vertical"
-                ShowProgressText="False"
-                Value="20" />
-            <ProgressBar
-                IsIndeterminate="True"
-                Maximum="100"
-                Minimum="0"
-                Orientation="Vertical"
                 ShowProgressText="True"
-                Value="20" />
+                Value="60" />
             <ProgressBar
-                IsIndeterminate="True"
+                Width="200"
+                Classes="Tertiary"
                 Maximum="100"
                 Minimum="0"
-                Orientation="Vertical"
-                ShowProgressText="False"
-                Value="20" />
+                ShowProgressText="True"
+                Value="60" />
+            <ProgressBar
+                Width="200"
+                Classes="Success"
+                Maximum="100"
+                Minimum="0"
+                ShowProgressText="True"
+                Value="60" />
+            <ProgressBar
+                Width="200"
+                Classes="Warning"
+                Maximum="100"
+                Minimum="0"
+                ShowProgressText="True"
+                Value="60" />
+            <ProgressBar
+                Width="200"
+                Classes="Error"
+                Maximum="100"
+                Minimum="0"
+                ShowProgressText="True"
+                Value="60" />
         </StackPanel>
-        <ProgressBar
-            Width="200"
-            Classes="Success"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="60" />
-        <ProgressBar
-            Width="200"
-            Classes="Warning"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="60" />
-        <ProgressBar
-            Width="200"
-            Classes="Error"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="60" />
-        <ProgressBar
-            Width="200"
-            Maximum="100"
-            Minimum="0"
-            ShowProgressText="True"
-            Value="60" />
-    </StackPanel>
-</UserControl>
+    </ScrollViewer>
+</UserControl>

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

@@ -5,73 +5,184 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
-    <StackPanel HorizontalAlignment="Left" Spacing="20">
-        <TextBlock Text="Radio Buttons" />
-        <StackPanel>
-            <RadioButton>111</RadioButton>
-            <RadioButton>222</RadioButton>
-            <RadioButton>333</RadioButton>
-        </StackPanel>
-        <TextBlock Text="Radio Button as Button" />
-        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+    <ScrollViewer>
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
+            <TextBlock Text="Radio Buttons" />
             <StackPanel Orientation="Horizontal">
-                <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
-                <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小2</RadioButton>
+                <RadioButton>Unchecked</RadioButton>
+                <RadioButton IsChecked="True">Checked</RadioButton>
             </StackPanel>
-        </Border>
-        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
             <StackPanel Orientation="Horizontal">
-                <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
-                <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
+                <RadioButton IsEnabled="False">Unchecked</RadioButton>
+                <RadioButton IsChecked="True" IsEnabled="False">Checked</RadioButton>
             </StackPanel>
-        </Border>
-        <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+            <TextBlock Text="Radio Button as Button" />
             <StackPanel Orientation="Horizontal">
-                <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
-                <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大2</RadioButton>
+                <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
+                        <RadioButton
+                            Classes="Small"
+                            IsChecked="True"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            小2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton
+                            Classes="Small"
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            小1
+                        </RadioButton>
+                        <RadioButton
+                            Classes="Small"
+                            IsChecked="True"
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            小2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
+                        <RadioButton IsChecked="True" Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
+                    </StackPanel>
+                </Border>
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton IsEnabled="False" Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
+                        <RadioButton
+                            IsChecked="True"
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            默认2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
+                        <RadioButton
+                            Classes="Large"
+                            IsChecked="True"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            大2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
+                    <StackPanel Orientation="Horizontal">
+                        <RadioButton
+                            Classes="Large"
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            大1
+                        </RadioButton>
+                        <RadioButton
+                            Classes="Large"
+                            IsChecked="True"
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
+                            大2
+                        </RadioButton>
+                    </StackPanel>
+                </Border>
+            </StackPanel>
+            <TextBlock Text="Radio Button as Card" />
+            <StackPanel Orientation="Horizontal">
+                <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+                <RadioButton
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <RadioButton
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+                <RadioButton
+                    Width="300"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource CardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+            </StackPanel>
+            <TextBlock Text="Radio Button as Pure Card" />
+            <StackPanel Orientation="Horizontal">
+                <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+                <RadioButton
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource PureCardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal">
+                <RadioButton
+                    Width="300"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
+                <RadioButton
+                    Width="300"
+                    IsChecked="True"
+                    IsEnabled="False"
+                    Theme="{DynamicResource PureCardRadioButton}">
+                    <StackPanel>
+                        <TextBlock FontWeight="Bold">单选框标题</TextBlock>
+                        <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
+                    </StackPanel>
+                </RadioButton>
             </StackPanel>
-        </Border>
-        <TextBlock Text="Radio Button as Card" />
-        <StackPanel Orientation="Horizontal">
-            <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
-            <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
-            <RadioButton Width="300" Theme="{DynamicResource CardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
         </StackPanel>
-        <TextBlock Text="Radio Button as Pure Card" />
-        <StackPanel Orientation="Horizontal">
-            <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
-            <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
-            <RadioButton Width="300" Theme="{DynamicResource PureCardRadioButton}">
-                <StackPanel>
-                    <TextBlock FontWeight="Bold">单选框标题</TextBlock>
-                    <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
-                </StackPanel>
-            </RadioButton>
-        </StackPanel>
-    </StackPanel>
-</UserControl>
+    </ScrollViewer>
+</UserControl>

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

@@ -13,6 +13,7 @@
             <RepeatButton Classes="Primary">Primary</RepeatButton>
             <RepeatButton Classes="Secondary">Secondary</RepeatButton>
             <RepeatButton Classes="Tertiary">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success">Success</RepeatButton>
             <RepeatButton Classes="Warning">Warning</RepeatButton>
             <RepeatButton Classes="Danger">Danger</RepeatButton>
             <RepeatButton Classes="Primary" IsEnabled="False">Danger</RepeatButton>
@@ -22,6 +23,7 @@
             <RepeatButton Classes="Primary" Theme="{DynamicResource SolidRepeatButton}">Primary</RepeatButton>
             <RepeatButton Classes="Secondary" Theme="{DynamicResource SolidRepeatButton}">Secondary</RepeatButton>
             <RepeatButton Classes="Tertiary" Theme="{DynamicResource SolidRepeatButton}">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success" Theme="{DynamicResource SolidRepeatButton}">Success</RepeatButton>
             <RepeatButton Classes="Warning" Theme="{DynamicResource SolidRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource SolidRepeatButton}">Danger</RepeatButton>
             <RepeatButton
@@ -36,6 +38,7 @@
             <RepeatButton Classes="Primary" Theme="{DynamicResource BorderlessRepeatButton}">Primary</RepeatButton>
             <RepeatButton Classes="Secondary" Theme="{DynamicResource BorderlessRepeatButton}">Secondary</RepeatButton>
             <RepeatButton Classes="Tertiary" Theme="{DynamicResource BorderlessRepeatButton}">Tertiary</RepeatButton>
+            <RepeatButton Classes="Success" Theme="{DynamicResource BorderlessRepeatButton}">Success</RepeatButton>
             <RepeatButton Classes="Warning" Theme="{DynamicResource BorderlessRepeatButton}">Warning</RepeatButton>
             <RepeatButton Classes="Danger" Theme="{DynamicResource BorderlessRepeatButton}">Danger</RepeatButton>
             <RepeatButton

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

@@ -0,0 +1,33 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ScrollViewerDemo"
+    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"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel>
+        <ScrollViewer
+            Width="200"
+            Height="200"
+            Margin="10"
+            HorizontalScrollBarVisibility="Auto">
+            <Rectangle
+                Width="300"
+                Height="300"
+                Fill="{DynamicResource SemiYellow2}" />
+        </ScrollViewer>
+        <ScrollViewer
+            Width="200"
+            Height="200"
+            Margin="10"
+            HorizontalScrollBarVisibility="Auto"
+            Theme="{DynamicResource StaticScrollViewer}">
+            <Rectangle
+                Width="300"
+                Height="300"
+                Fill="{DynamicResource SemiYellow2}" />
+        </ScrollViewer>
+    </StackPanel>
+</UserControl>

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

@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ScrollViewerDemo : UserControl
+{
+    public ScrollViewerDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}

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

@@ -4,6 +4,7 @@
     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:system="clr-namespace:System;assembly=netstandard"
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">

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

@@ -7,23 +7,39 @@
     d:DesignHeight="450"
     d:DesignWidth="800"
     mc:Ignorable="d">
-    <StackPanel>
-        <TextBlock Text="Toggle Button" />
+    <StackPanel Spacing="20">
+        <TextBlock Text="Toggle Button (Default)" />
         <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton>Primary</ToggleButton>
+            <ToggleButton>Default</ToggleButton>
+            <ToggleButton Classes="Primary">Primary</ToggleButton>
             <ToggleButton Classes="Secondary">Secondary</ToggleButton>
             <ToggleButton Classes="Tertiary">Tertiary</ToggleButton>
+            <ToggleButton Classes="Success">Success</ToggleButton>
             <ToggleButton Classes="Warning">Warning</ToggleButton>
-            <ToggleButton Classes="Error">Error</ToggleButton>
+            <ToggleButton Classes="Danger">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsEnabled="False">Danger</ToggleButton>
         </StackPanel>
-
-        <TextBlock Margin="0,20,0,0" Text="Toggle Button Three State" />
+        <TextBlock Text="Toggle Button Checked State" />
         <StackPanel Orientation="Horizontal" Spacing="20">
-            <ToggleButton Name="button" IsThreeState="True">Primary</ToggleButton>
-            <ToggleButton Classes="Secondary" IsThreeState="True">Secondary</ToggleButton>
-            <ToggleButton Classes="Tertiary" IsThreeState="True">Tertiary</ToggleButton>
-            <ToggleButton Classes="Warning" IsThreeState="True">Warning</ToggleButton>
-            <ToggleButton Classes="Error" IsThreeState="True">Error</ToggleButton>
+            <ToggleButton IsChecked="True">Default</ToggleButton>
+            <ToggleButton Classes="Primary" IsChecked="True">Primary</ToggleButton>
+            <ToggleButton Classes="Secondary" IsChecked="True">Secondary</ToggleButton>
+            <ToggleButton Classes="Tertiary" IsChecked="True">Tertiary</ToggleButton>
+            <ToggleButton Classes="Success" IsChecked="True">Success</ToggleButton>
+            <ToggleButton Classes="Warning" IsChecked="True">Warning</ToggleButton>
+            <ToggleButton Classes="Danger" IsChecked="True">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsChecked="True" IsEnabled="False">Danger</ToggleButton>
+        </StackPanel>
+        <TextBlock Text="Toggle Button Three State" />
+        <StackPanel Orientation="Horizontal" Spacing="20">
+            <ToggleButton IsThreeState="True" IsChecked="{x:Null}">Default</ToggleButton>
+            <ToggleButton Classes="Primary" IsThreeState="True" IsChecked="{x:Null}">Primary</ToggleButton>
+            <ToggleButton Classes="Secondary" IsThreeState="True" IsChecked="{x:Null}">Secondary</ToggleButton>
+            <ToggleButton Classes="Tertiary" IsThreeState="True" IsChecked="{x:Null}">Tertiary</ToggleButton>
+            <ToggleButton Classes="Success" IsThreeState="True" IsChecked="{x:Null}">Success</ToggleButton>
+            <ToggleButton Classes="Warning" IsThreeState="True" IsChecked="{x:Null}">Warning</ToggleButton>
+            <ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}">Danger</ToggleButton>
+            <ToggleButton Classes="Danger" IsThreeState="True" IsChecked="{x:Null}" IsEnabled="False">Danger</ToggleButton>
         </StackPanel>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -11,7 +11,8 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Tip="This is a ToolTip">
             <TextBlock>Hover Here</TextBlock>
         </Border>
@@ -23,7 +24,8 @@
             Name="Border"
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Bottom">
             <ToolTip.Tip>
                 <StackPanel>
@@ -36,7 +38,8 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Top"
             ToolTip.Tip="Hello">
             <Border.Styles>
@@ -60,7 +63,8 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Top"
             ToolTip.Tip="Hello">
             <TextBlock>Top</TextBlock>
@@ -68,7 +72,8 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Left"
             ToolTip.Tip="Hello">
             <TextBlock>Left</TextBlock>
@@ -76,7 +81,8 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Right"
             ToolTip.Tip="Hello">
             <TextBlock>Right</TextBlock>
@@ -84,10 +90,11 @@
         <Border
             Margin="5"
             Padding="50,10"
-            Background="Yellow"
+            Classes="Hover"
+            Theme="{StaticResource CardBorder}"
             ToolTip.Placement="Bottom"
             ToolTip.Tip="Hello">
             <TextBlock>Bottom</TextBlock>
         </Border>
     </StackPanel>
-</UserControl>
+</UserControl>

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

@@ -1,9 +1,16 @@
 <UserControl
-    x:Class="Semi.Avalonia.Demo.Pages.TreeViewDemo" 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" d:DesignHeight="450"
-    d:DesignWidth="800" mc:Ignorable="d">
-    <Panel>
+    x:Class="Semi.Avalonia.Demo.Pages.TreeViewDemo"
+    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.Pages"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:TreeViewVm"
+    mc:Ignorable="d">
+    <StackPanel HorizontalAlignment="Left">
         <TreeView>
             <TreeViewItem Header="Level 1">
                 <TreeViewItem Header="Level 2" />
@@ -38,5 +45,12 @@
                 </TreeViewItem>
             </TreeViewItem>
         </TreeView>
-    </Panel>
+        <TreeView ItemsSource="{Binding Items}">
+            <TreeView.ItemTemplate>
+                <TreeDataTemplate ItemsSource="{Binding Items}">
+                    <TextBlock Text="{Binding Name}" />
+                </TreeDataTemplate>
+            </TreeView.ItemTemplate>
+        </TreeView>
+    </StackPanel>
 </UserControl>

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

@@ -1,6 +1,8 @@
+using System.Collections.ObjectModel;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,5 +11,34 @@ public partial class TreeViewDemo : UserControl
     public TreeViewDemo()
     {
         InitializeComponent();
+        this.DataContext = new TreeViewVm();
     }
+}
+
+public class TreeViewVm : ObservableObject
+{
+    public ObservableCollection<TreeViewItemVm> Items { get; set; }
+
+    public TreeViewVm()
+    {
+        Items = new ObservableCollection<TreeViewItemVm>()
+        {
+            new TreeViewItemVm() {Name = "Item 1", Id = "1"},
+            new TreeViewItemVm() {Name = "Item 2", Id = "2"},
+            new TreeViewItemVm() {Name = "Item 3", Id = "3", Items = new ObservableCollection<TreeViewItemVm>()
+            {
+                new TreeViewItemVm() {Name = "Item 3.1", Id = "3.1"},
+                new TreeViewItemVm() {Name = "Item 3.2", Id = "3.2"},
+                new TreeViewItemVm() {Name = "Item 3.3", Id = "3.3"},
+            },
+            },
+        };
+    }
+}
+
+public partial class TreeViewItemVm : ObservableObject
+{
+    public ObservableCollection<TreeViewItemVm> Items { get; set; }
+    public string Name { get; set; }
+    public string Id { get; set; }
 }

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

@@ -4,43 +4,20 @@
         <Nullable>enable</Nullable>
         <LangVersion>latest</LangVersion>
     </PropertyGroup>
-
+    
     <ItemGroup>
         <AvaloniaResource Include="Assets\**" />
         <TrimmerRootDescriptor Include="Roots.xml" />
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="11.0.0-preview6" />
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.0.0-preview6" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview6" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
     </ItemGroup>
 
-    <ItemGroup>
-      <AdditionalFiles Include="Pages\AutoCompleteBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\BorderDemo.axaml" />
-      <AdditionalFiles Include="Pages\ButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\CheckBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\ComboBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\ExpanderDemo.axaml" />
-      <AdditionalFiles Include="Pages\FlyoutDemo.axaml" />
-      <AdditionalFiles Include="Pages\LabelDemo.axaml" />
-      <AdditionalFiles Include="Pages\ListBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\NotificationDemo.axaml" />
-      <AdditionalFiles Include="Pages\Overview.axaml" />
-      <AdditionalFiles Include="Pages\ProgressBarDemo.axaml" />
-      <AdditionalFiles Include="Pages\RadioButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\RepeatButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\TabControlDemo.axaml" />
-      <AdditionalFiles Include="Pages\TextBlockDemo.axaml" />
-      <AdditionalFiles Include="Pages\TextBoxDemo.axaml" />
-      <AdditionalFiles Include="Pages\ToggleButtonDemo.axaml" />
-      <AdditionalFiles Include="Pages\ToggleSwitchDemo.axaml" />
-      <AdditionalFiles Include="Pages\TreeViewDemo.axaml" />
-    </ItemGroup>
-
     <ItemGroup>
       <ProjectReference Include="..\..\src\Semi.Avalonia.ColorPicker\Semi.Avalonia.ColorPicker.csproj" />
       <ProjectReference Include="..\..\src\Semi.Avalonia.DataGrid\Semi.Avalonia.DataGrid.csproj" />

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

@@ -11,11 +11,17 @@ namespace Semi.Avalonia.Demo.ViewModels;
 
 public class PaletteDemoViewModel: ObservableObject
 {
-    private readonly string[] _predefinedColorNames = { "Amber","Blue","Cyan","Green","Grey","Indigo","LightBlue","LightGreen","Lime","Orange","Pink","Purple","Red","Teal","Violet","Yellow" };
-    private IResourceDictionary _lightResourceDictionary;
-    private IResourceDictionary _darkResourceDictionary;
+    private readonly string[] _predefinedColorNames =
+    {
+        "Red", "Pink", "Purple", "Violet", "Indigo",
+        "Blue", "LightBlue", "Cyan", "Teal", "Green",
+        "LightGreen", "Lime", "Yellow", "Amber", "Orange",
+        "Grey"
+    };
+    private readonly IResourceDictionary? _lightResourceDictionary;
+    private readonly IResourceDictionary? _darkResourceDictionary;
     
-    private ColorItemViewModel _selectedColor;
+    private ColorItemViewModel _selectedColor = null!;
 
     public ColorItemViewModel SelectedColor
     {
@@ -24,14 +30,14 @@ public class PaletteDemoViewModel: ObservableObject
     }
     
     
-    private ObservableCollection<ColorListViewModel> _lightLists;
-    public ObservableCollection<ColorListViewModel> LightLists
+    private ObservableCollection<ColorListViewModel>? _lightLists;
+    public ObservableCollection<ColorListViewModel>? LightLists
     {
         get => _lightLists;
         set => SetProperty(ref _lightLists, value);
     }
-    private ObservableCollection<ColorListViewModel> _darkLists;
-    public ObservableCollection<ColorListViewModel> DarkLists
+    private ObservableCollection<ColorListViewModel>? _darkLists;
+    public ObservableCollection<ColorListViewModel>? DarkLists
     {
         get => _darkLists;
         set => SetProperty(ref _darkLists, value);
@@ -41,8 +47,8 @@ public class PaletteDemoViewModel: ObservableObject
 
     public PaletteDemoViewModel()
     {
-        _lightResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml"));
-        _darkResourceDictionary = (ResourceDictionary)AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Dark/Palette.axaml"));
+        _lightResourceDictionary = AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Light/Palette.axaml")) as ResourceDictionary;
+        _darkResourceDictionary = AvaloniaXamlLoader.Load(new Uri("avares://Semi.Avalonia/Themes/Dark/Palette.axaml")) as ResourceDictionary;
         WeakReferenceMessenger.Default.Register<PaletteDemoViewModel, ColorItemViewModel>(this, OnClickColorItem);
     }
 
@@ -110,8 +116,12 @@ public class ColorListViewModel: ObservableObject
         set => SetProperty(ref _seriesName, value);
     }
     
-    internal void Initialize(IResourceDictionary resourceDictionary, string color, bool light)
+    internal void Initialize(IResourceDictionary? resourceDictionary, string color, bool light)
     {
+        if (resourceDictionary is null)
+        {
+            return;
+        }
         SeriesName = color;
         Color = new ObservableCollection<ColorItemViewModel>();
         
@@ -124,6 +134,7 @@ public class ColorListViewModel: ObservableObject
                 {
                     string name = color + " " + i;
                     var item = new ColorItemViewModel(name, brush, key, light, i);
+                    item.ColorResourceKey = item.ResourceKey + "Color";
                     Color.Add(item);
                 } 
             }
@@ -134,28 +145,28 @@ public class ColorListViewModel: ObservableObject
 public class ColorItemViewModel : ObservableObject
 {
 
-    private IBrush _brush;
+    private IBrush _brush = null!;
     public IBrush Brush
     {
         get => _brush;
         set => SetProperty(ref _brush, value);
     }
     
-    private IBrush _textBrush;
+    private IBrush _textBrush = null!;
     public IBrush TextBrush
     {
         get => _textBrush;
         set => SetProperty(ref _textBrush, value);
     }
 
-    private string _colorDisplayName;
+    private string _colorDisplayName = null!;
     public string ColorDisplayName
     {
         get => _colorDisplayName;
         set => SetProperty(ref _colorDisplayName, value);
     }
 
-    private string _resourceKey;
+    private string _resourceKey = null!;
 
     public string ResourceKey
     {
@@ -163,7 +174,15 @@ public class ColorItemViewModel : ObservableObject
         set => SetProperty(ref _resourceKey, value);
     }
 
-    private string _hex;
+    private string _colorResourceKey = null!;
+
+    public string ColorResourceKey
+    {
+        get => _colorResourceKey;
+        set => SetProperty(ref _colorResourceKey, value);
+    }
+
+    private string _hex = null!;
 
     public string Hex
     {
@@ -177,7 +196,7 @@ public class ColorItemViewModel : ObservableObject
         Brush = brush;
         ResourceKey = resourceKey;
         Hex = brush.ToString().ToUpperInvariant();
-        if ((light && index < 5) || (!light && index > 5))
+        if ((light && index < 5) || (!light && index >= 5))
         {
             TextBrush = Brushes.Black;
         }
@@ -190,7 +209,7 @@ public class ColorItemViewModel : ObservableObject
 
 public class FunctionalColorGroupViewModel : ObservableObject
 {
-    private string _title;
+    private string _title = null!;
     public string Title
     {
         get => _title;
@@ -200,21 +219,22 @@ public class FunctionalColorGroupViewModel : ObservableObject
     public ObservableCollection<ColorItemViewModel> LightColors { get; set; } = new();
     public ObservableCollection<ColorItemViewModel> DarkColors { get; set; } = new();
 
-    public FunctionalColorGroupViewModel(string title, IResourceDictionary lightDictionary, IResourceDictionary darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
+    public FunctionalColorGroupViewModel(string title, IResourceDictionary? lightDictionary, IResourceDictionary? darkDictionary, IReadOnlyList<Tuple<string, string>> tokens)
     {
         Title = title;
         foreach (var token in tokens)
         {
             string key = token.Item1;
             string name = token.Item2;
-            if (lightDictionary.TryGetValue(key, out var lightValue))
+            if (lightDictionary?.TryGetValue(key, out var lightValue) ?? false)
             {
                 if (lightValue is ISolidColorBrush lightBrush)
                 {
                     LightColors.Add(new ColorItemViewModel(name, lightBrush, key, true, 0));
                 }
             }
-            if (darkDictionary.TryGetValue(key, out var darkValue))
+
+            if (darkDictionary?.TryGetValue(key, out var darkValue) ?? false)
             {
                 if (darkValue is ISolidColorBrush darkBrush)
                 {

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

@@ -105,6 +105,9 @@
             <TabItem Header="ComboBox">
                 <pages:ComboBoxDemo />
             </TabItem>
+            <TabItem Header="DataValidationErrors">
+                <pages:DataValidationErrorsDemo />
+            </TabItem>
             <TabItem Header="DataGrid">
                 <pages:DataGridDemo />
             </TabItem>
@@ -120,6 +123,9 @@
             <TabItem Header="GridSplitter">
                 <pages:GridSplitter />
             </TabItem>
+            <TabItem Header="HeaderedContentControl">
+                <pages:HeaderedContentControlDemo />
+            </TabItem>
             <TabItem Header="Label">
                 <pages:LabelDemo />
             </TabItem>
@@ -150,6 +156,9 @@
             <TabItem Header="RepeatButton">
                 <pages:RepeatButtonDemo />
             </TabItem>
+            <TabItem Header="ScrollViewer">
+                <pages:ScrollViewerDemo />
+            </TabItem>
             <TabItem Header="Slider">
                 <pages:SliderDemo />
             </TabItem>

src/Package.props

@@ -3,10 +3,11 @@
         <TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>10</LangVersion>
-        <Version>0.1.0-preview6</Version>
+        <Version>11.0.0</Version>
         <Authors>IRIHI Technology</Authors>
         <Description>Avalonia Theme inspired by Semi Design. </Description>
         <PackageProjectUrl>https://github.com/irihitech/Semi.Avalonia</PackageProjectUrl>
-        <AvaloniaVersion>11.0.0-preview6</AvaloniaVersion>
+        <AvaloniaVersion>11.0.0</AvaloniaVersion>
+        <PackageLicenseExpression>MIT</PackageLicenseExpression>
     </PropertyGroup>
 </Project>

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

@@ -135,8 +135,8 @@
                                                 ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
                                                 ColorModel="Hsva"
                                                 HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
-                                                IsAlphaMaxForced="True"
-                                                IsSaturationValueMaxForced="False"
+                                                IsAlphaVisible="True"
+                                                IsPerceptive="False"
                                                 IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                                 Orientation="Vertical" />
                                             <primitives:ColorSpectrum
@@ -167,7 +167,7 @@
                                                 Orientation="Vertical">
                                                 <primitives:ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
                                                 </primitives:ColorSlider.IsVisible>
                                             </primitives:ColorSlider>
@@ -188,7 +188,7 @@
                                             Margin="12"
                                             VerticalAlignment="Stretch"
                                             ItemContainerTheme="{DynamicResource ColorViewPaletteListBoxItemTheme}"
-                                            Items="{TemplateBinding PaletteColors}"
+                                            ItemsSource="{TemplateBinding PaletteColors}"
                                             SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
                                             Theme="{DynamicResource ColorViewPaletteListBoxTheme}"
                                             UseLayoutRounding="False">
@@ -323,6 +323,7 @@
                                                 Margin="0,0,12,0"
                                                 VerticalAlignment="Center"
                                                 AllowSpin="True"
+                                                Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                                 Maximum="{Binding Maximum, ElementName=Component1Slider}"
                                                 Minimum="{Binding Minimum, ElementName=Component1Slider}"
@@ -353,6 +354,7 @@
                                                 Margin="0,0,12,0"
                                                 VerticalAlignment="Center"
                                                 AllowSpin="True"
+                                                Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                                 Maximum="{Binding Maximum, ElementName=Component2Slider}"
                                                 Minimum="{Binding Minimum, ElementName=Component2Slider}"
@@ -383,6 +385,7 @@
                                                 Margin="0,0,12,0"
                                                 VerticalAlignment="Center"
                                                 AllowSpin="True"
+                                                Classes="Small"
                                                 IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                                 Maximum="{Binding Maximum, ElementName=Component3Slider}"
                                                 Minimum="{Binding Minimum, ElementName=Component3Slider}"
@@ -413,6 +416,7 @@
                                                 Margin="0,0,12,0"
                                                 VerticalAlignment="Center"
                                                 AllowSpin="True"
+                                                Classes="Small"
                                                 IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                                 Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
                                                 Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
@@ -421,8 +425,8 @@
                                                 Value="{Binding Value, ElementName=AlphaComponentSlider}">
                                                 <NumericUpDown.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <ReflectionBinding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
                                                 </NumericUpDown.IsVisible>
                                             </NumericUpDown>
@@ -443,8 +447,8 @@
                                                 TickFrequency="1">
                                                 <primitives:ColorSlider.IsVisible>
                                                     <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                                        <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                                        <ReflectionBinding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                                     </MultiBinding>
                                                 </primitives:ColorSlider.IsVisible>
                                             </primitives:ColorSlider>

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

@@ -10,6 +10,7 @@
 
     <ControlTheme x:Key="ColorSliderThumbTheme" TargetType="Thumb">
         <Setter Property="Background" Value="Transparent" />
+        <Setter Property="UseLayoutRounding" Value="False" />
         <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDefaultBorderBrush}" />
         <Setter Property="BorderThickness" Value="{DynamicResource ColorSliderThumbBorderBrush}" />
         <Setter Property="CornerRadius" Value="999" />
@@ -17,9 +18,11 @@
             <Setter.Value>
                 <ControlTemplate>
                     <Border
+                        Margin="1"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
+                        BoxShadow="{DynamicResource ColorSliderBoxShadow}"
                         CornerRadius="{TemplateBinding CornerRadius}" />
                 </ControlTemplate>
             </Setter.Value>
@@ -39,6 +42,8 @@
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid Margin="{TemplateBinding Padding}">
                             <Rectangle
+                                Width="{Binding #PART_Track.Bounds.Width}"
+                                Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
@@ -47,6 +52,8 @@
                                 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}"
@@ -56,6 +63,7 @@
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
+                                Height="12"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
@@ -125,6 +133,8 @@
                         CornerRadius="{TemplateBinding CornerRadius}">
                         <Grid Margin="{TemplateBinding Padding}">
                             <Rectangle
+                                Width="{Binding #PART_Track.Bounds.Width}"
+                                Height="{Binding #PART_Track.Bounds.Height}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 Fill="{DynamicResource ColorControlCheckeredBackgroundBrush}"
@@ -133,6 +143,8 @@
                                 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}"
@@ -142,6 +154,7 @@
                                                           Converter={StaticResource BottomRightCornerRadiusConverter}}" />
                             <Track
                                 Name="PART_Track"
+                                Width="12"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Stretch"
                                 IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
@@ -212,9 +225,11 @@
 
         <Style Selector="^:dark-selector /template/ Thumb#ColorSliderThumb">
             <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ColorSliderLightBorderBrush}" />
         </Style>
         <Style Selector="^:light-selector /template/ Thumb#ColorSliderThumb">
             <Setter Property="BorderBrush" Value="{DynamicResource ColorSliderLightBorderBrush}" />
+            <Setter Property="Foreground" Value="{DynamicResource ColorSliderDarkBorderBrush}" />
         </Style>
 
     </ControlTheme>

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

@@ -227,8 +227,8 @@
                                     ColorComponent="{Binding ThirdComponent, ElementName=ColorSpectrum}"
                                     ColorModel="Hsva"
                                     HsvColor="{Binding HsvColor, ElementName=ColorSpectrum}"
-                                    IsAlphaMaxForced="True"
-                                    IsSaturationValueMaxForced="False"
+                                    IsAlphaVisible="True"
+                                    IsPerceptive="False"
                                     IsVisible="{TemplateBinding IsColorSpectrumSliderVisible}"
                                     Orientation="Vertical" />
                                 <primitives:ColorSpectrum
@@ -259,7 +259,7 @@
                                     Orientation="Vertical">
                                     <primitives:ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
                                     </primitives:ColorSlider.IsVisible>
                                 </primitives:ColorSlider>
@@ -280,7 +280,7 @@
                                 Margin="12"
                                 VerticalAlignment="Stretch"
                                 ItemContainerTheme="{StaticResource ColorViewPaletteListBoxItemTheme}"
-                                Items="{TemplateBinding PaletteColors}"
+                                ItemsSource="{TemplateBinding PaletteColors}"
                                 SelectedItem="{Binding Color, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource DoNothingForNullConverter}, Mode=TwoWay}"
                                 Theme="{StaticResource ColorViewPaletteListBoxTheme}"
                                 UseLayoutRounding="False">
@@ -387,6 +387,7 @@
                                     Margin="0,0,12,0"
                                     VerticalAlignment="Center"
                                     AllowSpin="True"
+                                    Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                     Maximum="{Binding Maximum, ElementName=Component1Slider}"
                                     Minimum="{Binding Minimum, ElementName=Component1Slider}"
@@ -417,6 +418,7 @@
                                     Margin="0,0,12,0"
                                     VerticalAlignment="Center"
                                     AllowSpin="True"
+                                    Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                     Maximum="{Binding Maximum, ElementName=Component2Slider}"
                                     Minimum="{Binding Minimum, ElementName=Component2Slider}"
@@ -447,6 +449,7 @@
                                     Margin="0,0,12,0"
                                     VerticalAlignment="Center"
                                     AllowSpin="True"
+                                    Classes="Small"
                                     IsVisible="{TemplateBinding IsComponentTextInputVisible}"
                                     Maximum="{Binding Maximum, ElementName=Component3Slider}"
                                     Minimum="{Binding Minimum, ElementName=Component3Slider}"
@@ -477,6 +480,7 @@
                                     Margin="0,0,12,0"
                                     VerticalAlignment="Center"
                                     AllowSpin="True"
+                                    Classes="Small"
                                     IsEnabled="{TemplateBinding IsAlphaEnabled}"
                                     Maximum="{Binding Maximum, ElementName=AlphaComponentSlider}"
                                     Minimum="{Binding Minimum, ElementName=AlphaComponentSlider}"
@@ -485,8 +489,8 @@
                                     Value="{Binding Value, ElementName=AlphaComponentSlider}">
                                     <NumericUpDown.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <ReflectionBinding Path="IsComponentTextInputVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
                                     </NumericUpDown.IsVisible>
                                 </NumericUpDown>
@@ -507,8 +511,8 @@
                                     TickFrequency="1">
                                     <primitives:ColorSlider.IsVisible>
                                         <MultiBinding Converter="{x:Static BoolConverters.And}">
-                                            <Binding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <ReflectionBinding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
                                     </primitives:ColorSlider.IsVisible>
                                 </primitives:ColorSlider>

src/Semi.Avalonia.ColorPicker/Dark.axaml

@@ -1,4 +1,7 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
     <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#54A9FF" />
     <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="#1C1F23" />
@@ -29,8 +32,9 @@
     <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
 
     <x:Double x:Key="ColorSliderWidth">16</x:Double>
-    <CornerRadius x:Key="ColorSliderCornerRadius">8</CornerRadius>
+    <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
     <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
+    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #FFFFFF</BoxShadows>
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
@@ -40,4 +44,6 @@
     <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
 
     <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1AFFFFFF</BoxShadows>
+
+    <colorPicker:SemiColorDarkPalette x:Key="SemiColorPalette" />
 </ResourceDictionary>

src/Semi.Avalonia.ColorPicker/Index.axaml

@@ -3,8 +3,8 @@
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
-                <ResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.ColorPicker/Light.axaml" />
-                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.axaml" />
+                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.ColorPicker/Light.axaml" />
+                <MergeResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="avares://Semi.Avalonia.ColorPicker/Controls/ColorPicker.axaml" />

src/Semi.Avalonia.ColorPicker/Light.axaml

@@ -1,4 +1,7 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:colorPicker="clr-namespace:Semi.Avalonia.ColorPicker">
     <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="ColorViewRadioButtonForeground" Color="#0077FA" />
     <SolidColorBrush x:Key="ColorViewRadioButtonBackground" Color="White" />
@@ -29,8 +32,9 @@
     <SolidColorBrush x:Key="ColorSliderDarkBorderBrush" Color="#E4000000" />
 
     <x:Double x:Key="ColorSliderWidth">16</x:Double>
-    <CornerRadius x:Key="ColorSliderCornerRadius">8</CornerRadius>
+    <CornerRadius x:Key="ColorSliderCornerRadius">6</CornerRadius>
     <Thickness x:Key="ColorSliderThumbBorderBrush">2</Thickness>
+    <BoxShadows x:Key="ColorSliderBoxShadow">0 0 2 1 #1A000000</BoxShadows>
 
     <SolidColorBrush x:Key="ColorSpectrumBorderBrush" Opacity="0.08" Color="#1C1F23" />
 
@@ -40,4 +44,5 @@
     <CornerRadius x:Key="ColorPreviewerCornerRadius">3</CornerRadius>
 
     <BoxShadows x:Key="ColorPreviewerMainBoxShadow">0 0 14 0 #1A000000</BoxShadows>
+    <colorPicker:SemiColorLightPalette x:Key="SemiColorPalette" />
 </ResourceDictionary>

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

@@ -1,10 +1,10 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
-    <Import Project="../Package.props"/>
+    <Import Project="../Package.props" />
 
     <PropertyGroup>
         <Title>Semi.Avalonia.ColorPicker</Title>
-        <PackageReleaseNotes>Upgrade to Avalonia 11.0.0-preview6.</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Avalonia 11.0.0-rc1</PackageReleaseNotes>
     </PropertyGroup>
 
     <ItemGroup>

src/Semi.Avalonia.ColorPicker/SemiColorDarkPalette.cs

@@ -0,0 +1,231 @@
+using Avalonia.Controls;
+using Avalonia.Media;
+using Avalonia.Utilities;
+
+namespace Semi.Avalonia.ColorPicker;
+
+public class SemiColorDarkPalette: IColorPalette
+{
+    private static readonly Color[,] Colors = new Color[,]
+    {
+        {
+            //Red
+            Color.FromUInt32(0xFF6C090B),
+            Color.FromUInt32(0xFF901110),
+            Color.FromUInt32(0xFFB42019),
+            Color.FromUInt32(0xFFD73324),
+            Color.FromUInt32(0xFFFB4932),
+            Color.FromUInt32(0xFFFC725A),
+            Color.FromUInt32(0xFFFD9983),
+            Color.FromUInt32(0xFFFDBEAC),
+            Color.FromUInt32(0xFFFEE0D5),
+            Color.FromUInt32(0xFFFFF3EF),
+        },
+        {
+            //Pink
+            Color.FromUInt32(0xFF5C0730),
+            Color.FromUInt32(0xFF800E41),
+            Color.FromUInt32(0xFFA41751),
+            Color.FromUInt32(0xFFC72261),
+            Color.FromUInt32(0xFFEB2F71),
+            Color.FromUInt32(0xFFEF5686),
+            Color.FromUInt32(0xFFF37E9F),
+            Color.FromUInt32(0xFFF7A8BC),
+            Color.FromUInt32(0xFFFBD3DC),
+            Color.FromUInt32(0xFFFDEEF1),
+        },
+        {
+            //Purple
+            Color.FromUInt32(0xFF4A1061),
+            Color.FromUInt32(0xFF5E1776),
+            Color.FromUInt32(0xFF731F8A),
+            Color.FromUInt32(0xFF89289F),
+            Color.FromUInt32(0xFFA033B3),
+            Color.FromUInt32(0xFFB553C2),
+            Color.FromUInt32(0xFFCA78D1),
+            Color.FromUInt32(0xFFDDA0E1),
+            Color.FromUInt32(0xFFEFCEF0),
+            Color.FromUInt32(0xFFF7EBF7),
+        },
+        {
+            //Violet
+            Color.FromUInt32(0xFF401B77),
+            Color.FromUInt32(0xFF4C248C),
+            Color.FromUInt32(0xFF582EA0),
+            Color.FromUInt32(0xFF6439B5),
+            Color.FromUInt32(0xFF7246C9),
+            Color.FromUInt32(0xFF8865D4),
+            Color.FromUInt32(0xFFA288DF),
+            Color.FromUInt32(0xFFBEADE9),
+            Color.FromUInt32(0xFFDDD4F4),
+            Color.FromUInt32(0xFFF1EEFA),
+        },
+        {
+            //Indigo
+            Color.FromUInt32(0xFF171E65),
+            Color.FromUInt32(0xFF20297A),
+            Color.FromUInt32(0xFF29368E),
+            Color.FromUInt32(0xFF3444A3),
+            Color.FromUInt32(0xFF4053B7),
+            Color.FromUInt32(0xFF5F71C5),
+            Color.FromUInt32(0xFF8191D4),
+            Color.FromUInt32(0xFFA7B4E2),
+            Color.FromUInt32(0xFFD1D8F1),
+            Color.FromUInt32(0xFFEDEFF8),
+        },
+        {
+            //Blue
+            Color.FromUInt32(0xFF053170),
+            Color.FromUInt32(0xFF0A4694),
+            Color.FromUInt32(0xFF135CB8),
+            Color.FromUInt32(0xFF1D75DB),
+            Color.FromUInt32(0xFF2990FF),
+            Color.FromUInt32(0xFF54A9FF),
+            Color.FromUInt32(0xFF7FC1FF),
+            Color.FromUInt32(0xFFA9D7FF),
+            Color.FromUInt32(0xFFD4ECFF),
+            Color.FromUInt32(0xFFEFF8FF),
+        },
+        {
+            //LightBlue
+            Color.FromUInt32(0xFF003761),
+            Color.FromUInt32(0xFF004D85),
+            Color.FromUInt32(0xFF0366A9),
+            Color.FromUInt32(0xFF0A81CC),
+            Color.FromUInt32(0xFF139FF0),
+            Color.FromUInt32(0xFF40B4F3),
+            Color.FromUInt32(0xFF6EC8F6),
+            Color.FromUInt32(0xFF9DDCF9),
+            Color.FromUInt32(0xFFCEEEFC),
+            Color.FromUInt32(0xFFEBF8FE),
+        },
+        {
+            //Cyan
+            Color.FromUInt32(0xFF04343D),
+            Color.FromUInt32(0xFF074F5C),
+            Color.FromUInt32(0xFF0A6C7B),
+            Color.FromUInt32(0xFF0E8999),
+            Color.FromUInt32(0xFF13A8B8),
+            Color.FromUInt32(0xFF38BBC6),
+            Color.FromUInt32(0xFF62CDD4),
+            Color.FromUInt32(0xFF91DFE3),
+            Color.FromUInt32(0xFFC6EFF1),
+            Color.FromUInt32(0xFFE7F7F8),
+        },
+        {
+            //Teal
+            Color.FromUInt32(0xFF023C39),
+            Color.FromUInt32(0xFF045A55),
+            Color.FromUInt32(0xFF07776F),
+            Color.FromUInt32(0xFF0A9588),
+            Color.FromUInt32(0xFF0EB3A1),
+            Color.FromUInt32(0xFF33C2B0),
+            Color.FromUInt32(0xFF5ED1C1),
+            Color.FromUInt32(0xFF8EE1D3),
+            Color.FromUInt32(0xFFC4F0E8),
+            Color.FromUInt32(0xFFE6F7F4),
+        },
+        {
+            //Green
+            Color.FromUInt32(0xFF123C19),
+            Color.FromUInt32(0xFF1C5A25),
+            Color.FromUInt32(0xFF277731),
+            Color.FromUInt32(0xFF32953D),
+            Color.FromUInt32(0xFF3EB349),
+            Color.FromUInt32(0xFF5DC264),
+            Color.FromUInt32(0xFF7FD184),
+            Color.FromUInt32(0xFFA6E1A8),
+            Color.FromUInt32(0xFFD0F0D1),
+            Color.FromUInt32(0xFFECF7EC),
+        },
+        {
+            //LightGreen
+            Color.FromUInt32(0xFF263D13),
+            Color.FromUInt32(0xFF3B5C1D),
+            Color.FromUInt32(0xFF517B28),
+            Color.FromUInt32(0xFF679934),
+            Color.FromUInt32(0xFF7FB840),
+            Color.FromUInt32(0xFF97C65F),
+            Color.FromUInt32(0xFFB0D481),
+            Color.FromUInt32(0xFFC9E3A7),
+            Color.FromUInt32(0xFFE4F1D1),
+            Color.FromUInt32(0xFFF3F8ED),
+        },
+        {
+            //Lime
+            Color.FromUInt32(0xFF314603),
+            Color.FromUInt32(0xFF4B6905),
+            Color.FromUInt32(0xFF678D09),
+            Color.FromUInt32(0xFF84B00C),
+            Color.FromUInt32(0xFFA2D311),
+            Color.FromUInt32(0xFFAEDC3A),
+            Color.FromUInt32(0xFFBDE566),
+            Color.FromUInt32(0xFFCFED96),
+            Color.FromUInt32(0xFFE5F6C9),
+            Color.FromUInt32(0xFFF3FBE9),
+        },
+        {
+            //Yellow
+            Color.FromUInt32(0xFF544903),
+            Color.FromUInt32(0xFF7E6C06),
+            Color.FromUInt32(0xFFA88E0A),
+            Color.FromUInt32(0xFFD2AF0F),
+            Color.FromUInt32(0xFFFCCE14),
+            Color.FromUInt32(0xFFFDDE43),
+            Color.FromUInt32(0xFFFDEB71),
+            Color.FromUInt32(0xFFFEF5A0),
+            Color.FromUInt32(0xFFFEFBD0),
+            Color.FromUInt32(0xFFFFFEEC),
+        },
+        {
+            //Amber
+            Color.FromUInt32(0xFF512E09),
+            Color.FromUInt32(0xFF794B0F),
+            Color.FromUInt32(0xFFA16B16),
+            Color.FromUInt32(0xFFCA8F1E),
+            Color.FromUInt32(0xFFF2B726),
+            Color.FromUInt32(0xFFF5CA50),
+            Color.FromUInt32(0xFFF7DB7A),
+            Color.FromUInt32(0xFFFAEAA6),
+            Color.FromUInt32(0xFFFCF6D2),
+            Color.FromUInt32(0xFFFEFBED),
+        },
+        {
+            //Orange
+            Color.FromUInt32(0xFF551F03),
+            Color.FromUInt32(0xFF803506),
+            Color.FromUInt32(0xFFAA500A),
+            Color.FromUInt32(0xFFD56F0F),
+            Color.FromUInt32(0xFFFF9214),
+            Color.FromUInt32(0xFFFFAE43),
+            Color.FromUInt32(0xFFFFC772),
+            Color.FromUInt32(0xFFFFDDA1),
+            Color.FromUInt32(0xFFFFEFD0),
+            Color.FromUInt32(0xFFFFF9ED),
+        },
+        {
+            //Grey
+            Color.FromUInt32(0xFF1C1F23),
+            Color.FromUInt32(0xFF2E3238),
+            Color.FromUInt32(0xFF41464C),
+            Color.FromUInt32(0xFF555B61),
+            Color.FromUInt32(0xFF6B7075),
+            Color.FromUInt32(0xFF888D92),
+            Color.FromUInt32(0xFFA7ABB0),
+            Color.FromUInt32(0xFFC6CACD),
+            Color.FromUInt32(0xFFE6E8EA),
+            Color.FromUInt32(0xFFF9F9F9),
+        },
+    };
+    public Color GetColor(int colorIndex, int shadeIndex)
+    {
+        return Colors[
+            MathUtilities.Clamp(colorIndex, 0, ColorCount - 1),
+            MathUtilities.Clamp(shadeIndex, 0, ShadeCount - 1)
+        ];
+    }
+
+    public int ColorCount => Colors.GetLength(0);
+
+    public int ShadeCount => Colors.GetLength(1);
+}

src/Semi.Avalonia.ColorPicker/SemiColorLightPalette.cs

@@ -0,0 +1,231 @@
+using Avalonia.Controls;
+using Avalonia.Media;
+using Avalonia.Utilities;
+
+namespace Semi.Avalonia.ColorPicker;
+
+public class SemiColorLightPalette: IColorPalette
+{
+    private static readonly Color[,] Colors = new Color[,]
+    {
+        {
+            //Red
+            Color.FromUInt32(0xFFFEF2ED),
+            Color.FromUInt32(0xFFFEDDD2),
+            Color.FromUInt32(0xFFFDB7A5),
+            Color.FromUInt32(0xFFFB9078),
+            Color.FromUInt32(0xFFFA664C),
+            Color.FromUInt32(0xFFF93920),
+            Color.FromUInt32(0xFFD52515),
+            Color.FromUInt32(0xFFB2140C),
+            Color.FromUInt32(0xFF8E0805),
+            Color.FromUInt32(0xFF6A0103),
+        },
+        {
+            //Pink
+            Color.FromUInt32(0xFFFDECEF),
+            Color.FromUInt32(0xFFFBCFD8),
+            Color.FromUInt32(0xFFF6A0B5),
+            Color.FromUInt32(0xFFF27396),
+            Color.FromUInt32(0xFFED487B),
+            Color.FromUInt32(0xFFE91E63),
+            Color.FromUInt32(0xFFC51356),
+            Color.FromUInt32(0xFFA20B48),
+            Color.FromUInt32(0xFF7E053A),
+            Color.FromUInt32(0xFF5A012B),
+        },
+        {
+            //Purple
+            Color.FromUInt32(0xFFF7E9F7),
+            Color.FromUInt32(0xFFEFCAF0),
+            Color.FromUInt32(0xFFDD9BE0),
+            Color.FromUInt32(0xFFC96FD1),
+            Color.FromUInt32(0xFFB449C2),
+            Color.FromUInt32(0xFF9E28B3),
+            Color.FromUInt32(0xFF871E9E),
+            Color.FromUInt32(0xFF71168A),
+            Color.FromUInt32(0xFF5C0F75),
+            Color.FromUInt32(0xFF490A61),
+        },
+        {
+            //Violet
+            Color.FromUInt32(0xFFF3EDF9),
+            Color.FromUInt32(0xFFE2D1F4),
+            Color.FromUInt32(0xFFC4A7E9),
+            Color.FromUInt32(0xFFA67FDD),
+            Color.FromUInt32(0xFF885BD2),
+            Color.FromUInt32(0xFF6A3AC7),
+            Color.FromUInt32(0xFF572FB3),
+            Color.FromUInt32(0xFF46259E),
+            Color.FromUInt32(0xFF361C8A),
+            Color.FromUInt32(0xFF281475),
+        },
+        {
+            //Indigo
+            Color.FromUInt32(0xFFECEFF8),
+            Color.FromUInt32(0xFFD1D8F0),
+            Color.FromUInt32(0xFFA7B3E1),
+            Color.FromUInt32(0xFF8090D3),
+            Color.FromUInt32(0xFF5E6FC4),
+            Color.FromUInt32(0xFF3F51B5),
+            Color.FromUInt32(0xFF3342A1),
+            Color.FromUInt32(0xFF28348C),
+            Color.FromUInt32(0xFF1F2878),
+            Color.FromUInt32(0xFF171D63),
+        },
+        {
+            //Blue
+            Color.FromUInt32(0xFFEAF5FF),
+            Color.FromUInt32(0xFFCBE7FE),
+            Color.FromUInt32(0xFF98CDFD),
+            Color.FromUInt32(0xFF65B2FC),
+            Color.FromUInt32(0xFF3295FB),
+            Color.FromUInt32(0xFF0077FA),
+            Color.FromUInt32(0xFF0062D6),
+            Color.FromUInt32(0xFF004FB3),
+            Color.FromUInt32(0xFF003D8F),
+            Color.FromUInt32(0xFF002C6B),
+        },
+        {
+            //LightBlue
+            Color.FromUInt32(0xFFE9F7FD),
+            Color.FromUInt32(0xFFC9ECFC),
+            Color.FromUInt32(0xFF95D8F8),
+            Color.FromUInt32(0xFF62C3F5),
+            Color.FromUInt32(0xFF30ACF1),
+            Color.FromUInt32(0xFF0095EE),
+            Color.FromUInt32(0xFF007BCA),
+            Color.FromUInt32(0xFF0063A7),
+            Color.FromUInt32(0xFF004B83),
+            Color.FromUInt32(0xFF00355F),
+        },
+        {
+            //Cyan
+            Color.FromUInt32(0xFFE5F7F8),
+            Color.FromUInt32(0xFFC2EFF0),
+            Color.FromUInt32(0xFF8ADDE2),
+            Color.FromUInt32(0xFF58CBD3),
+            Color.FromUInt32(0xFF2CB8C5),
+            Color.FromUInt32(0xFF05A4B6),
+            Color.FromUInt32(0xFF038698),
+            Color.FromUInt32(0xFF016979),
+            Color.FromUInt32(0xFF004D5B),
+            Color.FromUInt32(0xFF00323D),
+        },
+        {
+            //Teal
+            Color.FromUInt32(0xFFE4F7F4),
+            Color.FromUInt32(0xFFC0F0E8),
+            Color.FromUInt32(0xFF87E0D3),
+            Color.FromUInt32(0xFF54D1C1),
+            Color.FromUInt32(0xFF27C2B0),
+            Color.FromUInt32(0xFF00B3A1),
+            Color.FromUInt32(0xFF009589),
+            Color.FromUInt32(0xFF00776F),
+            Color.FromUInt32(0xFF005955),
+            Color.FromUInt32(0xFF003C3A),
+        },
+        {
+            //Green
+            Color.FromUInt32(0xFFECF7EC),
+            Color.FromUInt32(0xFFD0F0D1),
+            Color.FromUInt32(0xFFA4E0A7),
+            Color.FromUInt32(0xFF7DD182),
+            Color.FromUInt32(0xFF5AC262),
+            Color.FromUInt32(0xFF3BB346),
+            Color.FromUInt32(0xFF30953B),
+            Color.FromUInt32(0xFF25772F),
+            Color.FromUInt32(0xFF1B5924),
+            Color.FromUInt32(0xFF113C18),
+        },
+        {
+            //LightGreen
+            Color.FromUInt32(0xFFF3F8EC),
+            Color.FromUInt32(0xFFE3F0D0),
+            Color.FromUInt32(0xFFC8E2A5),
+            Color.FromUInt32(0xFFADD37E),
+            Color.FromUInt32(0xFF93C55B),
+            Color.FromUInt32(0xFF7BB63C),
+            Color.FromUInt32(0xFF649830),
+            Color.FromUInt32(0xFF4E7926),
+            Color.FromUInt32(0xFF395B1B),
+            Color.FromUInt32(0xFF253D12),
+        },
+        {
+            //Lime
+            Color.FromUInt32(0xFFF2FAE6),
+            Color.FromUInt32(0xFFE3F6C5),
+            Color.FromUInt32(0xFFCBED8E),
+            Color.FromUInt32(0xFFB7E35B),
+            Color.FromUInt32(0xFFA7DA2C),
+            Color.FromUInt32(0xFF9BD100),
+            Color.FromUInt32(0xFF7EAE00),
+            Color.FromUInt32(0xFF638B00),
+            Color.FromUInt32(0xFF486800),
+            Color.FromUInt32(0xFF2F4600),
+        },
+        {
+            //Yellow
+            Color.FromUInt32(0xFFFFFDEA),
+            Color.FromUInt32(0xFFFEFBCB),
+            Color.FromUInt32(0xFFFDF398),
+            Color.FromUInt32(0xFFFCE865),
+            Color.FromUInt32(0xFFFBDA32),
+            Color.FromUInt32(0xFFFAC800),
+            Color.FromUInt32(0xFFD0AA00),
+            Color.FromUInt32(0xFFA78B00),
+            Color.FromUInt32(0xFF7D6A00),
+            Color.FromUInt32(0xFF534800),
+        },
+        {
+            //Amber
+            Color.FromUInt32(0xFFFEFBEB),
+            Color.FromUInt32(0xFFFCF5CE),
+            Color.FromUInt32(0xFFF9E89E),
+            Color.FromUInt32(0xFFF6D86F),
+            Color.FromUInt32(0xFFF3C641),
+            Color.FromUInt32(0xFFF0B114),
+            Color.FromUInt32(0xFFC88A0F),
+            Color.FromUInt32(0xFFA0660A),
+            Color.FromUInt32(0xFF784606),
+            Color.FromUInt32(0xFF502B03),
+        },
+        {
+            //Orange
+            Color.FromUInt32(0xFFFFF8EA),
+            Color.FromUInt32(0xFFFEEECC),
+            Color.FromUInt32(0xFFFED998),
+            Color.FromUInt32(0xFFFDC165),
+            Color.FromUInt32(0xFFFDA633),
+            Color.FromUInt32(0xFFFC8800),
+            Color.FromUInt32(0xFFD26700),
+            Color.FromUInt32(0xFFA84A00),
+            Color.FromUInt32(0xFF7E3100),
+            Color.FromUInt32(0xFF541D00),
+        },
+        {
+            //Grey
+            Color.FromUInt32(0xFFF9F9F9),
+            Color.FromUInt32(0xFFE6E8EA),
+            Color.FromUInt32(0xFFC6CACD),
+            Color.FromUInt32(0xFFA7ABB0),
+            Color.FromUInt32(0xFF888D92),
+            Color.FromUInt32(0xFF6B7075),
+            Color.FromUInt32(0xFF555B61),
+            Color.FromUInt32(0xFF41464C),
+            Color.FromUInt32(0xFF2E3238),
+            Color.FromUInt32(0xFF1C1F23),
+        },
+    };
+    public Color GetColor(int colorIndex, int shadeIndex)
+    {
+        return Colors[
+            MathUtilities.Clamp(colorIndex, 0, ColorCount - 1),
+            MathUtilities.Clamp(shadeIndex, 0, ShadeCount - 1)
+        ];
+    }
+
+    public int ColorCount => Colors.GetLength(0);
+
+    public int ShadeCount => Colors.GetLength(1);
+}

src/Semi.Avalonia.DataGrid/DataGrid.axaml

@@ -14,6 +14,13 @@
         BasedOn="{StaticResource {x:Type TextBox}}"
         TargetType="TextBox">
         <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="MinHeight" Value="20" />
+        <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="MinHeight" Value="20" />
+        </Style>
+        <Style Selector="^:error:focus /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="Border.BorderBrush" Value="Transparent" />
+        </Style>
         <Style Selector="^ /template/ DataValidationErrors">
             <Setter Property="Theme" Value="{DynamicResource TooltipDataValidationErrors}" />
         </Style>

src/Semi.Avalonia.DataGrid/Index.axaml

@@ -3,8 +3,8 @@
     <Styles.Resources>
         <ResourceDictionary>
             <ResourceDictionary.ThemeDictionaries>
-                <ResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.DataGrid/Light.axaml" />
-                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.DataGrid/Dark.axaml" />
+                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.DataGrid/Light.axaml" />
+                <MergeResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.DataGrid/Dark.axaml" />
             </ResourceDictionary.ThemeDictionaries>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceInclude Source="avares://Semi.Avalonia.DataGrid/DataGrid.axaml" />

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

@@ -1,10 +1,10 @@
 <Project Sdk="Microsoft.NET.Sdk">
 
-    <Import Project="../Package.props"/>
+    <Import Project="../Package.props" />
     
     <PropertyGroup>
         <Title>Semi.Avalonia.DataGrid</Title>
-        <PackageReleaseNotes>Upgrade to Avalonia 11.0.0-preview6.</PackageReleaseNotes>
+        <PackageReleaseNotes>Update to Avalonia 11.0.0-rc1</PackageReleaseNotes>
     </PropertyGroup>
 
     <ItemGroup>

src/Semi.Avalonia/Controls/AutoCompleteBox.axaml

@@ -12,35 +12,38 @@
         <Setter Property="AutoCompleteBox.MaxDropDownHeight" Value="{DynamicResource AutoCompleteMaxDropdownHeight}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="AutoCompleteBox">
-                <Panel>
-                    <TextBox
-                        Name="PART_TextBox"
-                        VerticalAlignment="Center"
-                        DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
-                        Watermark="{TemplateBinding Watermark}" />
-                    <Popup
-                        Name="PART_Popup"
-                        MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        MaxHeight="{TemplateBinding MaxDropDownHeight}"
-                        IsLightDismissEnabled="True"
-                        PlacementTarget="{TemplateBinding}">
-                        <Border
-                            Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
-                            HorizontalAlignment="Stretch"
-                            Background="{DynamicResource AutoCompleteBoxPopupBackground}"
-                            BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
-                            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" />
-                        </Border>
-                    </Popup>
-                </Panel>
+                <DataValidationErrors>
+                    <Panel>
+                        <TextBox
+                            Name="PART_TextBox"
+                            VerticalAlignment="Center"
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                            Theme="{DynamicResource NonErrorTextBox}"
+                            Watermark="{TemplateBinding Watermark}" />
+                        <Popup
+                            Name="PART_Popup"
+                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                            IsLightDismissEnabled="True"
+                            PlacementTarget="{TemplateBinding}">
+                            <Border
+                                Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
+                                HorizontalAlignment="Stretch"
+                                Background="{DynamicResource AutoCompleteBoxPopupBackground}"
+                                BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
+                                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" />
+                            </Border>
+                        </Popup>
+                    </Panel>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 

src/Semi.Avalonia/Controls/Button.axaml

@@ -20,6 +20,7 @@
         <Setter Property="Button.HorizontalContentAlignment" Value="Center" />
         <Setter Property="Button.VerticalContentAlignment" Value="Center" />
         <Setter Property="Button.MinHeight" Value="12" />
+        <Setter Property="Button.Cursor" Value="Hand" />
         <Setter Property="Button.Template">
             <ControlTemplate TargetType="Button">
                 <ContentPresenter
@@ -53,6 +54,9 @@
         <Style Selector="^.Tertiary">
             <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="Button.Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
         </Style>
@@ -140,6 +144,19 @@
                 <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPressedBorderBrush}" />
             </Style>
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="Button.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+            <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSuccessBorderBrush}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
+                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
+                <Setter Property="Button.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPressedBorderBrush}" />
+            </Style>
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="Button.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="Button.Background" Value="{DynamicResource ButtonSolidWarningBackground}" />

src/Semi.Avalonia/Controls/CalendarDatePicker.axaml

@@ -34,101 +34,108 @@
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="CalendarDatePicker.MinHeight" Value="{DynamicResource CalendarDatePickerDefaultHeight}" />
         <Setter Property="Padding" Value="8 0" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CalendarDatePicker">
-                <Panel
-                    x:Name="LayoutRoot"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch">
-                    <Border
-                        x:Name="Background"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
-                        <Grid
-                            HorizontalAlignment="Stretch"
-                            VerticalAlignment="Center"
-                            ColumnDefinitions="*,Auto">
-                            <TextBox
-                                Name="PART_TextBox"
-                                Grid.Column="0"
-                                MinHeight="{DynamicResource CalendarDatePickerInnerDefaultHeight}"
+                <DataValidationErrors>
+                    <Panel
+                        x:Name="LayoutRoot"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch">
+                        <Border
+                            x:Name="Background"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                            <Grid
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Center"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                Background="Transparent"
-                                BorderBrush="Transparent"
-                                BorderThickness="0"
-                                CornerRadius="{TemplateBinding CornerRadius}"
-                                Foreground="{TemplateBinding Foreground}"
-                                UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
-                                Watermark="{TemplateBinding Watermark}">
-                                <TextBox.Styles>
-                                    <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
-                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
-                                        <Setter Property="Background" Value="Transparent" />
-                                        <Setter Property="BorderBrush" Value="Transparent" />
-                                        <Setter Property="BorderThickness" Value="0" />
-                                    </Style>
-                                    <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
-                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
-                                        <Setter Property="Background" Value="Transparent" />
-                                        <Setter Property="BorderBrush" Value="Transparent" />
-                                        <Setter Property="BorderThickness" Value="0" />
-                                    </Style>
-                                    <Style Selector="TextBox#PART_TextBox:disabled">
-                                        <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
-                                            <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
+                                ColumnDefinitions="*,Auto">
+                                <TextBox
+                                    Name="PART_TextBox"
+                                    Grid.Column="0"
+                                    MinHeight="{DynamicResource CalendarDatePickerDefaultHeight}"
+                                    HorizontalAlignment="Stretch"
+                                    VerticalAlignment="Center"
+                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                    Background="Transparent"
+                                    BorderBrush="Transparent"
+                                    BorderThickness="0"
+                                    CornerRadius="{TemplateBinding CornerRadius}"
+                                    Foreground="{TemplateBinding Foreground}"
+                                    Theme="{DynamicResource NonErrorTextBox}"
+                                    UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
+                                    Watermark="{TemplateBinding Watermark}">
+                                    <TextBox.Styles>
+                                        <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
+                                            <!--  By default the TextBox has its own focused state, override this to disable it here  -->
                                             <Setter Property="Background" Value="Transparent" />
                                             <Setter Property="BorderBrush" Value="Transparent" />
+                                            <Setter Property="BorderThickness" Value="0" />
                                         </Style>
-                                    </Style>
-                                </TextBox.Styles>
-                            </TextBox>
-                            <Button
-                                Name="PART_Button"
-                                Grid.Column="1"
-                                Padding="0,0,8,0"
-                                Cursor="Hand"
-                                Focusable="False"
-                                Theme="{DynamicResource CalendarDatePickerButton}" />
-                            <Popup
-                                Name="PART_Popup"
-                                HorizontalOffset="-8"
-                                IsLightDismissEnabled="True"
-                                PlacementTarget="{TemplateBinding}"
-                                VerticalOffset="-4">
-                                <Border Margin="8" BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}">
-                                    <Calendar
-                                        Name="PART_Calendar"
-                                        DisplayDate="{TemplateBinding DisplayDate}"
-                                        DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
-                                        DisplayDateStart="{TemplateBinding DisplayDateStart}"
-                                        FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
-                                        IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
-                                        SelectedDate="{TemplateBinding SelectedDate,
-                                                                       Mode=TwoWay}" />
-                                </Border>
-                            </Popup>
-                        </Grid>
-                    </Border>
+                                        <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
+                                            <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                                            <Setter Property="Background" Value="Transparent" />
+                                            <Setter Property="BorderBrush" Value="Transparent" />
+                                            <Setter Property="BorderThickness" Value="0" />
+                                        </Style>
+                                        <Style Selector="TextBox#PART_TextBox:disabled">
+                                            <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
+                                                <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
+                                                <Setter Property="Background" Value="Transparent" />
+                                                <Setter Property="BorderBrush" Value="Transparent" />
+                                            </Style>
+                                        </Style>
+                                    </TextBox.Styles>
+                                </TextBox>
+                                <Button
+                                    Name="PART_Button"
+                                    Grid.Column="1"
+                                    Padding="0,0,8,0"
+                                    Cursor="Hand"
+                                    Focusable="False"
+                                    Theme="{DynamicResource CalendarDatePickerButton}" />
+                                <Popup
+                                    Name="PART_Popup"
+                                    HorizontalOffset="-8"
+                                    IsLightDismissEnabled="True"
+                                    PlacementTarget="{TemplateBinding}"
+                                    VerticalOffset="-4">
+                                    <Border
+                                        Margin="8"
+                                        Background="Transparent"
+                                        BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
+                                        CornerRadius="{DynamicResource CalendarCornerRadius}">
+                                        <Calendar
+                                            Name="PART_Calendar"
+                                            BorderThickness="0"
+                                            CornerRadius="{Binding $parent[Border].CornerRadius}"
+                                            DisplayDate="{TemplateBinding DisplayDate}"
+                                            DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
+                                            DisplayDateStart="{TemplateBinding DisplayDateStart}"
+                                            FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
+                                            IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
+                                            SelectedDate="{TemplateBinding SelectedDate,
+                                                                           Mode=TwoWay}" />
+                                    </Border>
+                                </Popup>
+                            </Grid>
+                        </Border>
+
+                    </Panel>
+                </DataValidationErrors>
 
-                </Panel>
             </ControlTemplate>
         </Setter>
 
         <Style Selector="^.Large">
-            <Setter Property="CalendarDatePicker.MinHeight" Value="{DynamicResource CalendarDatePickerLargeHeight}" />
             <Style Selector="^ /template/ TextBox#PART_TextBox">
                 <Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerLargeHeight}" />
             </Style>
         </Style>
         <Style Selector="^.Small">
-            <Setter Property="CalendarDatePicker.MinHeight" Value="{DynamicResource CalendarDatePickerSmallHeight}" />
             <Style Selector="^ /template/ TextBox#PART_TextBox">
                 <Setter Property="TextBox.MinHeight" Value="{DynamicResource CalendarDatePickerInnerSmallHeight}" />
             </Style>
@@ -160,6 +167,25 @@
             <Setter Property="BorderBrush" Value="{DynamicResource CalendarDatePickerFocusBorderBrush}" />
         </Style>
 
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus-within /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
+        </Style>
+
         <Style Selector="^.Bordered">
             <Style Selector="^ Border#Background">
                 <Setter Property="Border.Background" Value="{DynamicResource CalendarDatePickerBorderedDefaultBackground}" />
@@ -183,6 +209,24 @@
                     <Setter Property="Foreground" Value="{DynamicResource CalendarDatePickerDisabledIconForeground}" />
                 </Style>
             </Style>
+            <Style Selector="^:error">
+                <Style Selector="^ /template/ Border#Background">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsBorderBrush}" />
+                </Style>
+                <Style Selector="^:pointerover /template/ Border#Background">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPointerOverBorderBrush}" />
+                </Style>
+                <Style Selector="^:pressed /template/ Border#Background">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^:focus-within /template/ Border#Background">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+                </Style>
+            </Style>
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/CaptionButtons.axaml

@@ -53,7 +53,7 @@
                             Data="{DynamicResource WindowExpandGlyph}"
                             Foreground="{Binding $parent[Button].Foreground}" />
                     </Button>
-                    <Button x:Name="PART_MinimiseButton" Theme="{StaticResource CaptionButton}">
+                    <Button x:Name="PART_MinimizeButton" Theme="{StaticResource CaptionButton}">
                         <PathIcon
                             Width="12"
                             Height="12"
@@ -99,7 +99,7 @@
         <Style Selector="^:fullscreen /template/ Button#PART_RestoreButton">
             <Setter Property="IsVisible" Value="False" />
         </Style>
-        <Style Selector="^:fullscreen /template/ Button#PART_MinimiseButton">
+        <Style Selector="^:fullscreen /template/ Button#PART_MinimizeButton">
             <Setter Property="IsVisible" Value="False" />
         </Style>
     </ControlTheme>

src/Semi.Avalonia/Controls/Carousel.axaml

@@ -141,7 +141,8 @@
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         ItemContainerTheme="{DynamicResource CarouselIndicatorDotListBoxItem}"
-                        ItemsSource="{TemplateBinding Items,
+                        ItemsSource="{TemplateBinding ItemCount,
+                                                      Mode=OneWay,
                                                       Converter={StaticResource ItemsConverter}}"
                         SelectedIndex="{Binding SelectedIndex, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
                         <ListBox.ItemsPanel>

src/Semi.Avalonia/Controls/CheckBox.axaml

@@ -4,11 +4,11 @@
     x:CompileBindings="True">
     <ControlTheme x:Key="{x:Type CheckBox}" TargetType="CheckBox">
         <Setter Property="Padding" Value="8,0,0,0" />
-        <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
-        <Setter Property="Cursor" Value="Hand" />
         <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
         <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
         <Setter Property="MinHeight" Value="32" />
@@ -17,58 +17,53 @@
         <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
-                <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
-                    <Border
-                        x:Name="PART_Border"
-                        Grid.Column="0"
-                        Grid.ColumnSpan="2"
-                        HorizontalAlignment="Center"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-
-                    <Grid
-                        Grid.Column="0"
-                        Margin="0,0,0,0"
-                        VerticalAlignment="Center">
-                        <Border
-                            x:Name="NormalRectangle"
-                            Width="{DynamicResource CheckBoxBoxWidth}"
-                            Height="{DynamicResource CheckBoxBoxHeight}"
-                            Background="{DynamicResource CheckBoxDefaultBackground}"
-                            BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
-                            BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
-                            CornerRadius="{TemplateBinding CornerRadius}"
-                            UseLayoutRounding="False" />
-                        <PathIcon
-                            Name="CheckGlyph"
-                            Width="{DynamicResource CheckBoxBoxGlyphWidth}"
-                            Height="{DynamicResource CheckBoxBoxGlyphHeight}"
-                            Foreground="{DynamicResource CheckBoxGlyphFill}" />
-
+                <Border
+                    x:Name="RootBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
+                        <Grid
+                            Grid.Column="0"
+                            Margin="0,0,0,0"
+                            VerticalAlignment="Center">
+                            <Border
+                                x:Name="NormalRectangle"
+                                Width="{DynamicResource CheckBoxBoxWidth}"
+                                Height="{DynamicResource CheckBoxBoxHeight}"
+                                Background="{DynamicResource CheckBoxDefaultBackground}"
+                                BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
+                                BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
+                                CornerRadius="{TemplateBinding CornerRadius}"
+                                UseLayoutRounding="False" />
+                            <PathIcon
+                                Name="CheckGlyph"
+                                Width="{DynamicResource CheckBoxBoxGlyphWidth}"
+                                Height="{DynamicResource CheckBoxBoxGlyphHeight}"
+                                Foreground="{DynamicResource CheckBoxGlyphFill}" />
+                        </Grid>
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            Grid.Column="1"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            IsVisible="{TemplateBinding Content,Converter={x:Static ObjectConverters.IsNotNull}}"
+                            RecognizesAccessKey="True"
+                            TextWrapping="Wrap" />
                     </Grid>
-                    <ContentPresenter
-                        x:Name="ContentPresenter"
-                        Grid.Column="1"
-                        Margin="{TemplateBinding Padding}"
-                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalAlignment="Center"
-                        Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        IsVisible="{TemplateBinding Content,
-                                                    Converter={x:Static ObjectConverters.IsNotNull}}"
-                        RecognizesAccessKey="True"
-                        TextWrapping="Wrap" />
-                </Grid>
+                </Border>
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked PointerOver State  -->
+        <!--  Unchecked Pointerover State  -->
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointOverBorderBrush}" />
-                <Setter Property="Background" Value="{DynamicResource CheckBoxPointOverBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxPointeroverBackground}" />
             </Style>
         </Style>
 
@@ -102,11 +97,11 @@
                 <Setter Property="Opacity" Value="1" />
             </Style>
 
-            <!--  Checked PointerOver State  -->
+            <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointOverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
                 </Style>
             </Style>
 
@@ -145,11 +140,11 @@
                 <Setter Property="Opacity" Value="1" />
             </Style>
 
-            <!--  Checked PointerOver State  -->
+            <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointOverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
                 </Style>
             </Style>
 
@@ -178,8 +173,158 @@
         </Style>
     </ControlTheme>
 
+    <ControlTheme x:Key="SimpleCheckBox" TargetType="CheckBox">
+        <Setter Property="HorizontalAlignment" Value="Left" />
+        <Setter Property="VerticalAlignment" Value="Top" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="FontSize" Value="{DynamicResource CheckBoxFontSize}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxBoxCornerRadius}" />
+        <Setter Property="Foreground" Value="{DynamicResource CheckBoxForeground}" />
+        <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="CheckBox">
+                <Border
+                    x:Name="RootBorder"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
+                        <Grid
+                            Grid.Column="0"
+                            Margin="0,0,0,0"
+                            VerticalAlignment="Center">
+                            <Border
+                                x:Name="NormalRectangle"
+                                Width="{DynamicResource CheckBoxBoxWidth}"
+                                Height="{DynamicResource CheckBoxBoxHeight}"
+                                Background="{DynamicResource CheckBoxDefaultBackground}"
+                                BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
+                                BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
+                                CornerRadius="{TemplateBinding CornerRadius}"
+                                UseLayoutRounding="False" />
+                            <PathIcon
+                                Name="CheckGlyph"
+                                Width="{DynamicResource CheckBoxBoxGlyphWidth}"
+                                Height="{DynamicResource CheckBoxBoxGlyphHeight}"
+                                Foreground="{DynamicResource CheckBoxGlyphFill}" />
+                        </Grid>
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <!--  Unchecked Pointerover State  -->
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxPointeroverBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Pressed State  -->
+        <Style Selector="^:pressed">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPressedBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxPressedBackground}" />
+            </Style>
+        </Style>
+
+        <!--  Unchecked Disabled state  -->
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultDisabledBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxDefaultDisabledBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource CheckBoxCheckGlyph}" />
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
+                </Style>
+
+                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <Style Selector="^:indeterminate">
+            <Style Selector="^ /template/ Border#NormalRectangle">
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDefaultBorderBrush}" />
+                <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDefaultBackground}" />
+            </Style>
+
+            <Style Selector="^ /template/ PathIcon#CheckGlyph">
+                <Setter Property="Data" Value="{DynamicResource CheckBoxIndeterminateGlyph}" />
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPressedBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPressedBackground}" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Border#NormalRectangle">
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedDisabledBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedDisabledBackground}" />
+                </Style>
+
+                <Style Selector="^ /template/ Path#CheckGlyph">
+                    <Setter Property="Fill" Value="{DynamicResource CheckBoxGlyphDisabledFill}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+
     <ControlTheme x:Key="CardCheckBox" TargetType="CheckBox">
         <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
         <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
         <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
@@ -193,7 +338,11 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
+                    <Grid
+                        x:Name="RootGrid"
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        ColumnDefinitions="Auto,*">
                         <Grid Grid.Column="0" VerticalAlignment="Top">
                             <Border
                                 x:Name="NormalRectangle"
@@ -215,7 +364,6 @@
                             x:Name="ContentPresenter"
                             Grid.Column="1"
                             Margin="8,0,0,0"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="Center"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
@@ -228,10 +376,10 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked PointerOver State  -->
+        <!--  Unchecked Pointerover State  -->
         <Style Selector="^:pointerover">
             <Style Selector="^ /template/ Border#NormalRectangle">
-                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointOverBorderBrush}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxPointeroverBorderBrush}" />
             </Style>
             <Style Selector="^ /template/ Border#RootBorder">
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
@@ -274,11 +422,11 @@
                 <Setter Property="Opacity" Value="1" />
             </Style>
 
-            <!--  Checked PointerOver State  -->
+            <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointOverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#RootBorder">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
@@ -329,11 +477,11 @@
                 <Setter Property="Opacity" Value="1" />
             </Style>
 
-            <!--  Checked PointerOver State  -->
+            <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
                 <Style Selector="^ /template/ Border#NormalRectangle">
-                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointOverBorderBrush}" />
-                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCheckedPointeroverBorderBrush}" />
+                    <Setter Property="Background" Value="{DynamicResource CheckBoxCheckedPointeroverBackground}" />
                 </Style>
                 <Style Selector="^ /template/ Border#RootBorder">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
@@ -376,91 +524,85 @@
         <Setter Property="Padding" Value="{DynamicResource CheckBoxCardPadding}" />
         <Setter Property="BorderThickness" Value="{DynamicResource CheckBoxCardBorderThickness}" />
         <Setter Property="CornerRadius" Value="{DynamicResource CheckBoxCardCornerRadius}" />
+        <Setter Property="CheckBox.VerticalContentAlignment" Value="Center" />
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="CheckBox.Template">
             <ControlTemplate TargetType="CheckBox">
-                <Border
-                    Name="RootBorder"
+                <ContentPresenter
+                    x:Name="PART_ContentPresenter"
+                    Margin="{TemplateBinding Margin}"
                     Padding="{TemplateBinding Padding}"
+                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <ContentPresenter
-                        x:Name="ContentPresenter"
-                        Grid.Column="1"
-                        Margin="8,0,0,0"
-                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalAlignment="Center"
-                        Content="{TemplateBinding Content}"
-                        ContentTemplate="{TemplateBinding ContentTemplate}"
-                        IsVisible="{TemplateBinding Content,
-                                                    Converter={x:Static ObjectConverters.IsNotNull}}"
-                        RecognizesAccessKey="True"
-                        TextWrapping="Wrap" />
-                </Border>
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    RecognizesAccessKey="True"
+                    UseLayoutRounding="False" />
             </ControlTemplate>
         </Setter>
 
-        <!--  Unchecked PointerOver State  -->
+        <!--  Unchecked Pointerover State  -->
         <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ Border#RootBorder">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardPointeroverBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Pressed State  -->
         <Style Selector="^:pressed">
-            <Style Selector="^ /template/ Border#RootBorder">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardPressedBackground}" />
             </Style>
         </Style>
 
         <!--  Unchecked Disabled state  -->
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
             </Style>
         </Style>
 
         <Style Selector="^:checked">
-            <Style Selector="^ /template/ Border#RootBorder">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
                 <Setter Property="Background" Value="{DynamicResource CheckBoxCardCheckedBackground}" />
             </Style>
-            <Style Selector="^:pointerover /template/ Border#RootBorder">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed /template/ Border#RootBorder">
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
             </Style>
             <!--  Checked Disabled State  -->
             <Style Selector="^:disabled">
-                <Style Selector="^ /template/ Border#RootBorder">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
-                <Style Selector="^ /template/ ContentPresenter#ContentPresenter">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="Foreground" Value="{DynamicResource CheckBoxDisabledForeground}" />
                 </Style>
             </Style>
         </Style>
 
         <Style Selector="^:indeterminate">
-            <!--  Checked Disabled State  -->
-            <Style Selector="^ /template/ Border#RootBorder">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedBorderBrush}" />
             </Style>
-            <Style Selector="^:pointerover /template/ Border#RootBorder">
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPointeroverBorderBrush}" />
             </Style>
-            <Style Selector="^:pressed /template/ Border#RootBorder">
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
                 <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedPressedBorderBrush}" />
             </Style>
             <Style Selector="^:disabled">
-                <Style Selector="^ /template/ Border#RootBorder">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
                     <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxCardCheckedDisabledBorderBrush}" />
                 </Style>
             </Style>
         </Style>
     </ControlTheme>
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -36,115 +36,115 @@
         <Setter Property="CornerRadius" Value="{DynamicResource ComboBoxSelectorCornerRadius}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-        <Setter Property="MinHeight" Value="{DynamicResource ComboBoxDefaultHeight}" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
         <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="VerticalAlignment" Value="Top" />
-        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-        <Setter Property="PlaceholderForeground" Value="{DynamicResource ComboBoxPlaceHolderForeground}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ComboBox">
-                <Grid ColumnDefinitions="*,32">
-                    <Border
-                        x:Name="Background"
-                        Grid.Column="0"
-                        Grid.ColumnSpan="2"
-                        MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
-                    <TextBlock
-                        x:Name="PlaceholderTextBlock"
-                        Grid.Column="0"
-                        Margin="{TemplateBinding Padding}"
-                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                        Foreground="{TemplateBinding Foreground}"
-                        IsVisible="{TemplateBinding SelectionBoxItem,
-                                                    Converter={x:Static ObjectConverters.IsNull}}"
-                        Opacity="0.3"
-                        Text="{TemplateBinding PlaceholderText}" />
-                    <ContentPresenter
-                        x:Name="ContentPresenter"
-                        Grid.Column="0"
-                        Margin="{TemplateBinding Padding}"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        Content="{TemplateBinding SelectionBoxItem}"
-                        ContentTemplate="{TemplateBinding ItemTemplate}" />
-
-                    <Border
-                        x:Name="DropDownOverlay"
-                        Grid.Column="1"
-                        Width="30"
-                        Margin="0,1,1,1"
-                        HorizontalAlignment="Right"
-                        Background="Transparent"
-                        IsVisible="False" />
-
-                    <PathIcon
-                        x:Name="DropDownGlyph"
-                        Grid.Column="1"
-                        Width="12"
-                        Height="12"
-                        Margin="0,0,10,0"
-                        HorizontalAlignment="Right"
-                        VerticalAlignment="Center"
-                        Data="{DynamicResource ComboBoxIcon}"
-                        Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
-                        IsHitTestVisible="False"
-                        UseLayoutRounding="False" />
-
-                    <Popup
-                        Name="PART_Popup"
-                        Grid.Column="0"
-                        MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        MaxHeight="{TemplateBinding MaxDropDownHeight}"
-                        ClipToBounds="False"
-                        InheritsTransform="True"
-                        IsLightDismissEnabled="True"
-                        IsOpen="{TemplateBinding IsDropDownOpen,
-                                                 Mode=TwoWay}"
-                        PlacementTarget="Background"
-                        WindowManagerAddShadowHint="False">
+                <DataValidationErrors>
+                    <Grid ColumnDefinitions="*,32">
                         <Border
-                            x:Name="PopupBorder"
-                            Margin="0,4"
-                            HorizontalAlignment="Stretch"
-                            Background="{DynamicResource ComboBoxPopupBackground}"
-                            BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
-                            BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
-                            BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
-                            ClipToBounds="True"
-                            CornerRadius="6">
-                            <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
-                                <ItemsPresenter
-                                    Name="PART_ItemsPresenter"
-                                    Margin="{DynamicResource ComboBoxDropdownContentMargin}"
-                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
-                            </ScrollViewer>
-                        </Border>
-                    </Popup>
-                </Grid>
+                            x:Name="Background"
+                            Grid.Column="0"
+                            Grid.ColumnSpan="2"
+                            MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
+                            MinHeight="{DynamicResource ComboBoxDefaultHeight}"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}" />
+                        <TextBlock
+                            x:Name="PlaceholderTextBlock"
+                            Grid.Column="0"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsVisible="{TemplateBinding SelectionBoxItem,
+                                                        Converter={x:Static ObjectConverters.IsNull}}"
+                            Opacity="0.3"
+                            Text="{TemplateBinding PlaceholderText}" />
+                        <ContentPresenter
+                            x:Name="ContentPresenter"
+                            Grid.Column="0"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            Content="{TemplateBinding SelectionBoxItem}"
+                            ContentTemplate="{TemplateBinding ItemTemplate}" />
+
+                        <Border
+                            x:Name="DropDownOverlay"
+                            Grid.Column="1"
+                            Width="30"
+                            Margin="0,1,1,1"
+                            HorizontalAlignment="Right"
+                            Background="Transparent"
+                            IsVisible="False" />
+
+                        <PathIcon
+                            x:Name="DropDownGlyph"
+                            Grid.Column="1"
+                            Width="12"
+                            Height="12"
+                            Margin="0,0,10,0"
+                            HorizontalAlignment="Right"
+                            VerticalAlignment="Center"
+                            Data="{DynamicResource ComboBoxIcon}"
+                            Foreground="{DynamicResource ComboBoxIconDefaultForeground}"
+                            IsHitTestVisible="False"
+                            UseLayoutRounding="False" />
+
+                        <Popup
+                            Name="PART_Popup"
+                            Grid.Column="0"
+                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                            ClipToBounds="False"
+                            InheritsTransform="True"
+                            IsLightDismissEnabled="True"
+                            IsOpen="{TemplateBinding IsDropDownOpen,
+                                                     Mode=TwoWay}"
+                            PlacementTarget="Background"
+                            WindowManagerAddShadowHint="False">
+                            <Border
+                                x:Name="PopupBorder"
+                                Margin="0,4"
+                                HorizontalAlignment="Stretch"
+                                Background="{DynamicResource ComboBoxPopupBackground}"
+                                BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
+                                BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
+                                BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
+                                ClipToBounds="True"
+                                CornerRadius="6">
+                                <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                    <ItemsPresenter
+                                        Name="PART_ItemsPresenter"
+                                        Margin="{DynamicResource ComboBoxDropdownContentMargin}"
+                                        ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                </ScrollViewer>
+                            </Border>
+                        </Popup>
+                    </Grid>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^.Large">
+        <Style Selector="^.Large /template/ Border#Background">
             <Setter Property="ComboBox.MinHeight" Value="{DynamicResource ComboBoxLargeHeight}" />
         </Style>
-        <Style Selector="^.Small">
+        <Style Selector="^.Small /template/ Border#Background">
             <Setter Property="ComboBox.MinHeight" Value="{DynamicResource ComboBoxSmallHeight}" />
         </Style>
 
-        <!--  PointerOver State  -->
+        <!--  Pointerover State  -->
         <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorPointerOverBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPointerOverBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorPointeroverBackground}" />
+            <Setter Property="BorderBrush" Value="{DynamicResource ComboBoxSelectorPointeroverBorderBrush}" />
         </Style>
         <Style Selector="^:pointerover /template/ PathIcon#DropDownGlyph">
-            <Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPointerOverForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ComboBoxIconPointeroverForeground}" />
         </Style>
 
         <!--  Pressed State  -->
@@ -173,6 +173,25 @@
                 <Setter Property="Foreground" Value="{DynamicResource ComboBoxIconDisabledForeground}" />
             </Style>
         </Style>
+        <!--  Error State  -->
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus /template/ Border#Background">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
+        </Style>
+
         <Style Selector="^.Bordered">
             <Style Selector="^ /template/ Border#Background">
                 <Setter Property="Background" Value="{DynamicResource ComboBoxSelectorBorderedBackground}" />
@@ -201,6 +220,24 @@
                     <Setter Property="Foreground" Value="{DynamicResource ComboBoxIconDisabledForeground}" />
                 </Style>
             </Style>
+            <Style Selector="^:error">
+                <Style Selector="^ /template/ Border#Background">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsBorderBrush}" />
+                </Style>
+                <Style Selector="^:pointerover /template/ Border#Background">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsPointerOverBorderBrush}" />
+                </Style>
+                <Style Selector="^:pressed /template/ Border#Background">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^:focus /template/ Border#Background">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+                </Style>
+            </Style>
         </Style>
     </ControlTheme>
 
@@ -227,7 +264,7 @@
         </Setter>
 
         <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-            <Setter Property="Background" Value="{DynamicResource ComboBoxItemPointerOverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource ComboBoxItemPointeroverBackground}" />
         </Style>
 
         <Style Selector="^:disabled /template/ ContentPresenter#PART_ContentPresenter">
@@ -246,7 +283,7 @@
                 <Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedDisabledBackground}" />
             </Style>
             <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-                <Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedPointerOverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource ComboBoxItemSelectedPointeroverBackground}" />
             </Style>
         </Style>
     </ControlTheme>

src/Semi.Avalonia/Controls/ContextMenu.axaml

@@ -18,7 +18,7 @@
                 <Border
                     MinHeight="{TemplateBinding MinHeight}"
                     MaxWidth="{TemplateBinding MaxWidth}"
-                    Margin="0,4"
+                    Margin="4"
                     Padding="{TemplateBinding Padding}"
                     HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                     Background="{TemplateBinding Background}"
@@ -26,7 +26,7 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <ScrollViewer Theme="{StaticResource MenuScrollViewer}">
+                    <ScrollViewer Theme="{DynamicResource MenuScrollViewer}">
                         <ItemsPresenter
                             Name="PART_ItemsPresenter"
                             Grid.IsSharedSizeScope="True"

src/Semi.Avalonia/Controls/Controls.axaml

@@ -16,13 +16,15 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContentControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContextMenu.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/DataValidationErrors.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/DatePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/DateTimePickerShared.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia/Controls/DropdownButton.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/DropDownButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/EmbeddableControlRoot.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/FlyoutPresenter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/GridSplitter.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/HeaderedContentControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ItemsControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ListBox.axaml" />

src/Semi.Avalonia/Controls/DataValidationErrors.axaml

@@ -0,0 +1,108 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:collections="clr-namespace:System.Collections;assembly=netstandard">
+    <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type DataValidationErrors}" TargetType="DataValidationErrors">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DataValidationErrors">
+                <DockPanel LastChildFill="True">
+                    <ContentControl
+                        x:Name="InlineDataValidationContentControl"
+                        Margin="0,4,0,0"
+                        Content="{Binding (DataValidationErrors.Errors)}"
+                        ContentTemplate="{TemplateBinding ErrorTemplate}"
+                        DataContext="{TemplateBinding Owner}"
+                        DockPanel.Dock="Bottom"
+                        IsVisible="{Binding (DataValidationErrors.HasErrors)}" />
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                </DockPanel>
+            </ControlTemplate>
+        </Setter>
+        <Setter Property="ErrorTemplate">
+            <DataTemplate>
+                <ItemsControl
+                    x:DataType="DataValidationErrors"
+                    Foreground="{DynamicResource DataValidationErrorsForeground}"
+                    ItemsSource="{Binding}">
+                    <ItemsControl.Styles>
+                        <Style Selector="TextBlock">
+                            <Setter Property="TextWrapping" Value="Wrap" />
+                        </Style>
+                    </ItemsControl.Styles>
+                </ItemsControl>
+            </DataTemplate>
+        </Setter>
+    </ControlTheme>
+    <ControlTheme x:Key="SilentDataValidationErrors" TargetType="DataValidationErrors">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DataValidationErrors">
+                <ContentPresenter
+                    Name="PART_ContentPresenter"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Content="{TemplateBinding Content}"
+                    ContentTemplate="{TemplateBinding ContentTemplate}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="TooltipDataValidationErrors" TargetType="DataValidationErrors">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="DataValidationErrors">
+                <DockPanel LastChildFill="True">
+                    <ContentControl
+                        Content="{Binding (DataValidationErrors.Errors)}"
+                        ContentTemplate="{TemplateBinding ErrorTemplate}"
+                        DataContext="{TemplateBinding Owner}"
+                        DockPanel.Dock="Right"
+                        IsVisible="{Binding (DataValidationErrors.HasErrors)}" />
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        Content="{TemplateBinding Content}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                </DockPanel>
+            </ControlTemplate>
+        </Setter>
+        <Setter Property="ErrorTemplate">
+            <DataTemplate>
+                <Panel Name="PART_InlineErrorTemplatePanel" Background="Transparent">
+                    <Panel.Styles>
+                        <Style Selector="Panel#PART_InlineErrorTemplatePanel">
+                            <Setter Property="Margin" Value="8,0" />
+                        </Style>
+                        <Style Selector="Panel#PART_InlineErrorTemplatePanel ToolTip">
+                            <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsForeground}" />
+                        </Style>
+                        <Style Selector="Panel#PART_InlineErrorTemplatePanel ToolTip TextBlock">
+                            <Setter Property="TextWrapping" Value="Wrap" />
+                        </Style>
+                    </Panel.Styles>
+                    <ToolTip.Tip>
+                        <ItemsControl x:DataType="collections:IEnumerable" ItemsSource="{Binding}" />
+                    </ToolTip.Tip>
+                    <Path
+                        Width="14"
+                        Height="14"
+                        Data="M14,7 A7,7 0 0,0 0,7 M0,7 A7,7 0 1,0 14,7 M7,3l0,5 M7,9l0,2"
+                        Stroke="{DynamicResource DataValidationErrorsForeground}"
+                        StrokeThickness="2" />
+                </Panel>
+            </DataTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/DatePicker.axaml

@@ -125,7 +125,6 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type DatePicker}" TargetType="DatePicker">
-        <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonDefaultHeight}" />
         <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonForeground}" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonBorderBrush}" />
@@ -135,90 +134,94 @@
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DatePicker">
-                <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
-                    <Button
-                        Name="PART_FlyoutButton"
-                        Width="298"
-                        MinWidth="298"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
-                        Cursor="Hand"
-                        Foreground="{TemplateBinding Foreground}"
-                        IsEnabled="{TemplateBinding IsEnabled}"
-                        Theme="{StaticResource DateTimePickerFlyoutButton}">
-                        <Grid ColumnDefinitions="*, Auto">
-                            <Grid
-                                Name="PART_ButtonContentGrid"
-                                Grid.Column="0"
-                                VerticalAlignment="Center"
-                                ColumnDefinitions="78*,Auto,132*,Auto,78*">
-                                <TextBlock
-                                    Name="PART_DayTextBlock"
-                                    Padding="12,4"
-                                    HorizontalAlignment="Center"
+                <DataValidationErrors>
+                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                        <Button
+                            Name="PART_FlyoutButton"
+                            Width="298"
+                            MinWidth="298"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            Cursor="Hand"
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsEnabled="{TemplateBinding IsEnabled}"
+                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
+                            Theme="{StaticResource DateTimePickerFlyoutButton}">
+                            <Grid ColumnDefinitions="*, Auto">
+                                <Grid
+                                    Name="PART_ButtonContentGrid"
+                                    Grid.Column="0"
                                     VerticalAlignment="Center"
-                                    FontFamily="{TemplateBinding FontFamily}"
-                                    FontSize="{TemplateBinding FontSize}"
-                                    FontWeight="{TemplateBinding FontWeight}"
-                                    Text="day" />
-                                <TextBlock
-                                    Name="PART_MonthTextBlock"
-                                    Padding="12,4"
-                                    VerticalAlignment="Center"
-                                    FontFamily="{TemplateBinding FontFamily}"
-                                    FontSize="{TemplateBinding FontSize}"
-                                    FontWeight="{TemplateBinding FontWeight}"
-                                    Text="month"
-                                    TextAlignment="Left" />
-                                <TextBlock
-                                    Name="PART_YearTextBlock"
-                                    Padding="12,4"
-                                    HorizontalAlignment="Center"
-                                    VerticalAlignment="Center"
-                                    FontFamily="{TemplateBinding FontFamily}"
-                                    FontSize="{TemplateBinding FontSize}"
-                                    FontWeight="{TemplateBinding FontWeight}"
-                                    Text="year" />
-                                <Rectangle
-                                    x:Name="PART_FirstSpacer"
+                                    ColumnDefinitions="78*,Auto,132*,Auto,78*">
+                                    <TextBlock
+                                        Name="PART_DayTextBlock"
+                                        Padding="12,4"
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}"
+                                        Text="day" />
+                                    <TextBlock
+                                        Name="PART_MonthTextBlock"
+                                        Padding="12,4"
+                                        VerticalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}"
+                                        Text="month"
+                                        TextAlignment="Left" />
+                                    <TextBlock
+                                        Name="PART_YearTextBlock"
+                                        Padding="12,4"
+                                        HorizontalAlignment="Center"
+                                        VerticalAlignment="Center"
+                                        FontFamily="{TemplateBinding FontFamily}"
+                                        FontSize="{TemplateBinding FontSize}"
+                                        FontWeight="{TemplateBinding FontWeight}"
+                                        Text="year" />
+                                    <Rectangle
+                                        x:Name="PART_FirstSpacer"
+                                        Grid.Column="1"
+                                        Width="1"
+                                        Margin="0,4"
+                                        HorizontalAlignment="Center"
+                                        Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                    <Rectangle
+                                        x:Name="PART_SecondSpacer"
+                                        Grid.Column="3"
+                                        Width="1"
+                                        Margin="0,4"
+                                        HorizontalAlignment="Center"
+                                        Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                </Grid>
+                                <PathIcon
+                                    Name="PART_Icon"
                                     Grid.Column="1"
-                                    Width="1"
-                                    Margin="0,4"
-                                    HorizontalAlignment="Center"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-                                <Rectangle
-                                    x:Name="PART_SecondSpacer"
-                                    Grid.Column="3"
-                                    Width="1"
-                                    Margin="0,4"
-                                    HorizontalAlignment="Center"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                    Width="16"
+                                    Height="16"
+                                    Margin="0,0,8,0"
+                                    Data="{DynamicResource DatePickerIconGlyph}"
+                                    Foreground="{DynamicResource DateTimePickerIconForeground}" />
                             </Grid>
-                            <PathIcon
-                                Name="PART_Icon"
-                                Grid.Column="1"
-                                Width="16"
-                                Height="16"
-                                Margin="0,0,8,0"
-                                Data="{DynamicResource DatePickerIconGlyph}"
-                                Foreground="{DynamicResource DateTimePickerIconForeground}" />
-                        </Grid>
-                    </Button>
+                        </Button>
 
-                    <Popup
-                        Name="PART_Popup"
-                        IsLightDismissEnabled="True"
-                        Placement="Bottom"
-                        PlacementTarget="{TemplateBinding}"
-                        WindowManagerAddShadowHint="False">
-                        <DatePickerPresenter Name="PART_PickerPresenter" />
-                    </Popup>
+                        <Popup
+                            Name="PART_Popup"
+                            IsLightDismissEnabled="True"
+                            Placement="Bottom"
+                            PlacementTarget="{TemplateBinding}"
+                            WindowManagerAddShadowHint="False">
+                            <DatePickerPresenter Name="PART_PickerPresenter" />
+                        </Popup>
 
-                </Grid>
+                    </Grid>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 
@@ -230,10 +233,10 @@
         <Style Selector="^:hasnodate /template/ Button#PART_FlyoutButton TextBlock">
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
         </Style>
-        <Style Selector="^.Large">
+        <Style Selector="^.Large /template/ Button#PART_FlyoutButton">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonLargeHeight}" />
         </Style>
-        <Style Selector="^.Small">
+        <Style Selector="^.Small /template/ Button#PART_FlyoutButton">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonSmallHeight}" />
         </Style>
     </ControlTheme>

src/Semi.Avalonia/Controls/DateTimePickerShared.axaml

@@ -30,6 +30,25 @@
             <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonDisabledBorderBrush}" />
             <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonDisabledBackground}" />
         </Style>
+
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus /template/ ContentPresenter#PART_ContentPresenter">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
+        </Style>
     </ControlTheme>
 
     <!--  Theme for the items displayed in the selectors  -->

src/Semi.Avalonia/Controls/DropDownButton.axaml

@@ -16,6 +16,7 @@
         <Setter Property="DropDownButton.HorizontalContentAlignment" Value="Center" />
         <Setter Property="DropDownButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="DropDownButton.MinHeight" Value="12" />
+        <Setter Property="DropDownButton.Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DropDownButton">
                 <Border
@@ -43,7 +44,7 @@
                             Margin="0,0,8,0"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
-                            Data="{DynamicResource DropdownButtonIconGlyph}"
+                            Data="{DynamicResource DropDownButtonIconGlyph}"
                             Foreground="{TemplateBinding Foreground}"
                             IsHitTestVisible="False"
                             UseLayoutRounding="False" />
@@ -65,6 +66,9 @@
         <Style Selector="^.Tertiary">
             <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
         </Style>
@@ -96,7 +100,7 @@
         </Style>
     </ControlTheme>
 
-    <ControlTheme x:Key="SolidDropdownButton" TargetType="DropDownButton">
+    <ControlTheme x:Key="SolidDropDownButton" TargetType="DropDownButton">
         <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
         <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
         <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidPrimaryBorderBrush}" />
@@ -109,6 +113,7 @@
         <Setter Property="DropDownButton.HorizontalContentAlignment" Value="Center" />
         <Setter Property="DropDownButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="DropDownButton.MinHeight" Value="12" />
+        <Setter Property="DropDownButton.Cursor" Value="Hand" />
         <Setter Property="Template">
             <ControlTemplate TargetType="DropDownButton">
                 <Border
@@ -136,7 +141,7 @@
                             Margin="0,0,8,0"
                             HorizontalAlignment="Right"
                             VerticalAlignment="Center"
-                            Data="{DynamicResource DropdownButtonIconGlyph}"
+                            Data="{DynamicResource DropDownButtonIconGlyph}"
                             Foreground="{TemplateBinding Foreground}"
                             IsHitTestVisible="False"
                             UseLayoutRounding="False" />
@@ -188,6 +193,19 @@
                 <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPressedBorderBrush}" />
             </Style>
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+            <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessBorderBrush}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
+                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
+                <Setter Property="DropDownButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPressedBorderBrush}" />
+            </Style>
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="DropDownButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="DropDownButton.Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
@@ -223,7 +241,7 @@
     </ControlTheme>
 
     <ControlTheme
-        x:Key="BorderlessDropdownButton"
+        x:Key="BorderlessDropDownButton"
         BasedOn="{StaticResource {x:Type DropDownButton}}"
         TargetType="DropDownButton">
         <Setter Property="DropDownButton.Background" Value="Transparent" />

src/Semi.Avalonia/Controls/FlyoutPresenter.axaml

@@ -20,11 +20,11 @@
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
         <Setter Property="FlyoutPresenter.CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
-        <Setter Property="FlyoutPresenter.Margin" Value="4" />
         <Setter Property="FlyoutPresenter.Template">
             <ControlTemplate TargetType="FlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
+                    Margin="4"
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
@@ -46,4 +46,48 @@
             </ControlTemplate>
         </Setter>
     </ControlTheme>
+
+    <ControlTheme x:Key="LightFlyout" TargetType="FlyoutPresenter">
+        <Setter Property="FlyoutPresenter.HorizontalContentAlignment" Value="Stretch" />
+        <Setter Property="FlyoutPresenter.VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="FlyoutPresenter.UseLayoutRounding" Value="False" />
+        <Setter Property="FlyoutPresenter.FontWeight" Value="{DynamicResource FlyoutFontWeight}" />
+        <Setter Property="FlyoutPresenter.Background" Value="Transparent" />
+        <Setter Property="FlyoutPresenter.BorderBrush" Value="Transparent" />
+        <Setter Property="FlyoutPresenter.BorderThickness" Value="0" />
+        <Setter Property="FlyoutPresenter.Padding" Value="{DynamicResource FlyoutPadding}" />
+        <Setter Property="FlyoutPresenter.MinWidth" Value="{DynamicResource FlyoutMinWidth}" />
+        <Setter Property="FlyoutPresenter.MaxWidth" Value="{DynamicResource FlyoutMaxWidth}" />
+        <Setter Property="FlyoutPresenter.MinHeight" Value="{DynamicResource FlyoutMinHeight}" />
+        <Setter Property="FlyoutPresenter.MaxHeight" Value="{DynamicResource FlyoutMaxHeight}" />
+        <Setter Property="FlyoutPresenter.Foreground" Value="{DynamicResource FlyoutForeground}" />
+        <Setter Property="FlyoutPresenter.ClipToBounds" Value="False" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="FlyoutPresenter.CornerRadius" Value="{DynamicResource FlyoutCornerRadius}" />
+        <Setter Property="FlyoutPresenter.Margin" Value="4" />
+        <Setter Property="FlyoutPresenter.Template">
+            <ControlTemplate TargetType="FlyoutPresenter">
+                <Border
+                    Name="LayoutRoot"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    ClipToBounds="False"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    UseLayoutRounding="False">
+                    <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                        <ContentPresenter
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                            HorizontalContentAlignment="Stretch"
+                            VerticalContentAlignment="Stretch"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}" />
+                    </ScrollViewer>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/HeaderedContentControl.axaml

@@ -0,0 +1,49 @@
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    x:CompileBindings="True">
+    <ControlTheme x:Key="GroupBox" TargetType="HeaderedContentControl">
+        <Setter Property="Background" Value="{DynamicResource HeaderedContentControlDefaultBackground}" />
+        <Setter Property="BorderThickness" Value="1" />
+        <Setter Property="BorderBrush" Value="{DynamicResource HeaderedContentControlDefaultBorderBrush}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource HeaderedContentControlCornerRadius}" />
+        <Setter Property="Width" Value="400" />
+        <Setter Property="Height" Value="200" />
+        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <Setter Property="HorizontalContentAlignment" Value="Left" />
+        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="HeaderedContentControl">
+                <Border
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Stretch"
+                    Width="{TemplateBinding Width}"
+                    Height="{TemplateBinding Height}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    BorderThickness="{TemplateBinding BorderThickness}">
+                    <Grid RowDefinitions="Auto,Auto,*">
+                        <ContentPresenter
+                            Grid.Row="0"
+                            FontWeight="Bold"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Stretch"
+                            Content="{TemplateBinding Header}"
+                            ContentTemplate="{TemplateBinding HeaderTemplate}"
+                            Margin="16" />
+                        <Rectangle
+                            Grid.Row="1"
+                            Fill="{TemplateBinding BorderBrush}"
+                            Height="1" />
+                        <ContentPresenter
+                            Grid.Row="2"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}"
+                            Margin="16" />
+                    </Grid>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/Label.axaml

@@ -342,6 +342,7 @@
                 <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostYellowForeground}" />
             </Style>
             <Style Selector="^.White">
+                <Setter Property="Label.Background" Value="{DynamicResource LabelTagGhostWhiteBackground}" />
                 <Setter Property="Label.Foreground" Value="{DynamicResource LabelTagGhostWhiteForeground}" />
                 <Setter Property="Label.BorderBrush" Value="{DynamicResource LabelTagGhostWhiteBorderBrush}" />
             </Style>

src/Semi.Avalonia/Controls/ListBox.axaml

@@ -70,9 +70,9 @@
             </Style>
         </Style>
 
-        <!--  PointerOver State  -->
+        <!--  Pointerover State  -->
         <Style Selector="^:pointerover">
-            <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemPointerOverBackground}" />
+            <Setter Property="ListBoxItem.Background" Value="{DynamicResource ListBoxItemPointeroverBackground}" />
         </Style>
 
         <!--  Pressed State  -->

src/Semi.Avalonia/Controls/ManagedFileChooser.axaml

@@ -1,6 +1,7 @@
 <ResourceDictionary
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Semi.Avalonia.Converters"
     xmlns:dialogs="clr-namespace:Avalonia.Dialogs;assembly=Avalonia.Dialogs"
     xmlns:internal="clr-namespace:Avalonia.Dialogs.Internal;assembly=Avalonia.Dialogs"
     x:CompileBindings="True">
@@ -14,11 +15,11 @@
         </Border>
     </Design.PreviewWith>
 
-    <internal:ResourceSelectorConverter x:Key="Icons">
+    <converters:KeyToPathConverter x:Key="Icons">
         <PathGeometry x:Key="Icon_Folder">M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z</PathGeometry>
         <PathGeometry x:Key="Icon_File">M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z</PathGeometry>
         <PathGeometry x:Key="Icon_Volume">M6,2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2M12,4A6,6 0 0,0 6,10C6,13.31 8.69,16 12.1,16L11.22,13.77C10.95,13.29 11.11,12.68 11.59,12.4L12.45,11.9C12.93,11.63 13.54,11.79 13.82,12.27L15.74,14.69C17.12,13.59 18,11.9 18,10A6,6 0 0,0 12,4M12,9A1,1 0 0,1 13,10A1,1 0 0,1 12,11A1,1 0 0,1 11,10A1,1 0 0,1 12,9M7,18A1,1 0 0,0 6,19A1,1 0 0,0 7,20A1,1 0 0,0 8,19A1,1 0 0,0 7,18M12.09,13.27L14.58,19.58L17.17,18.08L12.95,12.77L12.09,13.27Z</PathGeometry>
-    </internal:ResourceSelectorConverter>
+    </converters:KeyToPathConverter>
     <ControlTheme x:Key="{x:Type dialogs:ManagedFileChooser}" TargetType="dialogs:ManagedFileChooser">
         <Setter Property="dialogs:ManagedFileChooser.Template">
             <ControlTemplate x:DataType="internal:ManagedFileChooserViewModel" TargetType="dialogs:ManagedFileChooser">
@@ -31,7 +32,7 @@
                         <ListBox
                             x:Name="PART_QuickLinks"
                             Focusable="False"
-                            Items="{Binding QuickLinks}"
+                            ItemsSource="{Binding QuickLinks}"
                             SelectedIndex="{Binding QuickLinksSelectedIndex}">
                             <ListBox.ItemTemplate>
                                 <DataTemplate>
@@ -74,7 +75,7 @@
                                 Margin="8,0,0,0"
                                 DockPanel.Dock="Right"
                                 IsVisible="{Binding ShowFilters}"
-                                Items="{Binding Filters}"
+                                ItemsSource="{Binding Filters}"
                                 SelectedItem="{Binding SelectedFilter}" />
                             <TextBox
                                 IsVisible="{Binding !SelectingFolder}"
@@ -142,7 +143,7 @@
                             </Grid>
                             <ListBox
                                 Name="PART_Files"
-                                Items="{Binding Items}"
+                                ItemsSource="{Binding Items}"
                                 SelectedItems="{Binding SelectedItems}"
                                 SelectionMode="{Binding SelectionMode}">
                                 <ListBox.ItemTemplate>

src/Semi.Avalonia/Controls/Menu.axaml

@@ -27,10 +27,10 @@
                         RenderTransform="{x:Null}">
                         <RepeatButton.IsVisible>
                             <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="0">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                         </RepeatButton.IsVisible>
                         <PathIcon
@@ -50,10 +50,10 @@
                         RenderTransform="{x:Null}">
                         <RepeatButton.IsVisible>
                             <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="100">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                         </RepeatButton.IsVisible>
                         <PathIcon
@@ -65,17 +65,15 @@
                     <ScrollContentPresenter
                         Name="PART_ContentPresenter"
                         Margin="{TemplateBinding Padding}"
-                        CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
-                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
-                        Content="{TemplateBinding Content}"
-                        Extent="{TemplateBinding Extent,
-                                                 Mode=TwoWay}"
-                        Viewport="{TemplateBinding Viewport,
-                                                   Mode=TwoWay}"
-                        Offset="{TemplateBinding Offset,
-                                                 Mode=TwoWay}">
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
                         <ScrollContentPresenter.GestureRecognizers>
-                            <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
+                            <ScrollGestureRecognizer
+                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
+                                IsScrollInertiaEnabled="{Binding IsScrollInertiaEnabled, RelativeSource={RelativeSource TemplatedParent}}" />
                         </ScrollContentPresenter.GestureRecognizers>
                     </ScrollContentPresenter>
                 </DockPanel>

src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml

@@ -13,31 +13,26 @@
         <Setter Property="MenuFlyoutPresenter.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-        <Setter Property="MenuFlyoutPresenter.Margin" Value="4" />
-        <Setter Property="MenuFlyoutPresenter.CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+        <Setter Property="MenuFlyoutPresenter.CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
         <Setter Property="MenuFlyoutPresenter.Template">
             <ControlTemplate TargetType="MenuFlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
-                    MinWidth="{DynamicResource MenuFlyoutMinWidth}"
-                    MinHeight="{DynamicResource MenuFlyoutMinHeight}"
-                    MaxWidth="{DynamicResource MenuFlyoutMaxWidth}"
-                    MaxHeight="{DynamicResource MenuFlyoutMaxHeight}"
-                    Margin="8"
-                    Padding="{DynamicResource MenuFlyoutPadding}"
-                    HorizontalAlignment="Stretch"
-                    Background="{DynamicResource MenuFlyoutBackground}"
-                    BorderBrush="{DynamicResource MenuFlyoutBorderBrush}"
-                    BorderThickness="{DynamicResource MenuFlyoutBorderThickness}"
+                    Margin="4"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
                     BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
-                    CornerRadius="{DynamicResource MenuFlyoutCornerRadius}">
+                    ClipToBounds="False"
+                    CornerRadius="{TemplateBinding CornerRadius}"
+                    UseLayoutRounding="False">
                     <ScrollViewer
                         HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                         Theme="{StaticResource MenuScrollViewer}"
                         VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                         <ItemsPresenter
                             Name="PART_ItemsPresenter"
-                            Margin="{DynamicResource MenuFlyoutScrollerMargin}"
+                            Margin="{TemplateBinding Padding}"
                             Grid.IsSharedSizeScope="True"
                             ItemsPanel="{TemplateBinding ItemsPanel}"
                             KeyboardNavigation.TabNavigation="Continue" />

src/Semi.Avalonia/Controls/NumericUpDown.axaml

@@ -8,32 +8,64 @@
         <Setter Property="NumericUpDown.CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
         <Setter Property="NumericUpDown.Template">
             <ControlTemplate TargetType="NumericUpDown">
-                <ButtonSpinner
-                    Name="PART_Spinner"
-                    MinWidth="0"
-                    HorizontalContentAlignment="Stretch"
-                    VerticalContentAlignment="Stretch"
-                    AllowSpin="{TemplateBinding AllowSpin}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
-                    ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
-                    <TextBox
-                        Name="PART_TextBox"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        AcceptsReturn="False"
-                        CornerRadius="{TemplateBinding CornerRadius}"
-                        FontSize="{TemplateBinding FontSize}"
-                        Foreground="{TemplateBinding Foreground}"
-                        IsReadOnly="{TemplateBinding IsReadOnly}"
-                        Text="{TemplateBinding Text}"
-                        TextWrapping="NoWrap"
-                        Watermark="{TemplateBinding Watermark}" />
-                </ButtonSpinner>
+                <DataValidationErrors>
+                    <ButtonSpinner
+                        Name="PART_Spinner"
+                        MinWidth="0"
+                        HorizontalContentAlignment="Stretch"
+                        VerticalContentAlignment="Stretch"
+                        AllowSpin="{TemplateBinding AllowSpin}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
+                        ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
+                        <TextBox
+                            Name="PART_TextBox"
+                            Height="{TemplateBinding Height}"
+                            MinHeight="{DynamicResource NumericUpDownWrapperDefaultHeight}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            AcceptsReturn="False"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            DataValidationErrors.Errors="{ReflectionBinding $parent[NumericUpDown].(DataValidationErrors.Errors)}"
+                            FontSize="{TemplateBinding FontSize}"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsReadOnly="{TemplateBinding IsReadOnly}"
+                            Text="{TemplateBinding Text}"
+                            TextWrapping="NoWrap"
+                            Theme="{DynamicResource NonErrorTextBox}"
+                            Watermark="{TemplateBinding Watermark}" />
+                    </ButtonSpinner>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
+
+        <Style Selector="^.Large /template/ TextBox#PART_TextBox">
+            <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownWrapperLargeHeight}" />
+        </Style>
+        <Style Selector="^.Small /template/ TextBox#PART_TextBox">
+            <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownWrapperSmallHeight}" />
+        </Style>
+
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ TextBox#PART_TextBox">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pointerover /template/ TextBox#PART_TextBox">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ TextBox#PART_TextBox">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus /template/ TextBox#PART_TextBox">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
+        </Style>
     </ControlTheme>
 
-</ResourceDictionary>
+</ResourceDictionary>

src/Semi.Avalonia/Controls/ProgressBar.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:semiConverters="clr-namespace:Semi.Avalonia.Converters"
     x:CompileBindings="True">
     <Design.PreviewWith>
         <StackPanel Margin="20" Spacing="20">
@@ -158,7 +159,7 @@
                             <TextBlock.Text>
                                 <MultiBinding Converter="{StaticResource StringFormatConverter}">
                                     <TemplateBinding Property="ProgressTextFormat" />
-                                    <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}" />
+                                    <ReflectionBinding Path="Value" RelativeSource="{RelativeSource TemplatedParent}" />
                                     <TemplateBinding Property="Percentage" />
                                     <TemplateBinding Property="Minimum" />
                                     <TemplateBinding Property="Maximum" />
@@ -169,15 +170,24 @@
                 </Grid>
             </ControlTemplate>
         </Setter>
+        <Style Selector="^.Primary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarPrimaryForeground}" />
+        </Style>
+        <Style Selector="^.Secondary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSecondaryForeground}" />
+        </Style>
+        <Style Selector="^.Tertiary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarTertiaryForeground}" />
+        </Style>
+        <Style Selector="^.Success">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarWarningForeground}" />
         </Style>
         <Style Selector="^.Error">
             <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarErrorForeground}" />
         </Style>
-        <Style Selector="^.Success">
-            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
-        </Style>
         <Style Selector="^:horizontal /template/ Border#PART_Indicator">
             <Setter Property="HorizontalAlignment" Value="Left" />
             <Setter Property="VerticalAlignment" Value="Stretch" />
@@ -211,13 +221,13 @@
             <Style.Animations>
                 <Animation IterationCount="Infinite" Duration="0:0:2">
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
                     </KeyFrame>
                 </Animation>
             </Style.Animations>
@@ -226,13 +236,13 @@
             <Style.Animations>
                 <Animation IterationCount="Infinite" Duration="0:0:2">
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
                     </KeyFrame>
                 </Animation>
             </Style.Animations>
@@ -241,13 +251,13 @@
             <Style.Animations>
                 <Animation IterationCount="Infinite" Duration="0:0:2">
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:1.5">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerAnimationEndPosition}" />
                     </KeyFrame>
                 </Animation>
             </Style.Animations>
@@ -256,28 +266,28 @@
             <Style.Animations>
                 <Animation IterationCount="Infinite" Duration="0:0:2">
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:0.75">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationStartPosition}" />
                     </KeyFrame>
                     <KeyFrame KeySpline="0.4,0,0.6,1" KeyTime="0:0:2">
-                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationEndPosition}" />
+                        <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2AnimationEndPosition}" />
                     </KeyFrame>
                 </Animation>
             </Style.Animations>
         </Style>
         <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator">
-            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />
+            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
         </Style>
         <Style Selector="^:horizontal /template/ Border#IndeterminateProgressBarIndicator2">
-            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />
+            <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
         </Style>
         <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator">
-            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />
+            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.ContainerWidth}" />
         </Style>
         <Style Selector="^:vertical /template/ Border#IndeterminateProgressBarIndicator2">
-            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />
+            <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateSettings.Container2Width}" />
         </Style>
         <Style Selector="^.Left">
             <Style Selector="^:horizontal /template/ LayoutTransformControl#PART_LayoutTransformControl">
@@ -326,4 +336,105 @@
             </Style>
         </Style>
     </ControlTheme>
+
+    <semiConverters:PositionToAngleConverter x:Key="AngleConverter" />
+
+    <ControlTheme x:Key="ProgressRing" TargetType="ProgressBar">
+        <Setter Property="Foreground" Value="{DynamicResource ProgressBarIndicatorBrush}" />
+        <Setter Property="Background" Value="{DynamicResource ProgressBarBackground}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ProgressBar">
+                <Panel>
+                    <Border Name="PART_Indicator" />
+                    <Arc
+                        Name="Background"
+                        RenderOptions.EdgeMode="Antialias"
+                        StartAngle="-90"
+                        Stroke="{TemplateBinding Background}"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="6"
+                        SweepAngle="360" />
+                    <Arc
+                        Name="Indicator"
+                        RenderOptions.EdgeMode="Antialias"
+                        StartAngle="-90"
+                        Stroke="{TemplateBinding Foreground}"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="6"
+                        SweepAngle="{TemplateBinding Percentage,
+                                                     Converter={StaticResource AngleConverter}}" />
+                    <Arc
+                        Name="IndeterminateIndicator"
+                        Opacity="0"
+                        RenderOptions.EdgeMode="Antialias"
+                        StartAngle="-90"
+                        Stroke="{TemplateBinding Foreground}"
+                        StrokeJoin="Round"
+                        StrokeLineCap="Round"
+                        StrokeThickness="6"
+                        SweepAngle="{TemplateBinding Percentage,
+                                                     Converter={StaticResource AngleConverter}}" />
+                    <TextBlock
+                        Name="PART_ProgressText"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        FontWeight="{DynamicResource ProgressBarTextFontWeight}"
+                        Foreground="{DynamicResource ProgressBarTextForeground}"
+                        IsVisible="{TemplateBinding ShowProgressText}">
+                        <TextBlock.Text>
+                            <MultiBinding Converter="{StaticResource StringFormatConverter}">
+                                <TemplateBinding Property="ProgressTextFormat" />
+                                <TemplateBinding Property="Value" />
+                                <TemplateBinding Property="Percentage" />
+                                <TemplateBinding Property="Minimum" />
+                                <TemplateBinding Property="Maximum" />
+                            </MultiBinding>
+                        </TextBlock.Text>
+                    </TextBlock>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^.Primary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarPrimaryForeground}" />
+        </Style>
+        <Style Selector="^.Secondary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSecondaryForeground}" />
+        </Style>
+        <Style Selector="^.Tertiary">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarTertiaryForeground}" />
+        </Style>
+        <Style Selector="^.Success">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarSuccessForeground}" />
+        </Style>
+        <Style Selector="^.Warning">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarWarningForeground}" />
+        </Style>
+        <Style Selector="^.Error">
+            <Setter Property="ProgressBar.Foreground" Value="{DynamicResource ProgressBarErrorForeground}" />
+        </Style>
+        <Style Selector="^:indeterminate /template/ Arc#Indicator">
+            <Setter Property="Opacity" Value="0" />
+        </Style>
+        <Style Selector="^:indeterminate /template/ Arc#IndeterminateIndicator">
+            <Setter Property="Opacity" Value="1" />
+            <Style.Animations>
+                <Animation IterationCount="Infinite" Duration="0:0:2">
+                    <KeyFrame KeyTime="0:0:0">
+                        <Setter Property="StartAngle" Value="-90" />
+                        <Setter Property="SweepAngle" Value="20" />
+                    </KeyFrame>
+                    <KeyFrame KeyTime="0:0:1.5">
+                        <Setter Property="StartAngle" Value="90" />
+                        <Setter Property="SweepAngle" Value="160" />
+                    </KeyFrame>
+                    <KeyFrame KeyTime="0:0:2">
+                        <Setter Property="StartAngle" Value="270" />
+                        <Setter Property="SweepAngle" Value="20" />
+                    </KeyFrame>
+                </Animation>
+            </Style.Animations>
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/RadioButton.axaml

@@ -24,6 +24,10 @@
         <Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
         <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
+        <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonBoxCornerRadius}" />
+        <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonForeground}" />
+        <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonDefaultBackground}" />
+        <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonDefaultBorderBrush}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="RadioButton">
                 <Border
@@ -35,7 +39,7 @@
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <Grid ColumnDefinitions="Auto,*">
-                        <Grid Margin="{DynamicResource RadioButtonIconMargin}" VerticalAlignment="Top">
+                        <Grid Margin="{DynamicResource RadioButtonIconMargin}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                             <Ellipse
                                 Name="OuterEllipse"
                                 Width="{DynamicResource RadioButtonIconRadius}"
@@ -72,37 +76,7 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  PointerOver State  -->
-        <Style Selector="^:checked">
-            <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
-            </Style>
-            <Style Selector="^ /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
-            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
-            </Style>
-            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
-            </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
-            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
-            </Style>
-            <Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
-        </Style>
+        <!--  Unchecked State  -->
         <Style Selector="^:unchecked">
             <Style Selector="^ /template/ Ellipse#OuterEllipse">
                 <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
@@ -111,32 +85,95 @@
             <Style Selector="^ /template/ Ellipse#CheckGlyph">
                 <Setter Property="Ellipse.Opacity" Value="0" />
             </Style>
-            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
+
+            <!--  Unchecked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointeroverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
             </Style>
-            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
+
+            <!--  Unchecked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
             </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointOverBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPointOverBackground}" />
+
+            <!--  Unchecked Disabled state  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
+                </Style>
             </Style>
-            <Style Selector="^:pointerover /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
+        </Style>
+
+        <!--  Checked State  -->
+        <Style Selector="^:checked">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDefaultBackground}" />
             </Style>
-            <Style Selector="^:pressed /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconPressedBackground}" />
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="1" />
             </Style>
-            <Style Selector="^:pressed /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
+
+            <!--  Checked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+            </Style>
+
+            <!--  Checked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPressedBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPressedBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+            </Style>
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="1" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
+                </Style>
             </Style>
         </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="ButtonRadioButton" TargetType="RadioButton">
         <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonButtonCornerRadius}" />
+        <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RadioButton.Margin" Value="2" />
         <Setter Property="RadioButton.Cursor" Value="Hand" />
         <Setter Property="RadioButton.FontWeight" Value="{DynamicResource RadioButtonButtonFontWeight}" />
@@ -163,15 +200,21 @@
                     UseLayoutRounding="False" />
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:checked">
-            <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonButtonCheckedBackground}" />
-            <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonCheckedForeground}" />
-        </Style>
         <Style Selector="^:unchecked">
             <Setter Property="RadioButton.Background" Value="Transparent" />
             <Style Selector="^:pointerover">
                 <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonButtonUncheckedPointeroverBackground}" />
             </Style>
+            <Style Selector="^:disabled">
+                <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonUncheckedDisabledForeground}" />
+            </Style>
+        </Style>
+        <Style Selector="^:checked">
+            <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonButtonCheckedBackground}" />
+            <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonCheckedForeground}" />
+            <Style Selector="^:disabled">
+                <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonCheckedDisabledForeground}" />
+            </Style>
         </Style>
         <Style Selector="^.Small">
             <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonButtonSmallFontSize}" />
@@ -189,7 +232,7 @@
         <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonCardCornerRadius}" />
         <Setter Property="RadioButton.Cursor" Value="Hand" />
         <Setter Property="RadioButton.HorizontalAlignment" Value="Left" />
-        <Setter Property="RadioButton.VerticalAlignment" Value="Top" />
+        <Setter Property="RadioButton.VerticalAlignment" Value="Center" />
         <Setter Property="RadioButton.HorizontalContentAlignment" Value="Left" />
         <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardDefaultBackground}" />
@@ -204,7 +247,10 @@
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
                     CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid ColumnDefinitions="Auto,*">
+                    <Grid
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        ColumnDefinitions="Auto,*">
                         <Grid Margin="{DynamicResource RadioButtonIconMargin}" VerticalAlignment="Top">
                             <Ellipse
                                 Name="OuterEllipse"
@@ -229,7 +275,6 @@
                         <ContentPresenter
                             Name="PART_ContentPresenter"
                             Grid.Column="1"
-                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             Content="{TemplateBinding Content}"
                             ContentTemplate="{TemplateBinding ContentTemplate}"
@@ -242,7 +287,54 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  PointerOver State  -->
+        <!--  Unchecked State  -->
+        <Style Selector="^:unchecked">
+            <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
+                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
+            </Style>
+            <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                <Setter Property="Ellipse.Opacity" Value="0" />
+            </Style>
+
+            <!--  Unchecked Pointerover State  -->
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointeroverBackground}" />
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointeroverBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
+            </Style>
+
+            <!--  Unchecked Pressed State  -->
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
+            </Style>
+
+            <!--  Unchecked Disabled state  -->
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ Ellipse#OuterEllipse">
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
+                </Style>
+                <Style Selector="^ /template/ Ellipse#CheckGlyph">
+                    <Setter Property="Ellipse.Opacity" Value="0" />
+                </Style>
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+
+        <!--  Checked State  -->
         <Style Selector="^:checked">
             <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
             <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
@@ -253,27 +345,24 @@
             <Style Selector="^ /template/ Ellipse#CheckGlyph">
                 <Setter Property="Ellipse.Opacity" Value="1" />
             </Style>
-            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
-            </Style>
-            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="1" />
-            </Style>
+
+            <!--  Checked Pointerover State  -->
             <Style Selector="^:pointerover">
-                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointOverBorderBrush}" />
+                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointeroverBorderBrush}" />
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
                 </Style>
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointOverBorderBrush}" />
-                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointOverBackground}" />
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconPointeroverBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconPointeroverBackground}" />
                 </Style>
                 <Style Selector="^ /template/ Ellipse#CheckGlyph">
                     <Setter Property="Ellipse.Opacity" Value="1" />
                 </Style>
             </Style>
+
+            <!--  Checked Pressed State  -->
             <Style Selector="^:pressed">
                 <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
@@ -284,38 +373,22 @@
                     <Setter Property="Ellipse.Opacity" Value="1" />
                 </Style>
             </Style>
-        </Style>
-        <Style Selector="^:unchecked">
-            <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDefaultBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDefaultBackground}" />
-            </Style>
-            <Style Selector="^ /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
-            </Style>
-            <Style Selector="^:disabled /template/ Ellipse#OuterEllipse">
-                <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconDisabledBorderBrush}" />
-                <Setter Property="Fill" Value="{DynamicResource RadioButtonUncheckIconDisabledBackground}" />
-            </Style>
-            <Style Selector="^:disabled /template/ Ellipse#CheckGlyph">
-                <Setter Property="Ellipse.Opacity" Value="0" />
-            </Style>
-            <Style Selector="^:pointerover">
-                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointOverBackground}" />
+
+            <!--  Checked Disabled State  -->
+            <Style Selector="^:disabled">
                 <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPointOverBorderBrush}" />
+                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonCheckIconDisabledBorderBrush}" />
+                    <Setter Property="Fill" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
                 </Style>
                 <Style Selector="^ /template/ Ellipse#CheckGlyph">
-                    <Setter Property="Ellipse.Opacity" Value="0" />
+                    <Setter Property="Ellipse.Opacity" Value="1" />
                 </Style>
-            </Style>
-            <Style Selector="^:pressed">
-                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
-                <Style Selector="^ /template/ Ellipse#OuterEllipse">
-                    <Setter Property="Stroke" Value="{DynamicResource RadioButtonUncheckIconPressedBorderBrush}" />
+                <Style Selector="^ /template/ Border#RootBorder">
+                    <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
+                    <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
                 </Style>
-                <Style Selector="^ /template/ Ellipse#CheckGlyph">
-                    <Setter Property="Ellipse.Opacity" Value="0" />
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
                 </Style>
             </Style>
         </Style>
@@ -324,10 +397,10 @@
     <ControlTheme x:Key="PureCardRadioButton" TargetType="RadioButton">
         <Setter Property="RadioButton.CornerRadius" Value="{DynamicResource RadioButtonCardCornerRadius}" />
         <Setter Property="RadioButton.Cursor" Value="Hand" />
+        <Setter Property="RadioButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RadioButton.BorderThickness" Value="1" />
         <Setter Property="RadioButton.FontSize" Value="{DynamicResource RadioButtonFontSize}" />
         <Setter Property="RadioButton.Padding" Value="{DynamicResource RadioButtonCardPadding}" />
-        <Setter Property="RadioButton.Foreground" Value="{DynamicResource RadioButtonButtonUncheckedForeground}" />
         <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardDefaultBackground}" />
         <Setter Property="RadioButton.Template">
             <ControlTemplate TargetType="RadioButton">
@@ -344,29 +417,40 @@
                     ContentTemplate="{TemplateBinding ContentTemplate}"
                     CornerRadius="{TemplateBinding CornerRadius}"
                     RecognizesAccessKey="True"
-                    TextElement.FontSize="{TemplateBinding FontSize}"
-                    TextElement.FontWeight="{TemplateBinding FontWeight}"
                     UseLayoutRounding="False" />
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:checked">
-            <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
-            <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
-            <Style Selector="^:pointerover">
-                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointOverBorderBrush}" />
-            </Style>
-            <Style Selector="^:pressed">
-                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
-            </Style>
-        </Style>
         <Style Selector="^:unchecked">
             <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardDefaultBorderBrush}" />
             <Style Selector="^:pointerover">
-                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointOverBackground}" />
+                <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPointeroverBackground}" />
             </Style>
             <Style Selector="^:pressed">
                 <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardUncheckPressedBackground}" />
             </Style>
+            <Style Selector="^:disabled">
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
+                </Style>
+            </Style>
         </Style>
+        <Style Selector="^:checked">
+            <Setter Property="RadioButton.Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
+            <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckDefaultBorderBrush}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="RadioButton.BorderBrush" Value="{DynamicResource RadioButtonCardCheckPressedBorderBrush}" />
+            </Style>
+            <Style Selector="^:disabled">
+                <Setter Property="BorderBrush" Value="{DynamicResource RadioButtonCheckIconDisabledBackground}" />
+                <Setter Property="Background" Value="{DynamicResource RadioButtonCardCheckedBackground}" />
+                <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+                    <Setter Property="Foreground" Value="{DynamicResource RadioButtonDisabledForeground}" />
+                </Style>
+            </Style>
+        </Style>
+
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/RepeatButton.axaml

@@ -15,6 +15,7 @@
         <Setter Property="RepeatButton.HorizontalContentAlignment" Value="Center" />
         <Setter Property="RepeatButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="RepeatButton.MinHeight" Value="12" />
+        <Setter Property="RepeatButton.Cursor" Value="Hand" />
         <Setter Property="RepeatButton.Template">
             <ControlTemplate TargetType="RepeatButton">
                 <ContentPresenter
@@ -48,6 +49,9 @@
         <Style Selector="^.Tertiary">
             <Setter Property="RepeatButton.Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="RepeatButton.Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="RepeatButton.Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
         </Style>
@@ -126,6 +130,19 @@
                 <Setter Property="RepeatButton.BorderBrush" Value="{DynamicResource ButtonSolidTertiaryPressedBorderBrush}" />
             </Style>
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="RepeatButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+            <Setter Property="RepeatButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessBorderBrush}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
+                <Setter Property="RepeatButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPointeroverBorderBrush}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
+                <Setter Property="RepeatButton.BorderBrush" Value="{DynamicResource ButtonSolidSuccessPressedBorderBrush}" />
+            </Style>
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="RepeatButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             <Setter Property="RepeatButton.Background" Value="{DynamicResource ButtonSolidWarningBackground}" />

src/Semi.Avalonia/Controls/ScrollViewer.axaml

@@ -21,6 +21,22 @@
             <dialog:ManagedFileChooser />
         </StackPanel>
     </Design.PreviewWith>
+    <ControlTheme x:Key="ScrollBarRepeatButton" TargetType="{x:Type RepeatButton}">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Foreground" Value="Gray" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}">
+                    <ContentPresenter
+                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                        Content="{TemplateBinding Content}"
+                        Foreground="{TemplateBinding Foreground}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
     <ControlTheme x:Key="{x:Type ScrollBar}" TargetType="ScrollBar">
         <Setter Property="Cursor" Value="Arrow" />
         <Style Selector="^:horizontal">
@@ -34,11 +50,14 @@
                                 Grid.Row="0"
                                 Grid.Column="0"
                                 MinWidth="{DynamicResource ScrollBarThickness}"
+                                Padding="4,0"
                                 VerticalAlignment="Center"
-                                Classes="repeat"
-                                CornerRadius="0"
-                                Focusable="False">
-                                <Path Data="M 4 0 L 4 8 L 0 4 Z" />
+                                Focusable="False"
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                <PathIcon
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarLeftGlyph}" />
                             </RepeatButton>
                             <Track
                                 Grid.Column="1"
@@ -54,9 +73,9 @@
                                         MinWidth="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
@@ -64,9 +83,9 @@
                                         MinWidth="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
@@ -74,11 +93,15 @@
                                 Name="PART_LineDownButton"
                                 Grid.Column="2"
                                 MinWidth="{DynamicResource ScrollBarThickness}"
+                                Padding="4,0"
                                 VerticalAlignment="Center"
-                                Classes="repeat"
-                                CornerRadius="0"
-                                Focusable="False">
-                                <Path Data="M 0 0 L 4 4 L 0 8 Z" />
+                                VerticalContentAlignment="Center"
+                                Focusable="False"
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                <PathIcon
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarRightGlyph}" />
                             </RepeatButton>
                         </Grid>
                     </Border>
@@ -95,11 +118,16 @@
                                 Name="PART_LineUpButton"
                                 Grid.Row="0"
                                 MinHeight="{DynamicResource ScrollBarThickness}"
-                                HorizontalAlignment="Center"
-                                Classes="repeat"
-                                CornerRadius="0"
-                                Focusable="False">
-                                <Path Data="M 0 4 L 8 4 L 4 0 Z" />
+                                Padding="0,4"
+                                VerticalAlignment="Center"
+                                HorizontalContentAlignment="Center"
+                                VerticalContentAlignment="Center"
+                                Focusable="False"
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                <PathIcon
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarUpGlyph}" />
                             </RepeatButton>
                             <Track
                                 Grid.Row="1"
@@ -116,9 +144,9 @@
                                         MinHeight="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.DecreaseButton>
                                 <Track.IncreaseButton>
                                     <RepeatButton
@@ -126,9 +154,9 @@
                                         MinHeight="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
-                                        Classes="repeattrack"
                                         CornerRadius="0"
-                                        Focusable="False" />
+                                        Focusable="False"
+                                        Theme="{DynamicResource ScrollBarRepeatButton}" />
                                 </Track.IncreaseButton>
                                 <Thumb Name="thumb" />
                             </Track>
@@ -136,11 +164,15 @@
                                 Name="PART_LineDownButton"
                                 Grid.Row="2"
                                 MinHeight="{DynamicResource ScrollBarThickness}"
-                                HorizontalAlignment="Center"
-                                Classes="repeat"
-                                CornerRadius="0"
-                                Focusable="False">
-                                <Path Data="M 0 0 L 4 4 L 8 0 Z" />
+                                Padding="0,4"
+                                HorizontalContentAlignment="Center"
+                                VerticalContentAlignment="Center"
+                                Focusable="False"
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
+                                <PathIcon
+                                    Width="10"
+                                    Height="10"
+                                    Data="{DynamicResource ScrollBarDownGlyph}" />
                             </RepeatButton>
                         </Grid>
                     </Border>
@@ -161,10 +193,7 @@
             </Setter>
         </Style>
         <Style Selector="^ /template/ Thumb#thumb:pointerover">
-            <Setter Property="Background" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
-        </Style>
-        <Style Selector="^ /template/ Thumb#thumb:pressed">
-            <Setter Property="Background" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarThumbPointeroverForeground}" />
         </Style>
         <Style Selector="^:horizontal /template/ Thumb#thumb">
             <Setter Property="MinWidth" Value="{DynamicResource ScrollBarThickness}" />
@@ -174,30 +203,14 @@
             <Setter Property="MinHeight" Value="{DynamicResource ScrollBarThickness}" />
             <Setter Property="Width" Value="{DynamicResource ScrollBarThumbThickness}" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton.repeat">
-            <Setter Property="Padding" Value="2" />
-            <Setter Property="BorderThickness" Value="0" />
+        <Style Selector="^ /template/ RepeatButton &gt; PathIcon">
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton.repeattrack">
-            <Setter Property="Background" Value="Transparent" />
-            <Setter Property="Template">
-                <ControlTemplate TargetType="RepeatButton">
-                    <Border Background="{TemplateBinding Background}" />
-                </ControlTemplate>
-            </Setter>
-            <Style Selector="^:pointerover">
-                <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
-            </Style>
-            <Style Selector="^:pressed">
-                <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
-            </Style>
+        <Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon">
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
         </Style>
-
-        <Style Selector="^ /template/ RepeatButton &gt; Path">
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
-        </Style>
-        <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonPointerOverForeground}" />
+        <Style Selector="^ /template/ RepeatButton:pressed &gt; PathIcon">
+            <Setter Property="RenderTransform" Value="scale(0.92)" />
         </Style>
 
     </ControlTheme>
@@ -208,50 +221,34 @@
                 <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
                     <ScrollContentPresenter
                         Name="PART_ContentPresenter"
+                        Grid.RowSpan="2"
+                        Grid.ColumnSpan="2"
                         Padding="{TemplateBinding Padding}"
                         Background="{TemplateBinding Background}"
-                        CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
-                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
-                        Content="{TemplateBinding Content}"
-                        Extent="{TemplateBinding Extent,
-                                                 Mode=TwoWay}"
-                        IsScrollChainingEnabled="{TemplateBinding IsScrollChainingEnabled}"
-                        Viewport="{TemplateBinding Viewport,
-                                                   Mode=TwoWay}"
-                        Offset="{TemplateBinding Offset,
-                                                 Mode=TwoWay}">
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
+                        ScrollViewer.IsScrollInertiaEnabled="{TemplateBinding IsScrollInertiaEnabled}"
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
                         <ScrollContentPresenter.GestureRecognizers>
-                            <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
+                            <ScrollGestureRecognizer
+                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
+                                IsScrollInertiaEnabled="{Binding (ScrollViewer.IsScrollInertiaEnabled), ElementName=PART_ContentPresenter}" />
                         </ScrollContentPresenter.GestureRecognizers>
                     </ScrollContentPresenter>
                     <ScrollBar
-                        Name="horizontalScrollBar"
+                        Name="PART_HorizontalScrollBar"
                         Grid.Row="1"
                         Grid.Column="0"
-                        Focusable="False"
-                        LargeChange="{Binding LargeChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        Maximum="{TemplateBinding HorizontalScrollBarMaximum}"
                         Opacity="0"
-                        Orientation="Horizontal"
-                        SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}"
-                        Visibility="{TemplateBinding HorizontalScrollBarVisibility}"
-                        Value="{TemplateBinding HorizontalScrollBarValue,
-                                                Mode=TwoWay}" />
+                        Orientation="Horizontal" />
                     <ScrollBar
-                        Name="verticalScrollBar"
+                        Name="PART_VerticalScrollBar"
                         Grid.Row="0"
                         Grid.Column="1"
-                        Focusable="False"
-                        LargeChange="{Binding LargeChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
-                        Maximum="{TemplateBinding VerticalScrollBarMaximum}"
                         Opacity="0"
-                        Orientation="Vertical"
-                        SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
-                        ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}"
-                        Visibility="{TemplateBinding VerticalScrollBarVisibility}"
-                        Value="{TemplateBinding VerticalScrollBarValue,
-                                                Mode=TwoWay}" />
+                        Orientation="Vertical" />
                     <Panel
                         Grid.Row="1"
                         Grid.Column="1"
@@ -260,15 +257,55 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ ScrollBar#horizontalScrollBar">
+            <Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar">
                 <Setter Property="Opacity" Value="1" />
             </Style>
-            <Style Selector="^ /template/ ScrollBar#verticalScrollBar">
+            <Style Selector="^ /template/ ScrollBar#PART_VerticalScrollBar">
                 <Setter Property="Opacity" Value="1" />
             </Style>
         </Style>
     </ControlTheme>
 
+    <ControlTheme x:Key="StaticScrollViewer" TargetType="ScrollViewer">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ScrollViewer">
+                <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
+                    <ScrollContentPresenter
+                        Name="PART_ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
+                        ScrollViewer.IsScrollInertiaEnabled="{TemplateBinding IsScrollInertiaEnabled}"
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
+                        <ScrollContentPresenter.GestureRecognizers>
+                            <ScrollGestureRecognizer
+                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
+                                IsScrollInertiaEnabled="{Binding (ScrollViewer.IsScrollInertiaEnabled), ElementName=PART_ContentPresenter}" />
+                        </ScrollContentPresenter.GestureRecognizers>
+                    </ScrollContentPresenter>
+                    <ScrollBar
+                        Name="PART_HorizontalScrollBar"
+                        Grid.Row="1"
+                        Grid.Column="0"
+                        Orientation="Horizontal" />
+                    <ScrollBar
+                        Name="PART_VerticalScrollBar"
+                        Grid.Row="0"
+                        Grid.Column="1"
+                        Orientation="Vertical" />
+                    <Panel
+                        Grid.Row="1"
+                        Grid.Column="1"
+                        Background="{DynamicResource ColorScrollBarBackground}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
     <ControlTheme x:Key="SimpleMenuScrollViewer" TargetType="ScrollViewer">
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
@@ -281,10 +318,10 @@
                         DockPanel.Dock="Top">
                         <RepeatButton.IsVisible>
                             <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="0">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                         </RepeatButton.IsVisible>
                         <Path Data="M 0 4 L 8 4 L 4 0 Z" />
@@ -296,26 +333,15 @@
                         DockPanel.Dock="Bottom">
                         <RepeatButton.IsVisible>
                             <MultiBinding Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}" ConverterParameter="100">
-                                <Binding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                         </RepeatButton.IsVisible>
                         <Path Data="M 0 0 L 4 4 L 8 0 Z" />
                     </RepeatButton>
-                    <ScrollContentPresenter
-                        Name="PART_ContentPresenter"
-                        Margin="{TemplateBinding Padding}"
-                        CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
-                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
-                        Content="{TemplateBinding Content}"
-                        Extent="{TemplateBinding Extent,
-                                                 Mode=TwoWay}"
-                        Viewport="{TemplateBinding Viewport,
-                                                   Mode=TwoWay}"
-                        Offset="{TemplateBinding Offset,
-                                                 Mode=TwoWay}" />
+                    <ScrollContentPresenter Name="PART_ContentPresenter" Margin="{TemplateBinding Padding}" />
                 </DockPanel>
             </ControlTemplate>
         </Setter>
@@ -324,7 +350,7 @@
         </Style>
 
         <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
-            <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointerOverForeground}" />
+            <Setter Property="Fill" Value="{DynamicResource ColorScrollBarButtonPointeroverForeground}" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/Slider.axaml

@@ -60,10 +60,10 @@
                     CornerRadius="{TemplateBinding CornerRadius}" />
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover /template/ Border">
+        <Style Selector="^:pointerover">
             <Setter Property="BorderBrush" Value="{DynamicResource SliderThumbPointeroverBorderBrush}" />
         </Style>
-        <Style Selector="^:pressed /template/ Border">
+        <Style Selector="^:pressed">
             <Setter Property="BorderBrush" Value="{DynamicResource SliderThumbPressedBorderBrush}" />
         </Style>
     </ControlTheme>
@@ -75,165 +75,155 @@
         <Style Selector="^:horizontal">
             <Setter Property="Template">
                 <ControlTemplate TargetType="Slider">
-                    <Border
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <DataValidationErrors>
                         <Grid
                             x:Name="SliderContainer"
                             Margin="{TemplateBinding Padding}"
-                            Background="Transparent">
+                            Background="Transparent"
+                            RowDefinitions="Auto,Auto,Auto">
                             <Grid.Styles>
                                 <Style Selector="TickBar">
                                     <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
                                 </Style>
                             </Grid.Styles>
-                            <Grid x:Name="HorizontalTemplate" RowDefinitions="Auto,Auto,Auto">
-                                <TickBar
-                                    Name="TopTickBar"
-                                    Grid.Row="0"
-                                    Height="{DynamicResource SliderTickHorizontalHeight}"
-                                    Margin="0,0,0,4"
-                                    VerticalAlignment="Bottom"
-                                    Fill="{DynamicResource SliderTickForeground}"
-                                    IsVisible="False"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
-                                    Orientation="{TemplateBinding Slider.Orientation}"
-                                    Placement="Top"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    Ticks="{TemplateBinding Ticks}" />
-                                <TickBar
-                                    Name="BottomTickBar"
-                                    Grid.Row="2"
-                                    Height="{DynamicResource SliderTickHorizontalHeight}"
-                                    Margin="0,4,0,0"
-                                    VerticalAlignment="Top"
-                                    Fill="{DynamicResource SliderTickForeground}"
-                                    IsVisible="False"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
-                                    Orientation="{TemplateBinding Slider.Orientation}"
-                                    Placement="Bottom"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    Ticks="{TemplateBinding Ticks}" />
-                                <Track
-                                    Name="PART_Track"
-                                    Grid.Row="1"
-                                    IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
-                                    Maximum="{TemplateBinding Maximum}"
-                                    Minimum="{TemplateBinding Minimum}"
-                                    Orientation="Horizontal"
-                                    Value="{TemplateBinding Value,
-                                                            Mode=TwoWay}">
-                                    <Track.DecreaseButton>
-                                        <RepeatButton
-                                            Name="PART_DecreaseButton"
-                                            Background="{TemplateBinding Foreground}"
-                                            Focusable="False"
-                                            Theme="{StaticResource SliderHorizontalRepeatButton}" />
-                                    </Track.DecreaseButton>
-                                    <Track.IncreaseButton>
-                                        <RepeatButton
-                                            Name="PART_IncreaseButton"
-                                            Background="{TemplateBinding Background}"
-                                            Focusable="False"
-                                            Theme="{StaticResource SliderHorizontalRepeatButton}" />
-                                    </Track.IncreaseButton>
-                                    <Thumb
-                                        Name="thumb"
-                                        Width="{DynamicResource SliderThumbWidth}"
-                                        Height="{DynamicResource SliderThumbHeight}"
-                                        DataContext="{TemplateBinding Value}"
-                                        Theme="{StaticResource SliderThumbTheme}" />
-                                </Track>
-                            </Grid>
+                            <TickBar
+                                Name="TopTickBar"
+                                Grid.Row="0"
+                                Height="{DynamicResource SliderTickHorizontalHeight}"
+                                Margin="0,0,0,4"
+                                VerticalAlignment="Bottom"
+                                Fill="{DynamicResource SliderTickForeground}"
+                                IsVisible="False"
+                                Maximum="{TemplateBinding Slider.Maximum}"
+                                Minimum="{TemplateBinding Slider.Minimum}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Placement="Top"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Ticks="{TemplateBinding Ticks}" />
+                            <TickBar
+                                Name="BottomTickBar"
+                                Grid.Row="2"
+                                Height="{DynamicResource SliderTickHorizontalHeight}"
+                                Margin="0,4,0,0"
+                                VerticalAlignment="Top"
+                                Fill="{DynamicResource SliderTickForeground}"
+                                IsVisible="False"
+                                Maximum="{TemplateBinding Slider.Maximum}"
+                                Minimum="{TemplateBinding Slider.Minimum}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Placement="Bottom"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Ticks="{TemplateBinding Ticks}" />
+                            <Track
+                                Name="PART_Track"
+                                Grid.Row="1"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="Horizontal"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
+                                <Track.DecreaseButton>
+                                    <RepeatButton
+                                        Name="PART_DecreaseButton"
+                                        Background="{TemplateBinding Foreground}"
+                                        Focusable="False"
+                                        Theme="{StaticResource SliderHorizontalRepeatButton}" />
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton
+                                        Name="PART_IncreaseButton"
+                                        Background="{TemplateBinding Background}"
+                                        Focusable="False"
+                                        Theme="{StaticResource SliderHorizontalRepeatButton}" />
+                                </Track.IncreaseButton>
+                                <Thumb
+                                    Name="thumb"
+                                    Width="{DynamicResource SliderThumbWidth}"
+                                    Height="{DynamicResource SliderThumbHeight}"
+                                    DataContext="{TemplateBinding Value}"
+                                    Theme="{StaticResource SliderThumbTheme}" />
+                            </Track>
                         </Grid>
-                    </Border>
+                    </DataValidationErrors>
                 </ControlTemplate>
             </Setter>
         </Style>
         <Style Selector="^:vertical">
             <Setter Property="Template">
                 <ControlTemplate>
-                    <Border
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
+                    <DataValidationErrors>
                         <Grid
                             x:Name="SliderContainer"
+                            MinWidth="{DynamicResource SliderVerticalWidth}"
                             Margin="{TemplateBinding Padding}"
-                            Background="{DynamicResource SliderContainerBackground}">
+                            Background="{DynamicResource SliderContainerBackground}"
+                            ColumnDefinitions="Auto,Auto,Auto">
                             <Grid.Styles>
                                 <Style Selector="TickBar">
                                     <Setter Property="ReservedSpace" Value="{Binding #PART_Track.Thumb.Bounds}" />
                                 </Style>
                             </Grid.Styles>
-                            <Grid
-                                x:Name="VerticalTemplate"
-                                MinWidth="{DynamicResource SliderVerticalWidth}"
-                                ColumnDefinitions="Auto,Auto,Auto">
-                                <TickBar
-                                    Name="LeftTickBar"
-                                    Grid.Column="0"
-                                    Width="{DynamicResource SliderTickVerticalWidth}"
-                                    Margin="0,0,4,0"
-                                    HorizontalAlignment="Right"
-                                    Fill="{DynamicResource SliderTickForeground}"
-                                    IsVisible="False"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
-                                    Orientation="{TemplateBinding Slider.Orientation}"
-                                    Placement="Left"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    Ticks="{TemplateBinding Ticks}" />
-                                <TickBar
-                                    Name="RightTickBar"
-                                    Grid.Column="2"
-                                    Width="{DynamicResource SliderTickVerticalWidth}"
-                                    Margin="4,0,0,0"
-                                    HorizontalAlignment="Left"
-                                    Fill="{DynamicResource SliderTickForeground}"
-                                    IsVisible="False"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
-                                    Orientation="{TemplateBinding Slider.Orientation}"
-                                    Placement="Right"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    Ticks="{TemplateBinding Ticks}" />
-                                <Track
-                                    Name="PART_Track"
-                                    Grid.Column="1"
-                                    IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
-                                    Maximum="{TemplateBinding Maximum}"
-                                    Minimum="{TemplateBinding Minimum}"
-                                    Orientation="Vertical"
-                                    Value="{TemplateBinding Value,
-                                                            Mode=TwoWay}">
-                                    <Track.DecreaseButton>
-                                        <RepeatButton
-                                            Name="PART_DecreaseButton"
-                                            Background="{TemplateBinding Foreground}"
-                                            Focusable="False"
-                                            Theme="{StaticResource SliderVerticalRepeatButton}" />
-                                    </Track.DecreaseButton>
-                                    <Track.IncreaseButton>
-                                        <RepeatButton
-                                            Name="PART_IncreaseButton"
-                                            Background="{TemplateBinding Background}"
-                                            Focusable="False"
-                                            Theme="{StaticResource SliderVerticalRepeatButton}" />
-                                    </Track.IncreaseButton>
-                                    <Thumb
-                                        Name="thumb"
-                                        Width="{DynamicResource SliderThumbWidth}"
-                                        Height="{DynamicResource SliderThumbHeight}"
-                                        DataContext="{TemplateBinding Value}"
-                                        Theme="{StaticResource SliderThumbTheme}" />
-                                </Track>
-                            </Grid>
+                            <TickBar
+                                Name="LeftTickBar"
+                                Grid.Column="0"
+                                Width="{DynamicResource SliderTickVerticalWidth}"
+                                Margin="0,0,4,0"
+                                HorizontalAlignment="Right"
+                                Fill="{DynamicResource SliderTickForeground}"
+                                IsVisible="False"
+                                Maximum="{TemplateBinding Slider.Maximum}"
+                                Minimum="{TemplateBinding Slider.Minimum}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Placement="Left"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Ticks="{TemplateBinding Ticks}" />
+                            <TickBar
+                                Name="RightTickBar"
+                                Grid.Column="2"
+                                Width="{DynamicResource SliderTickVerticalWidth}"
+                                Margin="4,0,0,0"
+                                HorizontalAlignment="Left"
+                                Fill="{DynamicResource SliderTickForeground}"
+                                IsVisible="False"
+                                Maximum="{TemplateBinding Slider.Maximum}"
+                                Minimum="{TemplateBinding Slider.Minimum}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
+                                Placement="Right"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Ticks="{TemplateBinding Ticks}" />
+                            <Track
+                                Name="PART_Track"
+                                Grid.Column="1"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
+                                Orientation="Vertical"
+                                Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
+                                <Track.DecreaseButton>
+                                    <RepeatButton
+                                        Name="PART_DecreaseButton"
+                                        Background="{TemplateBinding Foreground}"
+                                        Focusable="False"
+                                        Theme="{StaticResource SliderVerticalRepeatButton}" />
+                                </Track.DecreaseButton>
+                                <Track.IncreaseButton>
+                                    <RepeatButton
+                                        Name="PART_IncreaseButton"
+                                        Background="{TemplateBinding Background}"
+                                        Focusable="False"
+                                        Theme="{StaticResource SliderVerticalRepeatButton}" />
+                                </Track.IncreaseButton>
+                                <Thumb
+                                    Name="thumb"
+                                    Width="{DynamicResource SliderThumbWidth}"
+                                    Height="{DynamicResource SliderThumbHeight}"
+                                    DataContext="{TemplateBinding Value}"
+                                    Theme="{StaticResource SliderThumbTheme}" />
+                            </Track>
                         </Grid>
-                    </Border>
+                    </DataValidationErrors>
                 </ControlTemplate>
             </Setter>
         </Style>
@@ -263,6 +253,10 @@
             <Setter Property="IsVisible" Value="True" />
         </Style>
 
+        <Style Selector="^:error /template/ Thumb#thumb">
+            <Setter Property="Thumb.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+        </Style>
+
         <!--  Disabled State  -->
 
         <Style Selector="^:disabled">

src/Semi.Avalonia/Controls/SplitButton.axaml

@@ -82,6 +82,9 @@
         <Style Selector="^.Tertiary /template/ Button">
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
         </Style>
+        <Style Selector="^.Success /template/ Button">
+            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultSuccessForeground}" />
+        </Style>
         <Style Selector="^.Warning /template/ Button">
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultWarningForeground}" />
         </Style>
@@ -101,6 +104,10 @@
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidTertiaryBackground}" />
                 <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             </Style>
+            <Style Selector="^.Success /template/ Button">
+                <Setter Property="Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+                <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            </Style>
             <Style Selector="^.Warning /template/ Button">
                 <Setter Property="Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
                 <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
@@ -110,10 +117,110 @@
                 <Setter Property="Foreground" Value="{DynamicResource ButtonSolidForeground}" />
             </Style>
         </Style>
-
+        <Style Selector="^.Large /template/ Button">
+            <Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
+        </Style>
+        <Style Selector="^.Small /template/ Button">
+            <Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
+        </Style>
         <Style Selector="^:disabled /template/ Button">
             <Setter Property="Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
             <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
         </Style>
     </ControlTheme>
+
+    <ControlTheme
+        x:Key="SolidSplitButton"
+        BasedOn="{StaticResource {x:Type SplitButton}}"
+        TargetType="SplitButton">
+        <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+        <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
+        <Style Selector="^ /template/ Button">
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^.Primary /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidPrimaryPressedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Secondary /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSecondaryBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSecondaryPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSecondaryPressedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Tertiary /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidTertiaryBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidTertiaryPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidTertiaryPressedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Success /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSuccessBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSuccessPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidSuccessPressedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Warning /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidWarningBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidWarningPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidWarningPressedBackground}" />
+            </Style>
+        </Style>
+        <Style Selector="^.Danger /template/ Button">
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonSolidForeground}" />
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidDangerBackground}" />
+            <Style Selector="^:pointerover">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidDangerPointeroverBackground}" />
+            </Style>
+            <Style Selector="^:pressed">
+                <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonSolidDangerPressedBackground}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:disabled /template/ Button">
+            <Setter Property="SplitButton.Background" Value="{DynamicResource ButtonDefaultDisabledBackground}" />
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme
+        x:Key="BorderlessSplitButton"
+        BasedOn="{StaticResource {x:Type SplitButton}}"
+        TargetType="SplitButton">
+        <Setter Property="SplitButton.Background" Value="Transparent" />
+        <Setter Property="SplitButton.BorderBrush" Value="Transparent" />
+        <Style Selector="^:disabled /template/ Button">
+            <Setter Property="SplitButton.BorderBrush" Value="Transparent" />
+            <Setter Property="SplitButton.Background" Value="Transparent" />
+            <Setter Property="SplitButton.Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" />
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/TextBlock.axaml

@@ -9,7 +9,6 @@
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type TextBlock}" TargetType="TextBlock">
         <!--<Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockDefaultForeground}" />-->
-        <Setter Property="TextBlock.FontSize" Value="{DynamicResource TextBlockFontSize}" />
         <Style Selector="^.Secondary">
             <Setter Property="TextBlock.Foreground" Value="{DynamicResource TextBlockSecondaryForeground}" />
         </Style>

src/Semi.Avalonia/Controls/TextBox.axaml

@@ -61,7 +61,7 @@
                     </ControlTemplate>
                 </Setter>
                 <Style Selector="^:pointerover">
-                    <Setter Property="Button.Foreground" Value="{DynamicResource TextBoxButtonPointerOverForeground}" />
+                    <Setter Property="Button.Foreground" Value="{DynamicResource TextBoxButtonPointeroverForeground}" />
                 </Style>
             </ControlTheme>
             <ControlTheme x:Key="InputToggleButton" TargetType="ToggleButton">
@@ -94,9 +94,8 @@
         <Setter Property="TextBox.BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
         <Setter Property="TextBox.CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
         <Setter Property="TextBox.FontSize" Value="14" />
-        <Setter Property="TextBox.Cursor" Value="IBeam" />
+        <Setter Property="TextBox.Cursor" Value="Ibeam" />
         <Setter Property="TextBox.CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
-        <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperDefaultHeight}" />
         <Setter Property="TextBox.Padding" Value="{DynamicResource TextBoxContentPadding}" />
         <Setter Property="TextBox.VerticalContentAlignment" Value="Center" />
         <Setter Property="TextBox.FocusAdorner" Value="{x:Null}" />
@@ -104,79 +103,82 @@
         <Setter Property="TextBox.ContextFlyout" Value="{StaticResource DefaultTextBoxContextFlyout}" />
         <Setter Property="TextBox.Template">
             <ControlTemplate TargetType="TextBox">
-                <Border
-                    Name="PART_ContentPresenterBorder"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto,*,Auto, Auto, Auto">
-                        <ContentPresenter
-                            Grid.Column="0"
-                            Padding="{DynamicResource TextBoxInnerLeftContentPadding}"
-                            VerticalAlignment="Center"
-                            Content="{TemplateBinding InnerLeftContent}"
-                            Foreground="{DynamicResource TextBoxInnerForeground}"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
-                        <ScrollViewer
-                            Grid.Column="1"
-                            AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
-                            HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                            IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
-                            VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
-                            <Panel>
-                                <TextBlock
-                                    Name="PART_Watermark"
-                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    IsVisible="{TemplateBinding Text,
-                                                                Converter={x:Static StringConverters.IsNullOrEmpty}}"
-                                    Opacity="0.5"
-                                    Text="{TemplateBinding Watermark}"
-                                    TextAlignment="{TemplateBinding TextAlignment}"
-                                    TextWrapping="{TemplateBinding TextWrapping}" />
-                                <TextPresenter
-                                    Name="PART_TextPresenter"
-                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    CaretBrush="{TemplateBinding CaretBrush}"
-                                    CaretIndex="{TemplateBinding CaretIndex}"
-                                    LineHeight="{TemplateBinding LineHeight}"
-                                    PasswordChar="{TemplateBinding PasswordChar}"
-                                    RevealPassword="{TemplateBinding RevealPassword}"
-                                    SelectionBrush="{TemplateBinding SelectionBrush}"
-                                    SelectionEnd="{TemplateBinding SelectionEnd}"
-                                    SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
-                                    SelectionStart="{TemplateBinding SelectionStart}"
-                                    Text="{TemplateBinding Text,
-                                                           Mode=TwoWay}"
-                                    TextAlignment="{TemplateBinding TextAlignment}"
-                                    TextWrapping="{TemplateBinding TextWrapping}" />
-                            </Panel>
-                        </ScrollViewer>
-                        <Button
-                            Name="PART_ClearButton"
-                            Grid.Column="2"
-                            Command="{Binding $parent[TextBox].Clear}"
-                            IsVisible="False"
-                            Theme="{StaticResource InputClearButton}" />
-                        <ToggleButton
-                            Name="PART_RevealButton"
-                            Grid.Column="3"
-                            Margin="4,0,0,0"
-                            IsChecked="{TemplateBinding RevealPassword,
-                                                        Mode=TwoWay}"
-                            IsVisible="False"
-                            Theme="{StaticResource InputToggleButton}" />
-                        <ContentPresenter
-                            Grid.Column="4"
-                            Padding="{DynamicResource TextBoxInnerRightContentPadding}"
-                            VerticalAlignment="Center"
-                            Content="{TemplateBinding InnerRightContent}"
-                            Foreground="{DynamicResource TextBoxInnerForeground}"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerRightContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
-                    </Grid>
-                </Border>
+                <DataValidationErrors>
+                    <Border
+                        Name="PART_ContentPresenterBorder"
+                        MinHeight="{DynamicResource TextBoxWrapperDefaultHeight}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto,*,Auto, Auto, Auto">
+                            <ContentPresenter
+                                Grid.Column="0"
+                                Padding="{DynamicResource TextBoxInnerLeftContentPadding}"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding InnerLeftContent}"
+                                Foreground="{DynamicResource TextBoxInnerForeground}"
+                                IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                            <ScrollViewer
+                                Grid.Column="1"
+                                AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                                HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                                IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                                VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                                <Panel>
+                                    <TextBlock
+                                        Name="PART_Watermark"
+                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        IsVisible="{TemplateBinding Text,
+                                                                    Converter={x:Static StringConverters.IsNullOrEmpty}}"
+                                        Opacity="0.5"
+                                        Text="{TemplateBinding Watermark}"
+                                        TextAlignment="{TemplateBinding TextAlignment}"
+                                        TextWrapping="{TemplateBinding TextWrapping}" />
+                                    <TextPresenter
+                                        Name="PART_TextPresenter"
+                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        CaretBrush="{TemplateBinding CaretBrush}"
+                                        CaretIndex="{TemplateBinding CaretIndex}"
+                                        LineHeight="{TemplateBinding LineHeight}"
+                                        PasswordChar="{TemplateBinding PasswordChar}"
+                                        RevealPassword="{TemplateBinding RevealPassword}"
+                                        SelectionBrush="{TemplateBinding SelectionBrush}"
+                                        SelectionEnd="{TemplateBinding SelectionEnd}"
+                                        SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
+                                        SelectionStart="{TemplateBinding SelectionStart}"
+                                        Text="{TemplateBinding Text,
+                                                               Mode=TwoWay}"
+                                        TextAlignment="{TemplateBinding TextAlignment}"
+                                        TextWrapping="{TemplateBinding TextWrapping}" />
+                                </Panel>
+                            </ScrollViewer>
+                            <Button
+                                Name="PART_ClearButton"
+                                Grid.Column="2"
+                                Command="{Binding $parent[TextBox].Clear}"
+                                IsVisible="False"
+                                Theme="{StaticResource InputClearButton}" />
+                            <ToggleButton
+                                Name="PART_RevealButton"
+                                Grid.Column="3"
+                                Margin="4,0,0,0"
+                                IsChecked="{TemplateBinding RevealPassword,
+                                                            Mode=TwoWay}"
+                                IsVisible="False"
+                                Theme="{StaticResource InputToggleButton}" />
+                            <ContentPresenter
+                                Grid.Column="4"
+                                Padding="{DynamicResource TextBoxInnerRightContentPadding}"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding InnerRightContent}"
+                                Foreground="{DynamicResource TextBoxInnerForeground}"
+                                IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerRightContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                        </Grid>
+                    </Border>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 
@@ -196,6 +198,26 @@
         <Style Selector="^:disabled">
             <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxDisabledForeground}" />
         </Style>
+
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="Border.BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="Border.BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
+        </Style>
+
         <Style Selector="^.clearButton, ^.ClearButton">
             <Style Selector="^[AcceptsReturn=False][IsReadOnly=False]:focus:not(:empty) /template/ Button#PART_ClearButton">
                 <Setter Property="Button.IsVisible" Value="True" />
@@ -209,11 +231,11 @@
                 <Setter Property="ToggleButton.IsVisible" Value="True" />
             </Style>
         </Style>
-        <Style Selector="^.Large">
-            <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperLargeHeight}" />
+        <Style Selector="^.Large /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="MinHeight" Value="{DynamicResource TextBoxWrapperLargeHeight}" />
         </Style>
-        <Style Selector="^.Small">
-            <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperSmallHeight}" />
+        <Style Selector="^.Small /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="MinHeight" Value="{DynamicResource TextBoxWrapperSmallHeight}" />
         </Style>
 
         <Style Selector="^.Bordered">
@@ -231,6 +253,139 @@
                 <Setter Property="TextBox.Background" Value="{DynamicResource TextBoxDisabledBackground}" />
                 <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" />
             </Style>
+
+            <Style Selector="^:error">
+                <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
+                    <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                    <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsBorderBrush}" />
+                </Style>
+                <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPointerOverBorderBrush}" />
+                </Style>
+                <Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsPressedBorderBrush}" />
+                </Style>
+                <Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder">
+                    <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                    <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+                </Style>
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="NonErrorTextBox" TargetType="TextBox">
+        <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxForeground}" />
+        <Setter Property="TextBox.Background" Value="{DynamicResource TextBoxDefaultBackground}" />
+        <Setter Property="TextBox.BorderBrush" Value="{DynamicResource TextBoxDefaultBorderBrush}" />
+        <Setter Property="TextBox.SelectionBrush" Value="{DynamicResource TextBoxSelectionBackground}" />
+        <Setter Property="TextBox.SelectionForegroundBrush" Value="{DynamicResource TextBoxSelectionForeground}" />
+        <Setter Property="TextBox.BorderThickness" Value="{DynamicResource TextBoxBorderThickness}" />
+        <Setter Property="TextBox.CornerRadius" Value="{DynamicResource TextBoxDefaultCornerRadius}" />
+        <Setter Property="TextBox.FontSize" Value="14" />
+        <Setter Property="TextBox.Cursor" Value="Ibeam" />
+        <Setter Property="TextBox.CaretBrush" Value="{DynamicResource TextBoxTextCaretBrush}" />
+        <Setter Property="TextBox.Padding" Value="{DynamicResource TextBoxContentPadding}" />
+        <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperDefaultHeight}" />
+        <Setter Property="TextBox.VerticalContentAlignment" Value="Center" />
+        <Setter Property="TextBox.FocusAdorner" Value="{x:Null}" />
+        <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
+        <Setter Property="TextBox.ContextFlyout" Value="{StaticResource DefaultTextBoxContextFlyout}" />
+        <Setter Property="TextBox.Template">
+            <ControlTemplate TargetType="TextBox">
+                <DataValidationErrors Theme="{DynamicResource SilentDataValidationErrors}">
+                    <Border
+                        Name="PART_ContentPresenterBorder"
+                        MinHeight="{TemplateBinding MinHeight}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto, *">
+                            <ContentPresenter
+                                Grid.Column="0"
+                                Padding="{DynamicResource TextBoxInnerLeftContentPadding}"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding InnerLeftContent}"
+                                Foreground="{DynamicResource TextBoxInnerForeground}"
+                                IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                            <ScrollViewer
+                                Grid.Column="1"
+                                AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                                HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                                IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                                VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                                <Panel>
+                                    <TextBlock
+                                        Name="PART_Watermark"
+                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        IsVisible="{TemplateBinding Text,
+                                                                    Converter={x:Static StringConverters.IsNullOrEmpty}}"
+                                        Opacity="0.5"
+                                        Text="{TemplateBinding Watermark}"
+                                        TextAlignment="{TemplateBinding TextAlignment}"
+                                        TextWrapping="{TemplateBinding TextWrapping}" />
+                                    <TextPresenter
+                                        Name="PART_TextPresenter"
+                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        CaretBrush="{TemplateBinding CaretBrush}"
+                                        CaretIndex="{TemplateBinding CaretIndex}"
+                                        LineHeight="{TemplateBinding LineHeight}"
+                                        PasswordChar="{TemplateBinding PasswordChar}"
+                                        RevealPassword="{TemplateBinding RevealPassword}"
+                                        SelectionBrush="{TemplateBinding SelectionBrush}"
+                                        SelectionEnd="{TemplateBinding SelectionEnd}"
+                                        SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
+                                        SelectionStart="{TemplateBinding SelectionStart}"
+                                        Text="{TemplateBinding Text,
+                                                               Mode=TwoWay}"
+                                        TextAlignment="{TemplateBinding TextAlignment}"
+                                        TextWrapping="{TemplateBinding TextWrapping}" />
+                                </Panel>
+                            </ScrollViewer>
+                        </Grid>
+                    </Border>
+                </DataValidationErrors>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="Border.Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
+        </Style>
+        <Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="Border.Background" Value="{DynamicResource TextBoxPressedBackground}" />
+        </Style>
+        <Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}" />
+        </Style>
+        <Style Selector="^:disabled /template/ Border#PART_ContentPresenterBorder">
+            <Setter Property="Border.BorderBrush" Value="{DynamicResource TextBoxDisabledBorderBrush}" />
+            <Setter Property="Border.Background" Value="{DynamicResource TextBoxDisabledBackground}" />
+        </Style>
+        <Style Selector="^:disabled">
+            <Setter Property="TextBox.Foreground" Value="{DynamicResource TextBoxDisabledForeground}" />
+        </Style>
+
+        <Style Selector="^:error">
+            <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Background" Value="{DynamicResource DataValidationErrorsBackground}" />
+                <Setter Property="BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPointerOverBackground}" />
+                <Setter Property="Border.BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:pressed /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsPressedBackground}" />
+                <Setter Property="Border.BorderBrush" Value="Transparent" />
+            </Style>
+            <Style Selector="^:focus /template/ Border#PART_ContentPresenterBorder">
+                <Setter Property="Border.Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+                <Setter Property="Border.BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
+            </Style>
         </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/TimePicker.axaml

@@ -129,7 +129,6 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type TimePicker}" TargetType="TimePicker">
-        <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonDefaultHeight}" />
         <Setter Property="Foreground" Value="{DynamicResource DateTimePickerButtonForeground}" />
         <Setter Property="Background" Value="{DynamicResource DateTimePickerButtonBackground}" />
         <Setter Property="BorderBrush" Value="{DynamicResource DateTimePickerButtonBorderBrush}" />
@@ -139,106 +138,110 @@
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="Template">
             <ControlTemplate>
-                <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
-                    <Button
-                        x:Name="PART_FlyoutButton"
-                        Width="242"
-                        MinWidth="242"
-                        HorizontalAlignment="Stretch"
-                        VerticalAlignment="Stretch"
-                        Background="{TemplateBinding Background}"
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
-                        Cursor="Hand"
-                        Foreground="{TemplateBinding Foreground}"
-                        IsEnabled="{TemplateBinding IsEnabled}"
-                        Theme="{StaticResource DateTimePickerFlyoutButton}">
-                        <Grid ColumnDefinitions="*, Auto">
-                            <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
-                                <!--  Ignore col defs here, set in code  -->
-                                <Border
-                                    x:Name="PART_FirstPickerHost"
-                                    Grid.Column="0"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch">
-                                    <TextBlock
-                                        x:Name="PART_HourTextBlock"
-                                        Padding="12,4"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
-                                        FontFamily="{TemplateBinding FontFamily}"
-                                        FontSize="{TemplateBinding FontSize}"
-                                        FontWeight="{TemplateBinding FontWeight}" />
-                                </Border>
+                <DataValidationErrors>
+                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
+                        <Button
+                            x:Name="PART_FlyoutButton"
+                            Width="242"
+                            MinWidth="242"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Stretch"
+                            Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
+                            Cursor="Hand"
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                            Foreground="{TemplateBinding Foreground}"
+                            IsEnabled="{TemplateBinding IsEnabled}"
+                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
+                            Theme="{StaticResource DateTimePickerFlyoutButton}">
+                            <Grid ColumnDefinitions="*, Auto">
+                                <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
+                                    <!--  Ignore col defs here, set in code  -->
+                                    <Border
+                                        x:Name="PART_FirstPickerHost"
+                                        Grid.Column="0"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch">
+                                        <TextBlock
+                                            x:Name="PART_HourTextBlock"
+                                            Padding="12,4"
+                                            HorizontalAlignment="Center"
+                                            VerticalAlignment="Center"
+                                            FontFamily="{TemplateBinding FontFamily}"
+                                            FontSize="{TemplateBinding FontSize}"
+                                            FontWeight="{TemplateBinding FontWeight}" />
+                                    </Border>
 
-                                <Rectangle
-                                    Name="PART_FirstColumnDivider"
+                                    <Rectangle
+                                        Name="PART_FirstColumnDivider"
+                                        Grid.Column="1"
+                                        Width="1"
+                                        Margin="0,4"
+                                        HorizontalAlignment="Center"
+                                        Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+
+                                    <Border
+                                        x:Name="PART_SecondPickerHost"
+                                        Grid.Column="2"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch">
+                                        <TextBlock
+                                            x:Name="PART_MinuteTextBlock"
+                                            Padding="12,4"
+                                            HorizontalAlignment="Center"
+                                            VerticalAlignment="Center"
+                                            FontFamily="{TemplateBinding FontFamily}"
+                                            FontSize="{TemplateBinding FontSize}"
+                                            FontWeight="{TemplateBinding FontWeight}" />
+                                    </Border>
+
+                                    <Rectangle
+                                        Name="PART_SecondColumnDivider"
+                                        Grid.Column="3"
+                                        Width="1"
+                                        Margin="0,4"
+                                        HorizontalAlignment="Center"
+                                        Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+
+                                    <Border
+                                        x:Name="PART_ThirdPickerHost"
+                                        Grid.Column="4"
+                                        HorizontalAlignment="Stretch"
+                                        VerticalAlignment="Stretch">
+                                        <TextBlock
+                                            x:Name="PART_PeriodTextBlock"
+                                            Padding="12,4"
+                                            HorizontalAlignment="Center"
+                                            VerticalAlignment="Center"
+                                            FontFamily="{TemplateBinding FontFamily}"
+                                            FontSize="{TemplateBinding FontSize}"
+                                            FontWeight="{TemplateBinding FontWeight}" />
+                                    </Border>
+                                </Grid>
+                                <PathIcon
+                                    Name="PART_Icon"
                                     Grid.Column="1"
-                                    Width="1"
-                                    Margin="0,4"
-                                    HorizontalAlignment="Center"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-
-                                <Border
-                                    x:Name="PART_SecondPickerHost"
-                                    Grid.Column="2"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch">
-                                    <TextBlock
-                                        x:Name="PART_MinuteTextBlock"
-                                        Padding="12,4"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
-                                        FontFamily="{TemplateBinding FontFamily}"
-                                        FontSize="{TemplateBinding FontSize}"
-                                        FontWeight="{TemplateBinding FontWeight}" />
-                                </Border>
-
-                                <Rectangle
-                                    Name="PART_SecondColumnDivider"
-                                    Grid.Column="3"
-                                    Width="1"
-                                    Margin="0,4"
-                                    HorizontalAlignment="Center"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
-
-                                <Border
-                                    x:Name="PART_ThirdPickerHost"
-                                    Grid.Column="4"
-                                    HorizontalAlignment="Stretch"
-                                    VerticalAlignment="Stretch">
-                                    <TextBlock
-                                        x:Name="PART_PeriodTextBlock"
-                                        Padding="12,4"
-                                        HorizontalAlignment="Center"
-                                        VerticalAlignment="Center"
-                                        FontFamily="{TemplateBinding FontFamily}"
-                                        FontSize="{TemplateBinding FontSize}"
-                                        FontWeight="{TemplateBinding FontWeight}" />
-                                </Border>
+                                    Width="16"
+                                    Height="16"
+                                    Margin="0,0,8,0"
+                                    Data="{DynamicResource TimePickerIconGlyph}"
+                                    Foreground="{DynamicResource DateTimePickerIconForeground}" />
                             </Grid>
-                            <PathIcon
-                                Name="PART_Icon"
-                                Grid.Column="1"
-                                Width="16"
-                                Height="16"
-                                Margin="0,0,8,0"
-                                Data="{DynamicResource TimePickerIconGlyph}"
-                                Foreground="{DynamicResource DateTimePickerIconForeground}" />
-                        </Grid>
 
-                    </Button>
+                        </Button>
 
-                    <Popup
-                        Name="PART_Popup"
-                        IsLightDismissEnabled="True"
-                        Placement="Bottom"
-                        PlacementTarget="{TemplateBinding}"
-                        WindowManagerAddShadowHint="False">
-                        <TimePickerPresenter Name="PART_PickerPresenter" />
-                    </Popup>
-                </Grid>
+                        <Popup
+                            Name="PART_Popup"
+                            IsLightDismissEnabled="True"
+                            Placement="Bottom"
+                            PlacementTarget="{TemplateBinding}"
+                            WindowManagerAddShadowHint="False">
+                            <TimePickerPresenter Name="PART_PickerPresenter" />
+                        </Popup>
+                    </Grid>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 
@@ -250,10 +253,10 @@
             <Setter Property="Foreground" Value="{DynamicResource DateTimePickerEmptyForeground}" />
         </Style>
 
-        <Style Selector="^.Large">
+        <Style Selector="^.Large /template/ Button#PART_FlyoutButton">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonLargeHeight}" />
         </Style>
-        <Style Selector="^.Small">
+        <Style Selector="^.Small /template/ Button#PART_FlyoutButton">
             <Setter Property="MinHeight" Value="{DynamicResource DateTimePickerButtonSmallHeight}" />
         </Style>
     </ControlTheme>

src/Semi.Avalonia/Controls/ToggleButton.axaml

@@ -4,17 +4,19 @@
     x:CompileBindings="True">
     <Design.PreviewWith>
         <StackPanel Margin="20">
-            <ToggleButton>Toggle</ToggleButton>
+            <ToggleButton Classes="Primary">Toggle</ToggleButton>
             <ToggleButton Classes="Secondary">Toggle</ToggleButton>
             <ToggleButton Classes="Tertiary">Toggle</ToggleButton>
+            <ToggleButton Classes="Success">Toggle</ToggleButton>
             <ToggleButton Classes="Warning">Toggle</ToggleButton>
-            <ToggleButton Classes="Error">Toggle</ToggleButton>
+            <ToggleButton Classes="Danger">Toggle</ToggleButton>
 
-            <ToggleButton IsThreeState="True">Toggle 3</ToggleButton>
+            <ToggleButton Classes="Primary" IsThreeState="True">Toggle 3</ToggleButton>
             <ToggleButton Classes="Secondary" IsThreeState="True">Toggle 3</ToggleButton>
             <ToggleButton Classes="Tertiary" IsThreeState="True">Toggle 3</ToggleButton>
+            <ToggleButton Classes="Success" IsThreeState="True">Toggle 3</ToggleButton>
             <ToggleButton Classes="Warning" IsThreeState="True">Toggle 3</ToggleButton>
-            <ToggleButton Classes="Error" IsThreeState="True">Toggle 3</ToggleButton>
+            <ToggleButton Classes="Danger" IsThreeState="True">Toggle 3</ToggleButton>
         </StackPanel>
     </Design.PreviewWith>
     <ControlTheme x:Key="{x:Type ToggleButton}" TargetType="ToggleButton">
@@ -30,6 +32,7 @@
         <Setter Property="ToggleButton.HorizontalContentAlignment" Value="Center" />
         <Setter Property="ToggleButton.VerticalContentAlignment" Value="Center" />
         <Setter Property="ToggleButton.MinHeight" Value="12" />
+        <Setter Property="ToggleButton.Cursor" Value="Hand" />
         <Setter Property="ToggleButton.Template">
             <ControlTemplate TargetType="ToggleButton">
                 <ContentPresenter
@@ -54,88 +57,113 @@
             <Setter Property="RenderTransform" Value="scale(0.98)" />
         </Style>
 
-        <Style Selector="^.Large">
-            <Setter Property="ToggleButton.Padding" Value="{DynamicResource ButtonLargePadding}" />
-        </Style>
-        <Style Selector="^.Small">
-            <Setter Property="ToggleButton.Padding" Value="{DynamicResource ButtonSmallPadding}" />
-        </Style>
-
-
         <Style Selector="^:pointerover">
             <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDefaultPointeroverBackground}" />
         </Style>
+
         <Style Selector="^:pressed">
             <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDefaultPressedBackground}" />
         </Style>
+
         <Style Selector="^:disabled">
-            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultDisabledForeground}" />
-            <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDefaultDisabledBackground}" />
+            <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonDefaultDisabledBorderBrush}" />
         </Style>
 
+        <Style Selector="^.Primary">
+            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultPrimaryForeground}" />
+        </Style>
         <Style Selector="^.Secondary">
             <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultSecondaryForeground}" />
         </Style>
         <Style Selector="^.Tertiary">
             <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultTertiaryForeground}" />
         </Style>
+        <Style Selector="^.Success">
+            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultSuccessForeground}" />
+        </Style>
         <Style Selector="^.Warning">
             <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultWarningForeground}" />
         </Style>
-        <Style Selector="^.Error">
-            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultErrorForeground}" />
+        <Style Selector="^.Danger">
+            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultDangerForeground}" />
         </Style>
 
         <Style Selector="^:checked">
             <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonCheckedForeground}" />
             <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedBackground}" />
+            <Style Selector="^.Primary">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedBackground}" />
+            </Style>
             <Style Selector="^.Secondary">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSecondaryCheckedBackground}" />
             </Style>
             <Style Selector="^.Tertiary">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonTertiaryCheckedBackground}" />
             </Style>
+            <Style Selector="^.Success">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSuccessCheckedBackground}" />
+            </Style>
             <Style Selector="^.Warning">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonWarningCheckedBackground}" />
             </Style>
-            <Style Selector="^.Error">
-                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonErrorCheckedBackground}" />
+            <Style Selector="^.Danger">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDangerCheckedBackground}" />
             </Style>
             <Style Selector="^:pointerover">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedPointeroverBackground}" />
+                <Style Selector="^.Primary">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedPointeroverBackground}" />
+                </Style>
                 <Style Selector="^.Secondary">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSecondaryCheckedPointeroverBackground}" />
                 </Style>
                 <Style Selector="^.Tertiary">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonTertiaryCheckedPointeroverBackground}" />
                 </Style>
+                <Style Selector="^.Success">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSuccessCheckedPointeroverBackground}" />
+                </Style>
                 <Style Selector="^.Warning">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonWarningCheckedPointeroverBackground}" />
                 </Style>
-                <Style Selector="^.Error">
-                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonErrorCheckedPointeroverBackground}" />
+                <Style Selector="^.Danger">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDangerCheckedPointeroverBackground}" />
                 </Style>
             </Style>
             <Style Selector="^:pressed">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedPressedBackground}" />
+                <Style Selector="^.Primary">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryCheckedPressedBackground}" />
+                </Style>
                 <Style Selector="^.Secondary">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSecondaryCheckedPressedBackground}" />
                 </Style>
                 <Style Selector="^.Tertiary">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonTertiaryCheckedPressedBackground}" />
                 </Style>
+                <Style Selector="^.Success">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSuccessCheckedPressedBackground}" />
+                </Style>
                 <Style Selector="^.Warning">
                     <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonWarningCheckedPressedBackground}" />
                 </Style>
-                <Style Selector="^.Error">
-                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonErrorCheckedPressedBackground}" />
+                <Style Selector="^.Danger">
+                    <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDangerCheckedPressedBackground}" />
                 </Style>
             </Style>
+            <Style Selector="^:disabled">
+                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonDefaultDisabledBorderBrush}" />
+            </Style>
         </Style>
+
         <Style Selector="^:indeterminate">
             <Setter Property="ToggleButton.BorderThickness" Value="1" />
             <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminateBorderBrush}" />
             <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryIndeterminateBackground}" />
+            <Style Selector="^.Primary">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonPrimaryIndeterminateBackground}" />
+                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminateBorderBrush}" />
+            </Style>
             <Style Selector="^.Secondary">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSecondaryIndeterminateBackground}" />
                 <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSecondaryIndeterminateBorderBrush}" />
@@ -144,45 +172,89 @@
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonTertiaryIndeterminateBackground}" />
                 <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonTertiaryIndeterminateBorderBrush}" />
             </Style>
+            <Style Selector="^.Success">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonSuccessIndeterminateBackground}" />
+                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSuccessIndeterminateBorderBrush}" />
+            </Style>
             <Style Selector="^.Warning">
                 <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonWarningIndeterminateBackground}" />
                 <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonWarningIndeterminateBorderBrush}" />
             </Style>
-            <Style Selector="^.Error">
-                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonErrorIndeterminateBackground}" />
-                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonErrorIndeterminateBorderBrush}" />
+            <Style Selector="^.Danger">
+                <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDangerIndeterminateBackground}" />
+                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonDangerIndeterminateBorderBrush}" />
             </Style>
             <Style Selector="^:pointerover">
                 <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePointeroverBorderBrush}" />
+                <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePointeroverForeground}" />
+                <Style Selector="^.Primary">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePointeroverForeground}" />
+                </Style>
                 <Style Selector="^.Secondary">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSecondaryIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonSecondaryIndeterminatePointeroverForeground}" />
                 </Style>
                 <Style Selector="^.Tertiary">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonTertiaryIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonTertiaryIndeterminatePointeroverForeground}" />
+                </Style>
+                <Style Selector="^.Success">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSuccessIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonSuccessIndeterminatePointeroverForeground}" />
                 </Style>
                 <Style Selector="^.Warning">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonWarningIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonWarningIndeterminatePointeroverForeground}" />
                 </Style>
-                <Style Selector="^.Error">
-                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonErrorIndeterminatePointeroverBorderBrush}" />
+                <Style Selector="^.Danger">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonDangerIndeterminatePointeroverBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDangerIndeterminatePointeroverForeground}" />
                 </Style>
             </Style>
             <Style Selector="^:pressed">
                 <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePressedBorderBrush}" />
+                <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePressedBorderBrush}" />
+                <Style Selector="^.Primary">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonPrimaryIndeterminatePressedForeground}" />
+                </Style>
                 <Style Selector="^.Secondary">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSecondaryIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonSecondaryIndeterminatePressedForeground}" />
                 </Style>
                 <Style Selector="^.Tertiary">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonTertiaryIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonTertiaryIndeterminatePressedForeground}" />
+                </Style>
+                <Style Selector="^.Success">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonSuccessIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonSuccessIndeterminatePressedForeground}" />
                 </Style>
                 <Style Selector="^.Warning">
                     <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonWarningIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonWarningIndeterminatePressedForeground}" />
                 </Style>
-                <Style Selector="^.Error">
-                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonErrorIndeterminatePressedBorderBrush}" />
+                <Style Selector="^.Danger">
+                    <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonDangerIndeterminatePressedBorderBrush}" />
+                    <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDangerIndeterminatePressedForeground}" />
                 </Style>
             </Style>
+            <Style Selector="^:disabled">
+                <Setter Property="ToggleButton.BorderBrush" Value="{DynamicResource ToggleButtonIndeterminateDisabledBorderBrush}" />
+            </Style>
         </Style>
 
+        <Style Selector="^:disabled">
+            <Setter Property="ToggleButton.Foreground" Value="{DynamicResource ToggleButtonDefaultDisabledForeground}" />
+            <Setter Property="ToggleButton.Background" Value="{DynamicResource ToggleButtonDefaultDisabledBackground}" />
+        </Style>
+
+        <Style Selector="^.Large">
+            <Setter Property="ToggleButton.Padding" Value="{DynamicResource ButtonLargePadding}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="ToggleButton.Padding" Value="{DynamicResource ButtonSmallPadding}" />
+        </Style>
     </ControlTheme>
 </ResourceDictionary>

src/Semi.Avalonia/Controls/ToggleSwitch.axaml

@@ -15,6 +15,14 @@
         <Setter Property="VerticalAlignment" Value="Center" />
         <Setter Property="HorizontalContentAlignment" Value="Left" />
         <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="KnobTransitions">
+            <Transitions>
+                <DoubleTransition
+                    Easing="CubicEaseOut"
+                    Property="Canvas.Left"
+                    Duration="0:0:0.2" />
+            </Transitions>
+        </Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="ToggleSwitch">
                 <Grid
@@ -103,18 +111,6 @@
             <Setter Property="Margin" Value="0" />
         </Style>
 
-        <!--  NormalState  -->
-        <Style Selector="^:not(:dragging) /template/ Grid#PART_MovingKnobs">
-            <Setter Property="Transitions">
-                <Transitions>
-                    <DoubleTransition
-                        Easing="CubicEaseOut"
-                        Property="Canvas.Left"
-                        Duration="0:0:0.2" />
-                </Transitions>
-            </Setter>
-        </Style>
-
         <Style Selector="^:unchecked">
             <Style Selector="^ /template/ ContentPresenter#PART_OnContentPresenter">
                 <Setter Property="ContentPresenter.IsVisible" Value="False" />
@@ -126,7 +122,7 @@
                 <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDefaultBackground}" />
             </Style>
             <Style Selector="^:pointerover /template/ Border#SwitchBackgroundBorder">
-                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPointerOverBackground}" />
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPointeroverBackground}" />
             </Style>
             <Style Selector="^:pressed /template/ Border#SwitchBackgroundBorder">
                 <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedPressedBackground}" />
@@ -149,7 +145,7 @@
                 <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedDefaultBackground}" />
             </Style>
             <Style Selector="^:pointerover /template/ Border#SwitchBackgroundBorder">
-                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPointerOverBackground}" />
+                <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPointeroverBackground}" />
             </Style>
             <Style Selector="^:pressed /template/ Border#SwitchBackgroundBorder">
                 <Setter Property="Border.Background" Value="{DynamicResource ToggleSwitchContainerCheckedPressedBackground}" />

src/Semi.Avalonia/Controls/TransitioningContentControl.axaml

@@ -5,17 +5,28 @@
     <ControlTheme x:Key="{x:Type TransitioningContentControl}" TargetType="TransitioningContentControl">
         <Setter Property="Template">
             <ControlTemplate>
-                <ContentPresenter
-                    Name="PART_ContentPresenter"
-                    Padding="{TemplateBinding Padding}"
-                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    Content="{TemplateBinding CurrentContent}"
-                    ContentTemplate="{TemplateBinding ContentTemplate}"
-                    CornerRadius="{TemplateBinding CornerRadius}" />
+                <Panel>
+                    <ContentPresenter
+                        Name="PART_ContentPresenter"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                    <ContentPresenter
+                        Name="PART_ContentPresenter2"
+                        Padding="{TemplateBinding Padding}"
+                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        ContentTemplate="{TemplateBinding ContentTemplate}"
+                        CornerRadius="{TemplateBinding CornerRadius}" />
+                </Panel>
             </ControlTemplate>
         </Setter>
     </ControlTheme>

src/Semi.Avalonia/Controls/TreeView.axaml

@@ -93,7 +93,6 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type TreeViewItem}" TargetType="TreeViewItem">
-        <Setter Property="TreeViewItem.Padding" Value="0" />
         <Setter Property="TreeViewItem.Background" Value="{DynamicResource TreeViewItemDefaultBackground}" />
         <Setter Property="TreeViewItem.Foreground" Value="{DynamicResource TreeViewItemDefaultForeground}" />
         <Setter Property="TreeViewItem.CornerRadius" Value="3" />
@@ -132,6 +131,7 @@
                                 HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                 VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                 Content="{TemplateBinding Header}"
+                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                 Focusable="False"
                                 Foreground="{TemplateBinding Foreground}" />
                         </Grid>
@@ -144,9 +144,9 @@
             </ControlTemplate>
         </Setter>
 
-        <!--  PointerOver state  -->
+        <!--  Pointerover state  -->
         <Style Selector="^ /template/ Border#PART_LayoutRoot:pointerover">
-            <Setter Property="Background" Value="{DynamicResource TreeViewItemPointerOverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource TreeViewItemPointeroverBackground}" />
         </Style>
 
         <!--  Pressed state  -->

src/Semi.Avalonia/Converters/ItemToObjectConverter.cs

@@ -12,9 +12,9 @@ public class ItemToObjectConverter: IValueConverter
 {
     public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
     {
-        if (value is ItemCollection list)
+        if (value is int i)
         {
-            return list.Select(a => new object());
+            return Enumerable.Repeat(new object(), i).ToList();
         }
         return new List<object>();
     }

src/Semi.Avalonia/Converters/KeyToPathConverter.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Globalization;
+using Avalonia;
+using Avalonia.Data.Converters;
+using Avalonia.Metadata;
+
+namespace Semi.Avalonia.Converters;
+
+public class KeyToPathConverter: IValueConverter
+{
+    [Content]
+    public IDictionary<string, object?> Resources { get; } = new Dictionary<string, object?>();
+    
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if(value is string s && Resources.TryGetValue(s, out var v))
+            return v;
+        return AvaloniaProperty.UnsetValue;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        throw new NotImplementedException();
+    }
+}

src/Semi.Avalonia/Converters/PositionToAngleConverter.cs

@@ -0,0 +1,27 @@
+using System;
+using System.Globalization;
+using Avalonia.Data.Converters;
+
+namespace Semi.Avalonia.Converters;
+
+public class PositionToAngleConverter: IValueConverter
+{
+    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is double d)
+        {
+            return d * 3.6;
+        }
+
+        return 0;
+    }
+
+    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
+    {
+        if (value is double d)
+        {
+            return d / 3.6;
+        }
+        return 0;
+    }
+}

src/Semi.Avalonia/Semi.Avalonia.csproj

@@ -4,7 +4,7 @@
   
   <PropertyGroup>
     <Title>Semi.Avalonia</Title>
-    <PackageReleaseNotes>Upgrade to Avalonia 11.0.0-preview6. </PackageReleaseNotes>
+    <PackageReleaseNotes>Update to Avalonia 11.0.0-rc1</PackageReleaseNotes>
   </PropertyGroup>
 
   <ItemGroup>

src/Semi.Avalonia/Themes/Dark/Button.axaml

@@ -18,6 +18,7 @@
     <SolidColorBrush x:Key="ButtonDefaultPrimaryForeground" Color="#54A9FF" />
     <SolidColorBrush x:Key="ButtonDefaultSecondaryForeground" Color="#40B4F3" />
     <SolidColorBrush x:Key="ButtonDefaultTertiaryForeground" Color="#888D92" />
+    <SolidColorBrush x:Key="ButtonDefaultSuccessForeground" Color="#5DC264" />
     <SolidColorBrush x:Key="ButtonDefaultWarningForeground" Color="#FFAE43" />
     <SolidColorBrush x:Key="ButtonDefaultDangerForeground" Color="#FC725A" />
     <SolidColorBrush x:Key="ButtonDefaultDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
@@ -35,7 +36,7 @@
     <!--  end Light  -->
 
     <!--  Solid  -->
-    <SolidColorBrush x:Key="ButtonSolidForeground" Color="Black" />
+    <SolidColorBrush x:Key="ButtonSolidForeground" Color="White" />
     <SolidColorBrush x:Key="ButtonSolidDisabledForeground" Color="Gray" />
 
     <SolidColorBrush x:Key="ButtonSolidPrimaryBackground" Color="#54A9FF" />
@@ -50,6 +51,10 @@
     <SolidColorBrush x:Key="ButtonSolidTertiaryPointeroverBackground" Color="#A7ABB0" />
     <SolidColorBrush x:Key="ButtonSolidTertiaryPressedBackground" Color="#C6CACD" />
 
+    <SolidColorBrush x:Key="ButtonSolidSuccessBackground" Color="#5DC264" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPointeroverBackground" Color="#7FD184" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPressedBackground" Color="#A6E1A8" />
+
     <SolidColorBrush x:Key="ButtonSolidWarningBackground" Color="#FFAE43" />
     <SolidColorBrush x:Key="ButtonSolidWarningPointeroverBackground" Color="#FFC772" />
     <SolidColorBrush x:Key="ButtonSolidWarningPressedBackground" Color="#FFDDA1" />
@@ -72,6 +77,10 @@
     <SolidColorBrush x:Key="ButtonSolidTertiaryPointeroverBorderBrush" Color="#A7ABB0" />
     <SolidColorBrush x:Key="ButtonSolidTertiaryPressedBorderBrush" Color="#C6CACD" />
 
+    <SolidColorBrush x:Key="ButtonSolidSuccessBorderBrush" Color="#5DC264" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPointeroverBorderBrush" Color="#7FD184" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPressedBorderBrush" Color="#A6E1A8" />
+
     <SolidColorBrush x:Key="ButtonSolidWarningBorderBrush" Color="#FFAE43" />
     <SolidColorBrush x:Key="ButtonSolidWarningPointeroverBorderBrush" Color="#FFC772" />
     <SolidColorBrush x:Key="ButtonSolidWarningPressedBorderBrush" Color="#FFDDA1" />

src/Semi.Avalonia/Themes/Dark/CheckBox.axaml

@@ -10,15 +10,15 @@
 
     <SolidColorBrush x:Key="CheckBoxDefaultBackground" Color="Transparent" />
     <SolidColorBrush x:Key="CheckBoxDefaultBorderBrush" Opacity="0.35" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="CheckBoxPointOverBackground" Opacity="0.12" Color="White" />
-    <SolidColorBrush x:Key="CheckBoxPointOverBorderBrush" Color="#54A9FF" />
+    <SolidColorBrush x:Key="CheckBoxPointeroverBackground" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="CheckBoxPointeroverBorderBrush" Color="#54A9FF" />
     <SolidColorBrush x:Key="CheckBoxPressedBackground" Color="#A9D7FF" />
     <SolidColorBrush x:Key="CheckBoxPressedBorderBrush" Color="#A9D7FF" />
 
     <SolidColorBrush x:Key="CheckBoxCheckedDefaultBackground" Color="#54A9FF" />
     <SolidColorBrush x:Key="CheckBoxCheckedDefaultBorderBrush" Color="#54A9FF" />
-    <SolidColorBrush x:Key="CheckBoxCheckedPointOverBackground" Color="#7FC1FF" />
-    <SolidColorBrush x:Key="CheckBoxCheckedPointOverBorderBrush" Color="#7FC1FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPointeroverBackground" Color="#7FC1FF" />
+    <SolidColorBrush x:Key="CheckBoxCheckedPointeroverBorderBrush" Color="#7FC1FF" />
     <SolidColorBrush x:Key="CheckBoxCheckedPressedBackground" Color="#A9D7FF" />
     <SolidColorBrush x:Key="CheckBoxCheckedPressedBorderBrush" Color="#A9D7FF" />
 

src/Semi.Avalonia/Themes/Dark/ComboBox.axaml

@@ -1,16 +1,16 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <SolidColorBrush x:Key="ComboBoxSelectorBackground" Opacity="0.12" Color="White" />
-    <SolidColorBrush x:Key="ComboBoxSelectorPointerOverBackground" Opacity="0.16" Color="White" />
+    <SolidColorBrush x:Key="ComboBoxSelectorPointeroverBackground" Opacity="0.16" Color="White" />
     <SolidColorBrush x:Key="ComboBoxSelectorPressedBackground" Opacity="0.20" Color="White" />
     <SolidColorBrush x:Key="ComboBoxSelectorDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
     <SolidColorBrush x:Key="ComboBoxSelectorBorderBrush" Color="Transparent" />
-    <SolidColorBrush x:Key="ComboBoxSelectorPointerOverBorderBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="ComboBoxSelectorPointeroverBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="ComboBoxSelectorPressedBorderBrush" Color="#A9D7FF" />
 
     <CornerRadius x:Key="ComboBoxSelectorCornerRadius">3</CornerRadius>
 
     <SolidColorBrush x:Key="ComboBoxIconDefaultForeground" Opacity="0.62" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="ComboBoxIconPointerOverForeground" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="ComboBoxIconPointeroverForeground" Color="#F9F9F9" />
     <SolidColorBrush x:Key="ComboBoxIconPressedForeground" Color="#F9F9F9" />
     <SolidColorBrush x:Key="ComboBoxIconDisabledForeground" Opacity="0.35" Color="#F9F9F9" />
 
@@ -27,10 +27,10 @@
     <SolidColorBrush x:Key="ComboBoxItemForeground" Color="#F9F9F9" />
 
     <SolidColorBrush x:Key="ComboBoxItemBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="ComboBoxItemPointerOverBackground" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="ComboBoxItemPointeroverBackground" Opacity="0.12" Color="White" />
     <SolidColorBrush x:Key="ComboBoxItemPressedBackground" Opacity="0.16" Color="White" />
-    <SolidColorBrush x:Key="ComboBoxItemSelectedBackground" Color="#053170" />
-    <SolidColorBrush x:Key="ComboBoxItemSelectedPointerOverBackground" Color="#0A4694" />
+    <SolidColorBrush x:Key="ComboBoxItemSelectedBackground" Opacity="0.2" Color="#54A9FF" />
+    <SolidColorBrush x:Key="ComboBoxItemSelectedPointeroverBackground" Opacity="0.3" Color="#54A9FF" />
 
     <SolidColorBrush x:Key="ComboBoxItemDisabledBackground" Color="Transparent" />
     <SolidColorBrush x:Key="ComboBoxItemSelectedDisabledBackground" Opacity="0.04" Color="#E6E8EA" />

src/Semi.Avalonia/Themes/Dark/Dark.axaml

@@ -13,11 +13,13 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Carousel.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/ComboBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DataValidationErrors.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DatePicker.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DateTimePickerShared.axaml" />
-        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DropdownButton.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/DropDownButton.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/GridSplitter.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/ListBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Dark/ManagedFileChooser.axaml" />

src/Semi.Avalonia/Themes/Dark/DataValidationErrors.axaml

@@ -0,0 +1,12 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+    <SolidColorBrush x:Key="DataValidationErrorsForeground" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="DataValidationErrorsBackground" Opacity="0.2" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="DataValidationErrorsBorderBrush" Opacity="0.2" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="DataValidationErrorsPointerOverBackground" Opacity="0.3" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="DataValidationErrorsPointerOverBorderBrush" Opacity="0.3" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="DataValidationErrorsPressedBackground" Opacity="0.4" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="DataValidationErrorsPressedBorderBrush" Opacity="0.4" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="DataValidationErrorsSelectedBackground" Opacity="0.2" Color="#FFFC725A" />
+    <SolidColorBrush x:Key="DataValidationErrorsSelectedBorderBrush" Color="#FFFC725A" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/DateTimePickerShared.axaml

@@ -20,7 +20,7 @@
     <PathGeometry x:Key="DateTimePickerDismissGlyph">M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z</PathGeometry>
 
     <SolidColorBrush x:Key="DateTimePickerSeparatorBackground" Opacity="0.08" Color="#F9F9F9" />
-    <sys:Double x:Key="DateTimePickerListBoxItemHeight">28</sys:Double>
+    <sys:Double x:Key="DateTimePickerListBoxItemHeight">30</sys:Double>
 
 
     <SolidColorBrush x:Key="DateTimePickerButtonBorderBrush" Color="Transparent" />
@@ -31,7 +31,7 @@
     <SolidColorBrush x:Key="DateTimePickerEmptyForeground" Opacity="0.5" Color="#F9F9F9" />
 
     <SolidColorBrush x:Key="DateTimePickerButtonPointeroverBackground" Opacity="0.16" Color="White" />
-    <SolidColorBrush x:Key="DateTimePickerButtonDisabledBorderBrush" Color="Transparent"  />
+    <SolidColorBrush x:Key="DateTimePickerButtonDisabledBorderBrush" Color="Transparent" />
     <SolidColorBrush x:Key="DateTimePickerButtonDisabledBackground" Opacity="0.04" Color="#E6E8EA" />
     <SolidColorBrush x:Key="DateTimePickerButtonDisabledIconForeground" Opacity="0.4" Color="#E6E8EA" />
 

src/Semi.Avalonia/Themes/Dark/DropDownButton.axaml

@@ -1,4 +1,4 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
-    <PathGeometry x:Key="DropdownButtonIconGlyph">M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z</PathGeometry>
+    <PathGeometry x:Key="DropDownButtonIconGlyph">M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z</PathGeometry>
 </ResourceDictionary>

src/Semi.Avalonia/Themes/Dark/HeaderedContentControl.axaml

@@ -0,0 +1,6 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <SolidColorBrush x:Key="HeaderedContentControlDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="HeaderedContentControlDefaultBorderBrush" Opacity="0.08" Color="#F9F9F9" />
+    <CornerRadius x:Key="HeaderedContentControlCornerRadius">4</CornerRadius>
+</ResourceDictionary>