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.1
+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.1
+dotnet add package Semi.Avalonia.ColorPicker --version 11.0.0-rc1
-dotnet add package Semi.Avalonia.DataGrid --version 0.1.0-preview6.1
+dotnet add package Semi.Avalonia.DataGrid --version 11.0.0-rc1
 ```
 ```xaml
 <Application.Styles>
@@ -44,9 +42,12 @@ 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**
 

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.Browser" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.0-preview6" />
+        <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
     </ItemGroup>
 
     <ItemGroup>

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;
@@ -95,7 +96,8 @@ public class ColorDetailControl: TemplatedControl
             }
         }
 
-        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/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
@@ -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/CheckBoxDemo.axaml

@@ -26,6 +26,27 @@
                 </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="Horizontal">
                 <CheckBox Width="300" Theme="{DynamicResource CardCheckBox}">

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="* * * * *"
+        ColumnDefinitions="*, *, *, *, *"
-        RowDefinitions="* * * * *">
+        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>

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/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
@@ -96,8 +97,8 @@
                         </StackPanel>
                     </CheckBox>
                     <CheckBox
-                        IsChecked="True"
                         Margin="4"
+                        IsChecked="True"
                         Theme="{StaticResource CardCheckBox}">
                         <StackPanel>
                             <TextBlock FontWeight="Bold">Option 2</TextBlock>
@@ -105,9 +106,9 @@
                         </StackPanel>
                     </CheckBox>
                     <CheckBox
-                        IsThreeState="True"
-                        IsChecked="{x:Null}"
                         Margin="4"
+                        IsChecked="{x:Null}"
+                        IsThreeState="True"
                         Theme="{StaticResource CardCheckBox}">
                         <StackPanel>
                             <TextBlock FontWeight="Bold">Option 3</TextBlock>
@@ -123,8 +124,8 @@
                         </StackPanel>
                     </CheckBox>
                     <CheckBox
-                        IsChecked="True"
                         Margin="4"
+                        IsChecked="True"
                         Theme="{StaticResource PureCardCheckBox}">
                         <StackPanel>
                             <TextBlock FontWeight="Bold">Option 2</TextBlock>
@@ -133,8 +134,8 @@
                     </CheckBox>
                     <CheckBox
                         Margin="4"
-                        IsThreeState="True"
                         IsChecked="{x:Null}"
+                        IsThreeState="True"
                         Theme="{StaticResource PureCardCheckBox}">
                         <StackPanel>
                             <TextBlock FontWeight="Bold">Option 3</TextBlock>
@@ -179,7 +180,7 @@
                 <TimePicker />
                 <CalendarDatePicker />
             </StackPanel>
-            <Grid ColumnDefinitions="* * *">
+            <Grid ColumnDefinitions="*, *, *">
                 <Border Theme="{StaticResource CardBorder}">
                     <TextBlock>Card</TextBlock>
                 </Border>

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

@@ -63,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" />
@@ -71,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
@@ -87,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" />
@@ -95,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
@@ -112,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">
+    <ScrollViewer>
-        <ProgressBar
+        <StackPanel HorizontalAlignment="Left" Spacing="20">
-            Width="200"
+            <StackPanel
-            Maximum="100"
+                HorizontalAlignment="Left"
-            Minimum="0"
+                Orientation="Horizontal"
-            ShowProgressText="True"
+                Spacing="20">
-            Value="20" />
+                <ProgressBar
-        <ProgressBar
+                    Width="100"
-            Width="200"
+                    Height="100"
-            IsIndeterminate="True"
+                    Maximum="{Binding #slider.Maximum}"
-            Maximum="100"
+                    Minimum="{Binding #slider.Minimum}"
-            Minimum="0"
+                    Theme="{DynamicResource ProgressRing}"
-            ShowProgressText="True"
+                    Value="{Binding #slider.Value}"
-            Value="20" />
+                    ShowProgressText="True"/>
-        <ProgressBar
+                <ProgressBar
-            Width="200"
+                    Width="100"
-            Classes="Left"
+                    Height="100"
-            IsIndeterminate="True"
+                    IsIndeterminate="True"
-            Maximum="100"
+                    Maximum="{Binding #slider.Maximum}"
-            Minimum="0"
+                    Minimum="{Binding #slider.Minimum}"
-            ShowProgressText="True"
+                    Theme="{DynamicResource ProgressRing}"
-            Value="20" />
+                    ShowProgressText="True"/>
-        <ProgressBar
+            </StackPanel>
-            Width="200"
+            <Slider
-            Classes="Left"
+                Name="slider"
-            Maximum="100"
+                Width="300"
-            Minimum="0"
+                IsSnapToTickEnabled="True"
-            ShowProgressText="True"
+                Maximum="100"
-            Value="20" />
+                Minimum="0"
-        <ProgressBar
+                TickFrequency="10" />
-            Width="200"
+            <ProgressBar
-            Classes="Right"
+                Width="200"
-            Maximum="100"
+                Maximum="100"
-            Minimum="0"
+                Minimum="0"
-            ShowProgressText="True"
+                ShowProgressText="True"
-            Value="20" />
+                Value="{Binding #slider.Value}" />
-        <StackPanel
+            <ProgressBar
-            HorizontalAlignment="Left"
+                Width="200"
-            Orientation="Horizontal"
+                IsIndeterminate="True"
-            Spacing="20">
-            <ProgressBar
-                Classes="Left"
                 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="True"
-                ShowProgressText="False"
+                Value="60" />
-                Value="20" />
+            <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
+    </ScrollViewer>
-            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>

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

@@ -23,25 +23,28 @@
                         <RadioButton Classes="Small" Theme="{DynamicResource ButtonRadioButton}">小1</RadioButton>
                         <RadioButton
                             Classes="Small"
-                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsChecked="True"
-                            IsChecked="True">
+                            Theme="{DynamicResource ButtonRadioButton}">
                             小2
                         </RadioButton>
                     </StackPanel>
                 </Border>
-                <Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
                     <StackPanel Orientation="Horizontal">
                         <RadioButton
                             Classes="Small"
-                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsEnabled="False"
-                            IsEnabled="False">
+                            Theme="{DynamicResource ButtonRadioButton}">
                             小1
                         </RadioButton>
                         <RadioButton
                             Classes="Small"
-                            Theme="{DynamicResource ButtonRadioButton}"
                             IsChecked="True"
-                            IsEnabled="False">
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
                             小2
                         </RadioButton>
                     </StackPanel>
@@ -51,16 +54,19 @@
                 <Border HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
                     <StackPanel Orientation="Horizontal">
                         <RadioButton Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
-                        <RadioButton Theme="{DynamicResource ButtonRadioButton}" IsChecked="True">默认2</RadioButton>
+                        <RadioButton IsChecked="True" Theme="{DynamicResource ButtonRadioButton}">默认2</RadioButton>
                     </StackPanel>
                 </Border>
-                <Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
                     <StackPanel Orientation="Horizontal">
-                        <RadioButton Theme="{DynamicResource ButtonRadioButton}" IsEnabled="False">默认1</RadioButton>
+                        <RadioButton IsEnabled="False" Theme="{DynamicResource ButtonRadioButton}">默认1</RadioButton>
                         <RadioButton
-                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsChecked="True"
                             IsEnabled="False"
-                            IsChecked="True">
+                            Theme="{DynamicResource ButtonRadioButton}">
                             默认2
                         </RadioButton>
                     </StackPanel>
@@ -72,25 +78,28 @@
                         <RadioButton Classes="Large" Theme="{DynamicResource ButtonRadioButton}">大1</RadioButton>
                         <RadioButton
                             Classes="Large"
-                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsChecked="True"
-                            IsChecked="True">
+                            Theme="{DynamicResource ButtonRadioButton}">
                             大2
                         </RadioButton>
                     </StackPanel>
                 </Border>
-                <Border Margin="8 0" HorizontalAlignment="Left" Theme="{StaticResource RadioButtonGroupBorder}">
+                <Border
+                    Margin="8,0"
+                    HorizontalAlignment="Left"
+                    Theme="{StaticResource RadioButtonGroupBorder}">
                     <StackPanel Orientation="Horizontal">
                         <RadioButton
                             Classes="Large"
-                            Theme="{DynamicResource ButtonRadioButton}"
+                            IsEnabled="False"
-                            IsEnabled="False">
+                            Theme="{DynamicResource ButtonRadioButton}">
                             大1
                         </RadioButton>
                         <RadioButton
                             Classes="Large"
-                            Theme="{DynamicResource ButtonRadioButton}"
                             IsChecked="True"
-                            IsEnabled="False">
+                            IsEnabled="False"
+                            Theme="{DynamicResource ButtonRadioButton}">
                             大2
                         </RadioButton>
                     </StackPanel>
@@ -104,7 +113,10 @@
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </RadioButton>
-                <RadioButton IsChecked="True" Width="300" Theme="{DynamicResource CardRadioButton}">
+                <RadioButton
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource CardRadioButton}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">单选框标题</TextBlock>
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
@@ -112,16 +124,19 @@
                 </RadioButton>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
-                <RadioButton IsEnabled="False" Width="300" Theme="{DynamicResource CardRadioButton}">
+                <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"
-                    Width="300"
                     Theme="{DynamicResource CardRadioButton}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">单选框标题</TextBlock>
@@ -137,7 +152,10 @@
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
                     </StackPanel>
                 </RadioButton>
-                <RadioButton IsChecked="True" Width="300" Theme="{DynamicResource PureCardRadioButton}">
+                <RadioButton
+                    Width="300"
+                    IsChecked="True"
+                    Theme="{DynamicResource PureCardRadioButton}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">单选框标题</TextBlock>
                         <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统</TextBlock>
@@ -145,16 +163,19 @@
                 </RadioButton>
             </StackPanel>
             <StackPanel Orientation="Horizontal">
-                <RadioButton IsEnabled="False" Width="300" Theme="{DynamicResource PureCardRadioButton}">
+                <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"
-                    Width="300"
                     Theme="{DynamicResource PureCardRadioButton}">
                     <StackPanel>
                         <TextBlock FontWeight="Bold">单选框标题</TextBlock>

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

@@ -14,6 +14,7 @@
             <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="Danger">Danger</ToggleButton>
             <ToggleButton Classes="Danger" IsEnabled="False">Danger</ToggleButton>
@@ -24,6 +25,7 @@
             <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>
@@ -34,6 +36,7 @@
             <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>

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

@@ -4,10 +4,13 @@
     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">
-    <Panel HorizontalAlignment="Left">
+    <StackPanel HorizontalAlignment="Left">
         <TreeView>
             <TreeViewItem Header="Level 1">
                 <TreeViewItem Header="Level 2" />
@@ -42,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

@@ -11,36 +11,13 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="11.0.0-preview6" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
-        <PackageReference Include="Avalonia.Controls.DataGrid" Version="11.0.0-preview6" />
+        <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

@@ -196,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;
         }

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,11 +3,11 @@
         <TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>10</LangVersion>
-        <Version>0.1.0-preview6.1</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"
+                                                IsAlphaVisible="True"
-                                                IsSaturationValueMaxForced="False"
+                                                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}" />
+                                                        <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentTextInputVisible" 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}" />
+                                                        <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                                        <Binding Path="IsComponentSliderVisible" 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"
+                                    IsAlphaVisible="True"
-                                    IsSaturationValueMaxForced="False"
+                                    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}" />
+                                            <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentTextInputVisible" 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}" />
+                                            <ReflectionBinding Path="IsAlphaVisible" RelativeSource="{RelativeSource TemplatedParent}" />
-                                            <Binding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <ReflectionBinding Path="IsComponentSliderVisible" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
                                     </primitives:ColorSlider.IsVisible>
                                 </primitives:ColorSlider>

src/Semi.Avalonia.ColorPicker/Dark.axaml

@@ -32,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" />
 

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" />
+                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.ColorPicker/Light.axaml" />
-                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.ColorPicker/Dark.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

@@ -32,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" />
 

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

@@ -4,7 +4,7 @@
 
     <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.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" />
+                <MergeResourceInclude x:Key="Default" Source="avares://Semi.Avalonia.DataGrid/Light.axaml" />
-                <ResourceInclude x:Key="Dark" Source="avares://Semi.Avalonia.DataGrid/Dark.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>
+                <DataValidationErrors>
-                    <TextBox
+                    <Panel>
-                        Name="PART_TextBox"
+                        <TextBox
-                        VerticalAlignment="Center"
+                            Name="PART_TextBox"
-                        DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
+                            VerticalAlignment="Center"
-                        Watermark="{TemplateBinding Watermark}" />
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
-                    <Popup
+                            Theme="{DynamicResource NonErrorTextBox}"
-                        Name="PART_Popup"
+                            Watermark="{TemplateBinding Watermark}" />
-                        MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                        <Popup
-                        MaxHeight="{TemplateBinding MaxDropDownHeight}"
+                            Name="PART_Popup"
-                        IsLightDismissEnabled="True"
+                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        PlacementTarget="{TemplateBinding}">
+                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
-                        <Border
+                            IsLightDismissEnabled="True"
-                            Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
+                            PlacementTarget="{TemplateBinding}">
-                            HorizontalAlignment="Stretch"
+                            <Border
-                            Background="{DynamicResource AutoCompleteBoxPopupBackground}"
+                                Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
-                            BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
+                                HorizontalAlignment="Stretch"
-                            BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
+                                Background="{DynamicResource AutoCompleteBoxPopupBackground}"
-                            BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
+                                BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
-                            CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
+                                BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
-                            <ListBox
+                                BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
-                                Name="PART_SelectingItemsControl"
+                                CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                Foreground="{TemplateBinding Foreground}"
+                                <ListBox
-                                ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    Name="PART_SelectingItemsControl"
-                                ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                    Foreground="{TemplateBinding Foreground}"
-                                ScrollViewer.VerticalScrollBarVisibility="Auto" />
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
-                        </Border>
+                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                    </Popup>
+                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
-                </Panel>
+                            </Border>
+                        </Popup>
+                    </Panel>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 

src/Semi.Avalonia/Controls/Button.axaml

@@ -54,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>
@@ -141,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,107 +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
+                <DataValidationErrors>
-                    x:Name="LayoutRoot"
+                    <Panel
-                    HorizontalAlignment="Stretch"
+                        x:Name="LayoutRoot"
-                    VerticalAlignment="Stretch">
+                        HorizontalAlignment="Stretch"
-                    <Border
+                        VerticalAlignment="Stretch">
-                        x:Name="Background"
+                        <Border
-                        Background="{TemplateBinding Background}"
+                            x:Name="Background"
-                        BorderBrush="{TemplateBinding BorderBrush}"
+                            Background="{TemplateBinding Background}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
+                            BorderThickness="{TemplateBinding BorderThickness}"
-                        <Grid
+                            CornerRadius="{TemplateBinding CornerRadius}">
-                            HorizontalAlignment="Stretch"
+                            <Grid
-                            VerticalAlignment="Center"
-                            ColumnDefinitions="*,Auto">
-                            <TextBox
-                                Name="PART_TextBox"
-                                Grid.Column="0"
-                                MinHeight="{DynamicResource CalendarDatePickerInnerDefaultHeight}"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Center"
-                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                ColumnDefinitions="*,Auto">
-                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                                <TextBox
-                                Background="Transparent"
+                                    Name="PART_TextBox"
-                                BorderBrush="Transparent"
+                                    Grid.Column="0"
-                                BorderThickness="0"
+                                    MinHeight="{DynamicResource CalendarDatePickerDefaultHeight}"
-                                CornerRadius="{TemplateBinding CornerRadius}"
+                                    HorizontalAlignment="Stretch"
-                                Foreground="{TemplateBinding Foreground}"
+                                    VerticalAlignment="Center"
-                                UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
+                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                Watermark="{TemplateBinding Watermark}">
+                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                                <TextBox.Styles>
+                                    Background="Transparent"
-                                    <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
+                                    BorderBrush="Transparent"
-                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                                    BorderThickness="0"
-                                        <Setter Property="Background" Value="Transparent" />
+                                    CornerRadius="{TemplateBinding CornerRadius}"
-                                        <Setter Property="BorderBrush" Value="Transparent" />
+                                    Foreground="{TemplateBinding Foreground}"
-                                        <Setter Property="BorderThickness" Value="0" />
+                                    Theme="{DynamicResource NonErrorTextBox}"
-                                    </Style>
+                                    UseFloatingWatermark="{TemplateBinding UseFloatingWatermark}"
-                                    <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
+                                    Watermark="{TemplateBinding Watermark}">
-                                        <!--  By default the TextBox has its own focused state, override this to disable it here  -->
+                                    <TextBox.Styles>
-                                        <Setter Property="Background" Value="Transparent" />
+                                        <Style Selector="TextBox#PART_TextBox:pointerover /template/ Border#PART_ContentPresenterBorder">
-                                        <Setter Property="BorderBrush" Value="Transparent" />
+                                            <!--  By default the TextBox has its own focused state, override this to disable it here  -->
-                                        <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" />
+                                            <Setter Property="BorderThickness" Value="0" />
                                         </Style>
-                                    </Style>
+                                        <Style Selector="TextBox#PART_TextBox:focus /template/ Border#PART_ContentPresenterBorder">
-                                </TextBox.Styles>
+                                            <!--  By default the TextBox has its own focused state, override this to disable it here  -->
-                            </TextBox>
+                                            <Setter Property="Background" Value="Transparent" />
-                            <Button
+                                            <Setter Property="BorderBrush" Value="Transparent" />
-                                Name="PART_Button"
+                                            <Setter Property="BorderThickness" Value="0" />
-                                Grid.Column="1"
+                                        </Style>
-                                Padding="0,0,8,0"
+                                        <Style Selector="TextBox#PART_TextBox:disabled">
-                                Cursor="Hand"
+                                            <Style Selector="^ /template/ Border#PART_ContentPresenterBorder">
-                                Focusable="False"
+                                                <!--  By default the TextBox has its own disabled state, override this to make the border background show through  -->
-                                Theme="{DynamicResource CalendarDatePickerButton}" />
+                                                <Setter Property="Background" Value="Transparent" />
-                            <Popup
+                                                <Setter Property="BorderBrush" Value="Transparent" />
-                                Name="PART_Popup"
+                                            </Style>
-                                HorizontalOffset="-8"
+                                        </Style>
-                                IsLightDismissEnabled="True"
+                                    </TextBox.Styles>
-                                PlacementTarget="{TemplateBinding}"
+                                </TextBox>
-                                VerticalOffset="-4">
+                                <Button
-                                <Border
+                                    Name="PART_Button"
-                                    Margin="8"
+                                    Grid.Column="1"
-                                    Background="Transparent"
+                                    Padding="0,0,8,0"
-                                    BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
+                                    Cursor="Hand"
-                                    CornerRadius="{DynamicResource CalendarCornerRadius}">
+                                    Focusable="False"
-                                    <Calendar
+                                    Theme="{DynamicResource CalendarDatePickerButton}" />
-                                        Name="PART_Calendar"
+                                <Popup
-                                        BorderThickness="0"
+                                    Name="PART_Popup"
-                                        CornerRadius="{Binding $parent[Border].CornerRadius}"
+                                    HorizontalOffset="-8"
-                                        DisplayDate="{TemplateBinding DisplayDate}"
+                                    IsLightDismissEnabled="True"
-                                        DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
+                                    PlacementTarget="{TemplateBinding}"
-                                        DisplayDateStart="{TemplateBinding DisplayDateStart}"
+                                    VerticalOffset="-4">
-                                        FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
+                                    <Border
-                                        IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
+                                        Margin="8"
-                                        SelectedDate="{TemplateBinding SelectedDate,
+                                        Background="Transparent"
-                                                                       Mode=TwoWay}" />
+                                        BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
-                                </Border>
+                                        CornerRadius="{DynamicResource CalendarCornerRadius}">
-                            </Popup>
+                                        <Calendar
-                        </Grid>
+                                            Name="PART_Calendar"
-                    </Border>
+                                            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>
@@ -166,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}" />
@@ -189,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="Left" />
-        <Setter Property="HorizontalAlignment" Value="Stretch" />
+        <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,50 +17,45 @@
         <Setter Property="BorderBrush" Value="{DynamicResource CheckBoxDefaultBorderBrush}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="CheckBox">
-                <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
+                <Border
-                    <Border
+                    x:Name="RootBorder"
-                        x:Name="PART_Border"
+                    Background="{TemplateBinding Background}"
-                        Grid.Column="0"
+                    BorderBrush="{TemplateBinding BorderBrush}"
-                        Grid.ColumnSpan="2"
+                    BorderThickness="{TemplateBinding BorderThickness}"
-                        HorizontalAlignment="Center"
+                    CornerRadius="{TemplateBinding CornerRadius}">
-                        Background="{TemplateBinding Background}"
+                    <Grid x:Name="RootGrid" ColumnDefinitions="Auto,*">
-                        BorderBrush="{TemplateBinding BorderBrush}"
+                        <Grid
-                        BorderThickness="{TemplateBinding BorderThickness}"
+                            Grid.Column="0"
-                        CornerRadius="{TemplateBinding CornerRadius}" />
+                            Margin="0,0,0,0"
-
+                            VerticalAlignment="Center">
-                    <Grid
+                            <Border
-                        Grid.Column="0"
+                                x:Name="NormalRectangle"
-                        Margin="0,0,0,0"
+                                Width="{DynamicResource CheckBoxBoxWidth}"
-                        VerticalAlignment="Center">
+                                Height="{DynamicResource CheckBoxBoxHeight}"
-                        <Border
+                                Background="{DynamicResource CheckBoxDefaultBackground}"
-                            x:Name="NormalRectangle"
+                                BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
-                            Width="{DynamicResource CheckBoxBoxWidth}"
+                                BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
-                            Height="{DynamicResource CheckBoxBoxHeight}"
+                                CornerRadius="{TemplateBinding CornerRadius}"
-                            Background="{DynamicResource CheckBoxDefaultBackground}"
+                                UseLayoutRounding="False" />
-                            BorderBrush="{DynamicResource CheckBoxDefaultBorderBrush}"
+                            <PathIcon
-                            BorderThickness="{DynamicResource CheckBoxBoxBorderThickness}"
+                                Name="CheckGlyph"
-                            CornerRadius="{TemplateBinding CornerRadius}"
+                                Width="{DynamicResource CheckBoxBoxGlyphWidth}"
-                            UseLayoutRounding="False" />
+                                Height="{DynamicResource CheckBoxBoxGlyphHeight}"
-                        <PathIcon
+                                Foreground="{DynamicResource CheckBoxGlyphFill}" />
-                            Name="CheckGlyph"
+                        </Grid>
-                            Width="{DynamicResource CheckBoxBoxGlyphWidth}"
+                        <ContentPresenter
-                            Height="{DynamicResource CheckBoxBoxGlyphHeight}"
+                            x:Name="ContentPresenter"
-                            Foreground="{DynamicResource CheckBoxGlyphFill}" />
+                            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
+                </Border>
-                        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>
             </ControlTemplate>
         </Setter>
 
@@ -178,6 +173,155 @@
         </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" />

src/Semi.Avalonia/Controls/ComboBox.axaml

@@ -36,105 +36,105 @@
         <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">
+                <DataValidationErrors>
-                    <Border
+                    <Grid ColumnDefinitions="*,32">
-                        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">
                         <Border
-                            x:Name="PopupBorder"
+                            x:Name="Background"
-                            Margin="0,4"
+                            Grid.Column="0"
-                            HorizontalAlignment="Stretch"
+                            Grid.ColumnSpan="2"
-                            Background="{DynamicResource ComboBoxPopupBackground}"
+                            MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
-                            BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
+                            MinHeight="{DynamicResource ComboBoxDefaultHeight}"
-                            BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
+                            Background="{TemplateBinding Background}"
-                            BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
-                            ClipToBounds="True"
+                            BorderThickness="{TemplateBinding BorderThickness}"
-                            CornerRadius="6">
+                            CornerRadius="{TemplateBinding CornerRadius}" />
-                            <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                        <TextBlock
-                                <ItemsPresenter
+                            x:Name="PlaceholderTextBlock"
-                                    Name="PART_ItemsPresenter"
+                            Grid.Column="0"
-                                    Margin="{DynamicResource ComboBoxDropdownContentMargin}"
+                            Margin="{TemplateBinding Padding}"
-                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
+                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                            </ScrollViewer>
+                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                        </Border>
+                            Foreground="{TemplateBinding Foreground}"
-                    </Popup>
+                            IsVisible="{TemplateBinding SelectionBoxItem,
-                </Grid>
+                                                        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>
 
@@ -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>
 

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,6 +16,7 @@
         <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" />
@@ -23,6 +24,7 @@
         <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}">
+                <DataValidationErrors>
-                    <Button
+                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
-                        Name="PART_FlyoutButton"
+                        <Button
-                        Width="298"
+                            Name="PART_FlyoutButton"
-                        MinWidth="298"
+                            Width="298"
-                        HorizontalAlignment="Stretch"
+                            MinWidth="298"
-                        VerticalAlignment="Stretch"
+                            HorizontalAlignment="Stretch"
-                        Background="{TemplateBinding Background}"
+                            VerticalAlignment="Stretch"
-                        BorderBrush="{TemplateBinding BorderBrush}"
+                            Background="{TemplateBinding Background}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
-                        Cursor="Hand"
+                            CornerRadius="{TemplateBinding CornerRadius}"
-                        Foreground="{TemplateBinding Foreground}"
+                            Cursor="Hand"
-                        IsEnabled="{TemplateBinding IsEnabled}"
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
-                        Theme="{StaticResource DateTimePickerFlyoutButton}">
+                            Foreground="{TemplateBinding Foreground}"
-                        <Grid ColumnDefinitions="*, Auto">
+                            IsEnabled="{TemplateBinding IsEnabled}"
-                            <Grid
+                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
-                                Name="PART_ButtonContentGrid"
+                            Theme="{StaticResource DateTimePickerFlyoutButton}">
-                                Grid.Column="0"
+                            <Grid ColumnDefinitions="*, Auto">
-                                VerticalAlignment="Center"
+                                <Grid
-                                ColumnDefinitions="78*,Auto,132*,Auto,78*">
+                                    Name="PART_ButtonContentGrid"
-                                <TextBlock
+                                    Grid.Column="0"
-                                    Name="PART_DayTextBlock"
-                                    Padding="12,4"
-                                    HorizontalAlignment="Center"
                                     VerticalAlignment="Center"
-                                    FontFamily="{TemplateBinding FontFamily}"
+                                    ColumnDefinitions="78*,Auto,132*,Auto,78*">
-                                    FontSize="{TemplateBinding FontSize}"
+                                    <TextBlock
-                                    FontWeight="{TemplateBinding FontWeight}"
+                                        Name="PART_DayTextBlock"
-                                    Text="day" />
+                                        Padding="12,4"
-                                <TextBlock
+                                        HorizontalAlignment="Center"
-                                    Name="PART_MonthTextBlock"
+                                        VerticalAlignment="Center"
-                                    Padding="12,4"
+                                        FontFamily="{TemplateBinding FontFamily}"
-                                    VerticalAlignment="Center"
+                                        FontSize="{TemplateBinding FontSize}"
-                                    FontFamily="{TemplateBinding FontFamily}"
+                                        FontWeight="{TemplateBinding FontWeight}"
-                                    FontSize="{TemplateBinding FontSize}"
+                                        Text="day" />
-                                    FontWeight="{TemplateBinding FontWeight}"
+                                    <TextBlock
-                                    Text="month"
+                                        Name="PART_MonthTextBlock"
-                                    TextAlignment="Left" />
+                                        Padding="12,4"
-                                <TextBlock
+                                        VerticalAlignment="Center"
-                                    Name="PART_YearTextBlock"
+                                        FontFamily="{TemplateBinding FontFamily}"
-                                    Padding="12,4"
+                                        FontSize="{TemplateBinding FontSize}"
-                                    HorizontalAlignment="Center"
+                                        FontWeight="{TemplateBinding FontWeight}"
-                                    VerticalAlignment="Center"
+                                        Text="month"
-                                    FontFamily="{TemplateBinding FontFamily}"
+                                        TextAlignment="Left" />
-                                    FontSize="{TemplateBinding FontSize}"
+                                    <TextBlock
-                                    FontWeight="{TemplateBinding FontWeight}"
+                                        Name="PART_YearTextBlock"
-                                    Text="year" />
+                                        Padding="12,4"
-                                <Rectangle
+                                        HorizontalAlignment="Center"
-                                    x:Name="PART_FirstSpacer"
+                                        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"
+                                    Width="16"
-                                    Margin="0,4"
+                                    Height="16"
-                                    HorizontalAlignment="Center"
+                                    Margin="0,0,8,0"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                    Data="{DynamicResource DatePickerIconGlyph}"
-                                <Rectangle
+                                    Foreground="{DynamicResource DateTimePickerIconForeground}" />
-                                    x:Name="PART_SecondSpacer"
-                                    Grid.Column="3"
-                                    Width="1"
-                                    Margin="0,4"
-                                    HorizontalAlignment="Center"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
                             </Grid>
-                            <PathIcon
+                        </Button>
-                                Name="PART_Icon"
-                                Grid.Column="1"
-                                Width="16"
-                                Height="16"
-                                Margin="0,0,8,0"
-                                Data="{DynamicResource DatePickerIconGlyph}"
-                                Foreground="{DynamicResource DateTimePickerIconForeground}" />
-                        </Grid>
-                    </Button>
 
-                    <Popup
+                        <Popup
-                        Name="PART_Popup"
+                            Name="PART_Popup"
-                        IsLightDismissEnabled="True"
+                            IsLightDismissEnabled="True"
-                        Placement="Bottom"
+                            Placement="Bottom"
-                        PlacementTarget="{TemplateBinding}"
+                            PlacementTarget="{TemplateBinding}"
-                        WindowManagerAddShadowHint="False">
+                            WindowManagerAddShadowHint="False">
-                        <DatePickerPresenter Name="PART_PickerPresenter" />
+                            <DatePickerPresenter Name="PART_PickerPresenter" />
-                    </Popup>
+                        </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

@@ -66,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>
@@ -190,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}" />

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/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}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.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}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.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}"
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
-                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
-                        Content="{TemplateBinding Content}"
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
-                        Extent="{TemplateBinding Extent,
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
-                                                 Mode=TwoWay}"
-                        Viewport="{TemplateBinding Viewport,
-                                                   Mode=TwoWay}"
-                        Offset="{TemplateBinding Offset,
-                                                 Mode=TwoWay}">
                         <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 MenuFlyoutCornerRadius}" />
-        <Setter Property="MenuFlyoutPresenter.CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
         <Setter Property="MenuFlyoutPresenter.Template">
             <ControlTemplate TargetType="MenuFlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
-                    MinWidth="{DynamicResource MenuFlyoutMinWidth}"
+                    Margin="4"
-                    MinHeight="{DynamicResource MenuFlyoutMinHeight}"
+                    Background="{TemplateBinding Background}"
-                    MaxWidth="{DynamicResource MenuFlyoutMaxWidth}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
-                    MaxHeight="{DynamicResource MenuFlyoutMaxHeight}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
-                    Margin="8"
-                    Padding="{DynamicResource MenuFlyoutPadding}"
-                    HorizontalAlignment="Stretch"
-                    Background="{DynamicResource MenuFlyoutBackground}"
-                    BorderBrush="{DynamicResource MenuFlyoutBorderBrush}"
-                    BorderThickness="{DynamicResource MenuFlyoutBorderThickness}"
                     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

@@ -5,45 +5,67 @@
     <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type NumericUpDown}" TargetType="NumericUpDown">
         <Setter Property="NumericUpDown.VerticalContentAlignment" Value="Center" />
-        <Setter Property="NumericUpDown.MinHeight" Value="{DynamicResource NumericUpDownWrapperDefaultHeight}" />
         <Setter Property="NumericUpDown.CornerRadius" Value="{DynamicResource NumericUpDownCornerRadius}" />
         <Setter Property="NumericUpDown.Template">
             <ControlTemplate TargetType="NumericUpDown">
-                <ButtonSpinner
+                <DataValidationErrors>
-                    Name="PART_Spinner"
+                    <ButtonSpinner
-                    MinWidth="0"
+                        Name="PART_Spinner"
-                    HorizontalContentAlignment="Stretch"
+                        MinWidth="0"
-                    VerticalContentAlignment="Stretch"
+                        HorizontalContentAlignment="Stretch"
-                    AllowSpin="{TemplateBinding AllowSpin}"
+                        VerticalContentAlignment="Stretch"
-                    Background="{TemplateBinding Background}"
+                        AllowSpin="{TemplateBinding AllowSpin}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
+                        Background="{TemplateBinding Background}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
-                    ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
-                    ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
+                        ButtonSpinnerLocation="{TemplateBinding ButtonSpinnerLocation}"
-                    <TextBox
+                        ShowButtonSpinner="{TemplateBinding ShowButtonSpinner}">
-                        Name="PART_TextBox"
+                        <TextBox
-                        Height="{TemplateBinding Height}"
+                            Name="PART_TextBox"
-                        MinHeight="{TemplateBinding MinHeight}"
+                            Height="{TemplateBinding Height}"
-                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
+                            MinHeight="{DynamicResource NumericUpDownWrapperDefaultHeight}"
-                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
+                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
-                        AcceptsReturn="False"
+                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
+                            AcceptsReturn="False"
-                        FontSize="{TemplateBinding FontSize}"
+                            CornerRadius="{TemplateBinding CornerRadius}"
-                        Foreground="{TemplateBinding Foreground}"
+                            DataValidationErrors.Errors="{ReflectionBinding $parent[NumericUpDown].(DataValidationErrors.Errors)}"
-                        IsReadOnly="{TemplateBinding IsReadOnly}"
+                            FontSize="{TemplateBinding FontSize}"
-                        Text="{TemplateBinding Text}"
+                            Foreground="{TemplateBinding Foreground}"
-                        TextWrapping="NoWrap"
+                            IsReadOnly="{TemplateBinding IsReadOnly}"
-                        Watermark="{TemplateBinding Watermark}" />
+                            Text="{TemplateBinding Text}"
-                </ButtonSpinner>
+                            TextWrapping="NoWrap"
+                            Theme="{DynamicResource NonErrorTextBox}"
+                            Watermark="{TemplateBinding Watermark}" />
+                    </ButtonSpinner>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
 
-        <Style Selector="^.Large">
+        <Style Selector="^.Large /template/ TextBox#PART_TextBox">
             <Setter Property="MinHeight" Value="{DynamicResource NumericUpDownWrapperLargeHeight}" />
         </Style>
-        <Style Selector="^.Small">
+        <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>

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

src/Semi.Avalonia/Controls/RepeatButton.axaml

@@ -49,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>
@@ -127,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"
+                                Focusable="False"
-                                CornerRadius="0"
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
-                                Focusable="False">
+                                <PathIcon
-                                <Path Data="M 4 0 L 4 8 L 0 4 Z" />
+                                    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"
+                                VerticalContentAlignment="Center"
-                                CornerRadius="0"
+                                Focusable="False"
-                                Focusable="False">
+                                Theme="{DynamicResource ScrollBarRepeatButton}">
-                                <Path Data="M 0 0 L 4 4 L 0 8 Z" />
+                                <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"
+                                Padding="0,4"
-                                Classes="repeat"
+                                VerticalAlignment="Center"
-                                CornerRadius="0"
+                                HorizontalContentAlignment="Center"
-                                Focusable="False">
+                                VerticalContentAlignment="Center"
-                                <Path Data="M 0 4 L 8 4 L 4 0 Z" />
+                                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"
+                                Padding="0,4"
-                                Classes="repeat"
+                                HorizontalContentAlignment="Center"
-                                CornerRadius="0"
+                                VerticalContentAlignment="Center"
-                                Focusable="False">
+                                Focusable="False"
-                                <Path Data="M 0 0 L 4 4 L 8 0 Z" />
+                                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}" />
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarThumbPointeroverForeground}" />
-        </Style>
-        <Style Selector="^ /template/ Thumb#thumb:pressed">
-            <Setter Property="Background" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
         </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">
+        <Style Selector="^ /template/ RepeatButton &gt; PathIcon">
-            <Setter Property="Padding" Value="2" />
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
-            <Setter Property="BorderThickness" Value="0" />
         </Style>
-        <Style Selector="^ /template/ RepeatButton.repeattrack">
+        <Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon">
-            <Setter Property="Background" Value="Transparent" />
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
-            <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>
-
+        <Style Selector="^ /template/ RepeatButton:pressed &gt; PathIcon">
-        <Style Selector="^ /template/ RepeatButton &gt; Path">
+            <Setter Property="RenderTransform" Value="scale(0.92)" />
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonDefaultForeground}" />
-        </Style>
-        <Style Selector="^ /template/ RepeatButton:pointerover &gt; Path">
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonPointeroverForeground}" />
         </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}"
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
-                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
-                        Content="{TemplateBinding Content}"
+                        ScrollViewer.IsScrollInertiaEnabled="{TemplateBinding IsScrollInertiaEnabled}"
-                        Extent="{TemplateBinding Extent,
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
-                                                 Mode=TwoWay}"
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
-                        IsScrollChainingEnabled="{TemplateBinding IsScrollChainingEnabled}"
-                        Viewport="{TemplateBinding Viewport,
-                                                   Mode=TwoWay}"
-                        Offset="{TemplateBinding Offset,
-                                                 Mode=TwoWay}">
                         <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"
+                        Orientation="Horizontal" />
-                        SmallChange="{Binding SmallChange.Width, RelativeSource={RelativeSource TemplatedParent}}"
-                        ViewportSize="{TemplateBinding HorizontalScrollBarViewportSize}"
-                        Visibility="{TemplateBinding HorizontalScrollBarVisibility}"
-                        Value="{TemplateBinding HorizontalScrollBarValue,
-                                                Mode=TwoWay}" />
                     <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"
+                        Orientation="Vertical" />
-                        SmallChange="{Binding SmallChange.Height, RelativeSource={RelativeSource TemplatedParent}}"
-                        ViewportSize="{TemplateBinding VerticalScrollBarViewportSize}"
-                        Visibility="{TemplateBinding VerticalScrollBarVisibility}"
-                        Value="{TemplateBinding VerticalScrollBarValue,
-                                                Mode=TwoWay}" />
                     <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}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.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}" />
+                                <ReflectionBinding Path="VerticalScrollBarVisibility" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <ReflectionBinding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                <Binding Path="Viewport.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
+                    <ScrollContentPresenter Name="PART_ContentPresenter" Margin="{TemplateBinding Padding}" />
-                        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}" />
                 </DockPanel>
             </ControlTemplate>
         </Setter>

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
+                    <DataValidationErrors>
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
                         <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
-                                <TickBar
+                                Name="TopTickBar"
-                                    Name="TopTickBar"
+                                Grid.Row="0"
-                                    Grid.Row="0"
+                                Height="{DynamicResource SliderTickHorizontalHeight}"
-                                    Height="{DynamicResource SliderTickHorizontalHeight}"
+                                Margin="0,0,0,4"
-                                    Margin="0,0,0,4"
+                                VerticalAlignment="Bottom"
-                                    VerticalAlignment="Bottom"
+                                Fill="{DynamicResource SliderTickForeground}"
-                                    Fill="{DynamicResource SliderTickForeground}"
+                                IsVisible="False"
-                                    IsVisible="False"
+                                Maximum="{TemplateBinding Slider.Maximum}"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
+                                Minimum="{TemplateBinding Slider.Minimum}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
-                                    Orientation="{TemplateBinding Slider.Orientation}"
+                                Placement="Top"
-                                    Placement="Top"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Ticks="{TemplateBinding Ticks}" />
-                                    Ticks="{TemplateBinding Ticks}" />
+                            <TickBar
-                                <TickBar
+                                Name="BottomTickBar"
-                                    Name="BottomTickBar"
+                                Grid.Row="2"
-                                    Grid.Row="2"
+                                Height="{DynamicResource SliderTickHorizontalHeight}"
-                                    Height="{DynamicResource SliderTickHorizontalHeight}"
+                                Margin="0,4,0,0"
-                                    Margin="0,4,0,0"
+                                VerticalAlignment="Top"
-                                    VerticalAlignment="Top"
+                                Fill="{DynamicResource SliderTickForeground}"
-                                    Fill="{DynamicResource SliderTickForeground}"
+                                IsVisible="False"
-                                    IsVisible="False"
+                                Maximum="{TemplateBinding Slider.Maximum}"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
+                                Minimum="{TemplateBinding Slider.Minimum}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
-                                    Orientation="{TemplateBinding Slider.Orientation}"
+                                Placement="Bottom"
-                                    Placement="Bottom"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Ticks="{TemplateBinding Ticks}" />
-                                    Ticks="{TemplateBinding Ticks}" />
+                            <Track
-                                <Track
+                                Name="PART_Track"
-                                    Name="PART_Track"
+                                Grid.Row="1"
-                                    Grid.Row="1"
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
-                                    IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                Maximum="{TemplateBinding Maximum}"
-                                    Maximum="{TemplateBinding Maximum}"
+                                Minimum="{TemplateBinding Minimum}"
-                                    Minimum="{TemplateBinding Minimum}"
+                                Orientation="Horizontal"
-                                    Orientation="Horizontal"
+                                Value="{TemplateBinding Value,
-                                    Value="{TemplateBinding Value,
+                                                        Mode=TwoWay}">
-                                                            Mode=TwoWay}">
+                                <Track.DecreaseButton>
-                                    <Track.DecreaseButton>
+                                    <RepeatButton
-                                        <RepeatButton
+                                        Name="PART_DecreaseButton"
-                                            Name="PART_DecreaseButton"
+                                        Background="{TemplateBinding Foreground}"
-                                            Background="{TemplateBinding Foreground}"
+                                        Focusable="False"
-                                            Focusable="False"
+                                        Theme="{StaticResource SliderHorizontalRepeatButton}" />
-                                            Theme="{StaticResource SliderHorizontalRepeatButton}" />
+                                </Track.DecreaseButton>
-                                    </Track.DecreaseButton>
+                                <Track.IncreaseButton>
-                                    <Track.IncreaseButton>
+                                    <RepeatButton
-                                        <RepeatButton
+                                        Name="PART_IncreaseButton"
-                                            Name="PART_IncreaseButton"
+                                        Background="{TemplateBinding Background}"
-                                            Background="{TemplateBinding Background}"
+                                        Focusable="False"
-                                            Focusable="False"
+                                        Theme="{StaticResource SliderHorizontalRepeatButton}" />
-                                            Theme="{StaticResource SliderHorizontalRepeatButton}" />
+                                </Track.IncreaseButton>
-                                    </Track.IncreaseButton>
+                                <Thumb
-                                    <Thumb
+                                    Name="thumb"
-                                        Name="thumb"
+                                    Width="{DynamicResource SliderThumbWidth}"
-                                        Width="{DynamicResource SliderThumbWidth}"
+                                    Height="{DynamicResource SliderThumbHeight}"
-                                        Height="{DynamicResource SliderThumbHeight}"
+                                    DataContext="{TemplateBinding Value}"
-                                        DataContext="{TemplateBinding Value}"
+                                    Theme="{StaticResource SliderThumbTheme}" />
-                                        Theme="{StaticResource SliderThumbTheme}" />
+                            </Track>
-                                </Track>
-                            </Grid>
                         </Grid>
-                    </Border>
+                    </DataValidationErrors>
                 </ControlTemplate>
             </Setter>
         </Style>
         <Style Selector="^:vertical">
             <Setter Property="Template">
                 <ControlTemplate>
-                    <Border
+                    <DataValidationErrors>
-                        BorderBrush="{TemplateBinding BorderBrush}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
-                        CornerRadius="{TemplateBinding CornerRadius}">
                         <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
+                            <TickBar
-                                x:Name="VerticalTemplate"
+                                Name="LeftTickBar"
-                                MinWidth="{DynamicResource SliderVerticalWidth}"
+                                Grid.Column="0"
-                                ColumnDefinitions="Auto,Auto,Auto">
+                                Width="{DynamicResource SliderTickVerticalWidth}"
-                                <TickBar
+                                Margin="0,0,4,0"
-                                    Name="LeftTickBar"
+                                HorizontalAlignment="Right"
-                                    Grid.Column="0"
+                                Fill="{DynamicResource SliderTickForeground}"
-                                    Width="{DynamicResource SliderTickVerticalWidth}"
+                                IsVisible="False"
-                                    Margin="0,0,4,0"
+                                Maximum="{TemplateBinding Slider.Maximum}"
-                                    HorizontalAlignment="Right"
+                                Minimum="{TemplateBinding Slider.Minimum}"
-                                    Fill="{DynamicResource SliderTickForeground}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
-                                    IsVisible="False"
+                                Placement="Left"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
+                                Ticks="{TemplateBinding Ticks}" />
-                                    Orientation="{TemplateBinding Slider.Orientation}"
+                            <TickBar
-                                    Placement="Left"
+                                Name="RightTickBar"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Grid.Column="2"
-                                    Ticks="{TemplateBinding Ticks}" />
+                                Width="{DynamicResource SliderTickVerticalWidth}"
-                                <TickBar
+                                Margin="4,0,0,0"
-                                    Name="RightTickBar"
+                                HorizontalAlignment="Left"
-                                    Grid.Column="2"
+                                Fill="{DynamicResource SliderTickForeground}"
-                                    Width="{DynamicResource SliderTickVerticalWidth}"
+                                IsVisible="False"
-                                    Margin="4,0,0,0"
+                                Maximum="{TemplateBinding Slider.Maximum}"
-                                    HorizontalAlignment="Left"
+                                Minimum="{TemplateBinding Slider.Minimum}"
-                                    Fill="{DynamicResource SliderTickForeground}"
+                                Orientation="{TemplateBinding Slider.Orientation}"
-                                    IsVisible="False"
+                                Placement="Right"
-                                    Maximum="{TemplateBinding Slider.Maximum}"
+                                TickFrequency="{TemplateBinding Slider.TickFrequency}"
-                                    Minimum="{TemplateBinding Slider.Minimum}"
+                                Ticks="{TemplateBinding Ticks}" />
-                                    Orientation="{TemplateBinding Slider.Orientation}"
+                            <Track
-                                    Placement="Right"
+                                Name="PART_Track"
-                                    TickFrequency="{TemplateBinding Slider.TickFrequency}"
+                                Grid.Column="1"
-                                    Ticks="{TemplateBinding Ticks}" />
+                                IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
-                                <Track
+                                Maximum="{TemplateBinding Maximum}"
-                                    Name="PART_Track"
+                                Minimum="{TemplateBinding Minimum}"
-                                    Grid.Column="1"
+                                Orientation="Vertical"
-                                    IsDirectionReversed="{TemplateBinding IsDirectionReversed}"
+                                Value="{TemplateBinding Value,
-                                    Maximum="{TemplateBinding Maximum}"
+                                                        Mode=TwoWay}">
-                                    Minimum="{TemplateBinding Minimum}"
+                                <Track.DecreaseButton>
-                                    Orientation="Vertical"
+                                    <RepeatButton
-                                    Value="{TemplateBinding Value,
+                                        Name="PART_DecreaseButton"
-                                                            Mode=TwoWay}">
+                                        Background="{TemplateBinding Foreground}"
-                                    <Track.DecreaseButton>
+                                        Focusable="False"
-                                        <RepeatButton
+                                        Theme="{StaticResource SliderVerticalRepeatButton}" />
-                                            Name="PART_DecreaseButton"
+                                </Track.DecreaseButton>
-                                            Background="{TemplateBinding Foreground}"
+                                <Track.IncreaseButton>
-                                            Focusable="False"
+                                    <RepeatButton
-                                            Theme="{StaticResource SliderVerticalRepeatButton}" />
+                                        Name="PART_IncreaseButton"
-                                    </Track.DecreaseButton>
+                                        Background="{TemplateBinding Background}"
-                                    <Track.IncreaseButton>
+                                        Focusable="False"
-                                        <RepeatButton
+                                        Theme="{StaticResource SliderVerticalRepeatButton}" />
-                                            Name="PART_IncreaseButton"
+                                </Track.IncreaseButton>
-                                            Background="{TemplateBinding Background}"
+                                <Thumb
-                                            Focusable="False"
+                                    Name="thumb"
-                                            Theme="{StaticResource SliderVerticalRepeatButton}" />
+                                    Width="{DynamicResource SliderThumbWidth}"
-                                    </Track.IncreaseButton>
+                                    Height="{DynamicResource SliderThumbHeight}"
-                                    <Thumb
+                                    DataContext="{TemplateBinding Value}"
-                                        Name="thumb"
+                                    Theme="{StaticResource SliderThumbTheme}" />
-                                        Width="{DynamicResource SliderThumbWidth}"
+                            </Track>
-                                        Height="{DynamicResource SliderThumbHeight}"
-                                        DataContext="{TemplateBinding Value}"
-                                        Theme="{StaticResource SliderThumbTheme}" />
-                                </Track>
-                            </Grid>
                         </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

@@ -96,7 +96,6 @@
         <Setter Property="TextBox.FontSize" Value="14" />
         <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
+                <DataValidationErrors>
-                    Name="PART_ContentPresenterBorder"
+                    <Border
-                    Background="{TemplateBinding Background}"
+                        Name="PART_ContentPresenterBorder"
-                    BorderBrush="{TemplateBinding BorderBrush}"
+                        MinHeight="{DynamicResource TextBoxWrapperDefaultHeight}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
+                        Background="{TemplateBinding Background}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
+                        BorderBrush="{TemplateBinding BorderBrush}"
-                    <Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto,*,Auto, Auto, Auto">
+                        BorderThickness="{TemplateBinding BorderThickness}"
-                        <ContentPresenter
+                        CornerRadius="{TemplateBinding CornerRadius}">
-                            Grid.Column="0"
+                        <Grid Margin="{TemplateBinding Padding}" ColumnDefinitions="Auto,*,Auto, Auto, Auto">
-                            Padding="{DynamicResource TextBoxInnerLeftContentPadding}"
+                            <ContentPresenter
-                            VerticalAlignment="Center"
+                                Grid.Column="0"
-                            Content="{TemplateBinding InnerLeftContent}"
+                                Padding="{DynamicResource TextBoxInnerLeftContentPadding}"
-                            Foreground="{DynamicResource TextBoxInnerForeground}"
+                                VerticalAlignment="Center"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                Content="{TemplateBinding InnerLeftContent}"
-                        <ScrollViewer
+                                Foreground="{DynamicResource TextBoxInnerForeground}"
-                            Grid.Column="1"
+                                IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerLeftContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
-                            AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
+                            <ScrollViewer
-                            HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
+                                Grid.Column="1"
-                            IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
+                                AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}"
-                            VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
+                                HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
-                            <Panel>
+                                IsScrollChainingEnabled="{TemplateBinding (ScrollViewer.IsScrollChainingEnabled)}"
-                                <TextBlock
+                                VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}">
-                                    Name="PART_Watermark"
+                                <Panel>
-                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    <TextBlock
-                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        Name="PART_Watermark"
-                                    IsVisible="{TemplateBinding Text,
+                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                                                Converter={x:Static StringConverters.IsNullOrEmpty}}"
+                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    Opacity="0.5"
+                                        IsVisible="{TemplateBinding Text,
-                                    Text="{TemplateBinding Watermark}"
+                                                                    Converter={x:Static StringConverters.IsNullOrEmpty}}"
-                                    TextAlignment="{TemplateBinding TextAlignment}"
+                                        Opacity="0.5"
-                                    TextWrapping="{TemplateBinding TextWrapping}" />
+                                        Text="{TemplateBinding Watermark}"
-                                <TextPresenter
+                                        TextAlignment="{TemplateBinding TextAlignment}"
-                                    Name="PART_TextPresenter"
+                                        TextWrapping="{TemplateBinding TextWrapping}" />
-                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                    <TextPresenter
-                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                        Name="PART_TextPresenter"
-                                    CaretBrush="{TemplateBinding CaretBrush}"
+                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                    CaretIndex="{TemplateBinding CaretIndex}"
+                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    LineHeight="{TemplateBinding LineHeight}"
+                                        CaretBrush="{TemplateBinding CaretBrush}"
-                                    PasswordChar="{TemplateBinding PasswordChar}"
+                                        CaretIndex="{TemplateBinding CaretIndex}"
-                                    RevealPassword="{TemplateBinding RevealPassword}"
+                                        LineHeight="{TemplateBinding LineHeight}"
-                                    SelectionBrush="{TemplateBinding SelectionBrush}"
+                                        PasswordChar="{TemplateBinding PasswordChar}"
-                                    SelectionEnd="{TemplateBinding SelectionEnd}"
+                                        RevealPassword="{TemplateBinding RevealPassword}"
-                                    SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
+                                        SelectionBrush="{TemplateBinding SelectionBrush}"
-                                    SelectionStart="{TemplateBinding SelectionStart}"
+                                        SelectionEnd="{TemplateBinding SelectionEnd}"
-                                    Text="{TemplateBinding Text,
+                                        SelectionForegroundBrush="{TemplateBinding SelectionForegroundBrush}"
-                                                           Mode=TwoWay}"
+                                        SelectionStart="{TemplateBinding SelectionStart}"
-                                    TextAlignment="{TemplateBinding TextAlignment}"
+                                        Text="{TemplateBinding Text,
-                                    TextWrapping="{TemplateBinding TextWrapping}" />
+                                                               Mode=TwoWay}"
-                            </Panel>
+                                        TextAlignment="{TemplateBinding TextAlignment}"
-                        </ScrollViewer>
+                                        TextWrapping="{TemplateBinding TextWrapping}" />
-                        <Button
+                                </Panel>
-                            Name="PART_ClearButton"
+                            </ScrollViewer>
-                            Grid.Column="2"
+                            <Button
-                            Command="{Binding $parent[TextBox].Clear}"
+                                Name="PART_ClearButton"
-                            IsVisible="False"
+                                Grid.Column="2"
-                            Theme="{StaticResource InputClearButton}" />
+                                Command="{Binding $parent[TextBox].Clear}"
-                        <ToggleButton
+                                IsVisible="False"
-                            Name="PART_RevealButton"
+                                Theme="{StaticResource InputClearButton}" />
-                            Grid.Column="3"
+                            <ToggleButton
-                            Margin="4,0,0,0"
+                                Name="PART_RevealButton"
-                            IsChecked="{TemplateBinding RevealPassword,
+                                Grid.Column="3"
-                                                        Mode=TwoWay}"
+                                Margin="4,0,0,0"
-                            IsVisible="False"
+                                IsChecked="{TemplateBinding RevealPassword,
-                            Theme="{StaticResource InputToggleButton}" />
+                                                            Mode=TwoWay}"
-                        <ContentPresenter
+                                IsVisible="False"
-                            Grid.Column="4"
+                                Theme="{StaticResource InputToggleButton}" />
-                            Padding="{DynamicResource TextBoxInnerRightContentPadding}"
+                            <ContentPresenter
-                            VerticalAlignment="Center"
+                                Grid.Column="4"
-                            Content="{TemplateBinding InnerRightContent}"
+                                Padding="{DynamicResource TextBoxInnerRightContentPadding}"
-                            Foreground="{DynamicResource TextBoxInnerForeground}"
+                                VerticalAlignment="Center"
-                            IsVisible="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=InnerRightContent, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                                Content="{TemplateBinding InnerRightContent}"
-                    </Grid>
+                                Foreground="{DynamicResource TextBoxInnerForeground}"
-                </Border>
+                                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">
+        <Style Selector="^.Large /template/ Border#PART_ContentPresenterBorder">
-            <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperLargeHeight}" />
+            <Setter Property="MinHeight" Value="{DynamicResource TextBoxWrapperLargeHeight}" />
         </Style>
-        <Style Selector="^.Small">
+        <Style Selector="^.Small /template/ Border#PART_ContentPresenterBorder">
-            <Setter Property="TextBox.MinHeight" Value="{DynamicResource TextBoxWrapperSmallHeight}" />
+            <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}">
+                <DataValidationErrors>
-                    <Button
+                    <Grid Name="LayoutRoot" Margin="{TemplateBinding Padding}">
-                        x:Name="PART_FlyoutButton"
+                        <Button
-                        Width="242"
+                            x:Name="PART_FlyoutButton"
-                        MinWidth="242"
+                            Width="242"
-                        HorizontalAlignment="Stretch"
+                            MinWidth="242"
-                        VerticalAlignment="Stretch"
+                            HorizontalAlignment="Stretch"
-                        Background="{TemplateBinding Background}"
+                            VerticalAlignment="Stretch"
-                        BorderBrush="{TemplateBinding BorderBrush}"
+                            Background="{TemplateBinding Background}"
-                        BorderThickness="{TemplateBinding BorderThickness}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
-                        CornerRadius="{TemplateBinding CornerRadius}"
+                            BorderThickness="{TemplateBinding BorderThickness}"
-                        Cursor="Hand"
+                            CornerRadius="{TemplateBinding CornerRadius}"
-                        Foreground="{TemplateBinding Foreground}"
+                            Cursor="Hand"
-                        IsEnabled="{TemplateBinding IsEnabled}"
+                            DataValidationErrors.Errors="{TemplateBinding (DataValidationErrors.Errors)}"
-                        Theme="{StaticResource DateTimePickerFlyoutButton}">
+                            Foreground="{TemplateBinding Foreground}"
-                        <Grid ColumnDefinitions="*, Auto">
+                            IsEnabled="{TemplateBinding IsEnabled}"
-                            <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
+                            MinHeight="{DynamicResource DateTimePickerButtonDefaultHeight}"
-                                <!--  Ignore col defs here, set in code  -->
+                            Theme="{StaticResource DateTimePickerFlyoutButton}">
-                                <Border
+                            <Grid ColumnDefinitions="*, Auto">
-                                    x:Name="PART_FirstPickerHost"
+                                <Grid Name="PART_FlyoutButtonContentGrid" Grid.Column="0">
-                                    Grid.Column="0"
+                                    <!--  Ignore col defs here, set in code  -->
-                                    HorizontalAlignment="Stretch"
+                                    <Border
-                                    VerticalAlignment="Stretch">
+                                        x:Name="PART_FirstPickerHost"
-                                    <TextBlock
+                                        Grid.Column="0"
-                                        x:Name="PART_HourTextBlock"
+                                        HorizontalAlignment="Stretch"
-                                        Padding="12,4"
+                                        VerticalAlignment="Stretch">
-                                        HorizontalAlignment="Center"
+                                        <TextBlock
-                                        VerticalAlignment="Center"
+                                            x:Name="PART_HourTextBlock"
-                                        FontFamily="{TemplateBinding FontFamily}"
+                                            Padding="12,4"
-                                        FontSize="{TemplateBinding FontSize}"
+                                            HorizontalAlignment="Center"
-                                        FontWeight="{TemplateBinding FontWeight}" />
+                                            VerticalAlignment="Center"
-                                </Border>
+                                            FontFamily="{TemplateBinding FontFamily}"
+                                            FontSize="{TemplateBinding FontSize}"
+                                            FontWeight="{TemplateBinding FontWeight}" />
+                                    </Border>
 
-                                <Rectangle
+                                    <Rectangle
-                                    Name="PART_FirstColumnDivider"
+                                        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"
+                                    Width="16"
-                                    Margin="0,4"
+                                    Height="16"
-                                    HorizontalAlignment="Center"
+                                    Margin="0,0,8,0"
-                                    Fill="{DynamicResource DateTimePickerSeparatorBackground}" />
+                                    Data="{DynamicResource TimePickerIconGlyph}"
-
+                                    Foreground="{DynamicResource DateTimePickerIconForeground}" />
-                                <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="16"
-                                Height="16"
-                                Margin="0,0,8,0"
-                                Data="{DynamicResource TimePickerIconGlyph}"
-                                Foreground="{DynamicResource DateTimePickerIconForeground}" />
-                        </Grid>
 
-                    </Button>
+                        </Button>
 
-                    <Popup
+                        <Popup
-                        Name="PART_Popup"
+                            Name="PART_Popup"
-                        IsLightDismissEnabled="True"
+                            IsLightDismissEnabled="True"
-                        Placement="Bottom"
+                            Placement="Bottom"
-                        PlacementTarget="{TemplateBinding}"
+                            PlacementTarget="{TemplateBinding}"
-                        WindowManagerAddShadowHint="False">
+                            WindowManagerAddShadowHint="False">
-                        <TimePickerPresenter Name="PART_PickerPresenter" />
+                            <TimePickerPresenter Name="PART_PickerPresenter" />
-                    </Popup>
+                        </Popup>
-                </Grid>
+                    </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

@@ -7,12 +7,14 @@
             <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="Danger">Toggle</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="Danger" IsThreeState="True">Toggle 3</ToggleButton>
         </StackPanel>
@@ -76,6 +78,9 @@
         <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>
@@ -95,6 +100,9 @@
             <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>
@@ -112,6 +120,9 @@
                 <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>
@@ -130,6 +141,9 @@
                 <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>
@@ -158,6 +172,10 @@
                 <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}" />
@@ -181,6 +199,10 @@
                     <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}" />
@@ -205,6 +227,10 @@
                     <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}" />

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" />

src/Semi.Avalonia/Controls/TransitioningContentControl.axaml

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

@@ -131,6 +131,7 @@
                                 HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                 VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                 Content="{TemplateBinding Header}"
+                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                 Focusable="False"
                                 Foreground="{TemplateBinding Foreground}" />
                         </Grid>

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/ComboBox.axaml

@@ -29,8 +29,8 @@
     <SolidColorBrush x:Key="ComboBoxItemBackground" Color="Transparent" />
     <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="ComboBoxItemSelectedBackground" Opacity="0.2" Color="#54A9FF" />
-    <SolidColorBrush x:Key="ComboBoxItemSelectedPointeroverBackground" Color="#0A4694" />
+    <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/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/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>

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

@@ -1,5 +1,6 @@
 <ResourceDictionary
-    xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
     <!--  Typography related resources are combined with TextBlock  -->
 
@@ -28,8 +29,8 @@
     <SolidColorBrush x:Key="LabelTagLightLightBlueBackground" Opacity="0.15" Color="#40B4F3" />
     <SolidColorBrush x:Key="LabelTagLightLightGreenForeground" Color="#E4F1D1" />
     <SolidColorBrush x:Key="LabelTagLightLightGreenBackground" Opacity="0.15" Color="#97C65F" />
-    <SolidColorBrush x:Key="LabelTagLightLimeForeground" Color="#AEDC3A" />
+    <SolidColorBrush x:Key="LabelTagLightLimeForeground" Color="#E5F6C9" />
-    <SolidColorBrush x:Key="LabelTagLightLimeBackground" Opacity="0.15" Color="#E5F6C9" />
+    <SolidColorBrush x:Key="LabelTagLightLimeBackground" Opacity="0.15" Color="#AEDC3A" />
     <SolidColorBrush x:Key="LabelTagLightOrangeForeground" Color="#FFEFD0" />
     <SolidColorBrush x:Key="LabelTagLightOrangeBackground" Opacity="0.15" Color="#FFAE43" />
     <SolidColorBrush x:Key="LabelTagLightPinkForeground" Color="#FBD3DC" />
@@ -40,13 +41,13 @@
     <SolidColorBrush x:Key="LabelTagLightRedBackground" Opacity="0.15" Color="#FC725A" />
     <SolidColorBrush x:Key="LabelTagLightTealForeground" Color="#C4F0E8" />
     <SolidColorBrush x:Key="LabelTagLightTealBackground" Opacity="0.15" Color="#33C2B0" />
-    <SolidColorBrush x:Key="LabelTagLightVioletForeground" Color="#8865D4" />
+    <SolidColorBrush x:Key="LabelTagLightVioletForeground" Color="#DDD4F4" />
-    <SolidColorBrush x:Key="LabelTagLightVioletBackground" Opacity="0.15" Color="#DDD4F4" />
+    <SolidColorBrush x:Key="LabelTagLightVioletBackground" Opacity="0.15" Color="#8865D4" />
     <SolidColorBrush x:Key="LabelTagLightYellowForeground" Color="#FEFBD0" />
     <SolidColorBrush x:Key="LabelTagLightYellowBackground" Opacity="0.15" Color="#FDDE43" />
-    <SolidColorBrush x:Key="LabelTagLightWhiteForeground" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="LabelTagLightWhiteBackground" Color="#4F5159" />
-    <SolidColorBrush x:Key="LabelTagLightWhiteBackground" Opacity="0.15" Color="#4F5159" />
     <SolidColorBrush x:Key="LabelTagLightWhiteBorderBrush" Color="#41464C" />
+    <SolidColorBrush x:Key="LabelTagLightWhiteForeground" Color="#F9F9F9" />
 
     <SolidColorBrush x:Key="LabelTagGhostAmberBorderBrush" Color="#F2B726" />
     <SolidColorBrush x:Key="LabelTagGhostAmberForeground" Color="#F5CA50" />
@@ -80,10 +81,11 @@
     <SolidColorBrush x:Key="LabelTagGhostVioletForeground" Color="#8865D4" />
     <SolidColorBrush x:Key="LabelTagGhostYellowBorderBrush" Color="#FCCE14" />
     <SolidColorBrush x:Key="LabelTagGhostYellowForeground" Color="#FDDE43" />
+    <SolidColorBrush x:Key="LabelTagGhostWhiteBackground" Color="#4F5159" />
     <SolidColorBrush x:Key="LabelTagGhostWhiteBorderBrush" Color="#41464C" />
     <SolidColorBrush x:Key="LabelTagGhostWhiteForeground" Color="#F9F9F9" />
 
-    <SolidColorBrush x:Key="LabelTagSolidForeground" Color="#000000" />
+    <SolidColorBrush x:Key="LabelTagSolidForeground" Color="White" />
     <SolidColorBrush x:Key="LabelTagSolidAmberBackground" Color="#F5CA50" />
     <SolidColorBrush x:Key="LabelTagSolidBlueBackground" Color="#54A9FF" />
     <SolidColorBrush x:Key="LabelTagSolidCyanBackground" Color="#38BBC6" />

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

@@ -13,7 +13,7 @@
     <SolidColorBrush x:Key="MenuFlyoutBackground" Color="#35363C" />
     <SolidColorBrush x:Key="MenuFlyoutBorderBrush" Opacity="0.08" Color="#F9F9F9" />
     <Thickness x:Key="MenuFlyoutBorderThickness">1</Thickness>
-    <Thickness x:Key="MenuFlyoutPadding">0 4</Thickness>
+    <Thickness x:Key="MenuFlyoutPadding">8</Thickness>
     <BoxShadows x:Key="MenuFlyoutBorderBoxShadow">0 0 8 0 #1AFFFFFF</BoxShadows>
     <CornerRadius x:Key="MenuFlyoutCornerRadius">6</CornerRadius>
     <sys:Double x:Key="MenuFlyoutMinHeight">16</sys:Double>

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

@@ -7,6 +7,9 @@
     <SolidColorBrush x:Key="ProgressBarOuterTextForeground" Color="#F9F9F9" />
     <SolidColorBrush x:Key="ProgressBarRootBorderBrush" Color="Transparent" />
     <FontWeight x:Key="ProgressBarTextFontWeight">600</FontWeight>
+    <SolidColorBrush x:Key="ProgressBarPrimaryForeground" Color="#54A9FF" />
+    <SolidColorBrush x:Key="ProgressBarSecondaryForeground" Color="#40B4F3" />
+    <SolidColorBrush x:Key="ProgressBarTertiaryForeground" Color="#888D92" />
     <SolidColorBrush x:Key="ProgressBarSuccessForeground" Color="#5DC264" />
     <SolidColorBrush x:Key="ProgressBarWarningForeground" Color="#FFAE43" />
     <SolidColorBrush x:Key="ProgressBarErrorForeground" Color="#FC725A" />

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

@@ -32,6 +32,9 @@
     <SolidColorBrush x:Key="RadioButtonCheckGlyphFill" Color="White" />
 
     <SolidColorBrush x:Key="RadioButtonForeground" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="RadioButtonDefaultBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="RadioButtonDefaultBorderBrush" Opacity="0.35" Color="#F9F9F9" />
+    <CornerRadius x:Key="RadioButtonBoxCornerRadius">3</CornerRadius>
 
     <SolidColorBrush x:Key="RadioButtonGroupBackground" Opacity="0.12" Color="White" />
 

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

@@ -2,11 +2,17 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:sys="clr-namespace:System;assembly=System.Runtime">
-    <sys:Double x:Key="ScrollBarThickness">12</sys:Double>
+    <sys:Double x:Key="ScrollBarThickness">14</sys:Double>
-    <sys:Double x:Key="ScrollBarThumbThickness">8</sys:Double>
+    <sys:Double x:Key="ScrollBarThumbThickness">10</sys:Double>
     <SolidColorBrush x:Key="ScrollBarButtonDefaultBackground" Color="Transparent" />
-    <SolidColorBrush x:Key="ScrollBarButtonDefaultForeground" Opacity="0.62" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="ScrollBarButtonDefaultForeground" Opacity="0.35" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="ScrollBarButtonPointeroverForeground" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="ScrollBarButtonPointeroverForeground" Opacity="0.6" Color="#F9F9F9" />
     <SolidColorBrush x:Key="ScrollBarThumbForeground" Opacity="0.35" Color="#F9F9F9" />
-    <SolidColorBrush x:Key="ScrollBarBackground" Opacity="0.12" Color="White" />
+    <SolidColorBrush x:Key="ScrollBarThumbPointeroverForeground" Opacity="0.6" Color="#F9F9F9" />
+    <SolidColorBrush x:Key="ScrollBarBackground" Color="Transparent" />
+    <PathGeometry x:Key="ScrollBarLeftGlyph">M16.3176 6.95628V17.0878C16.3176 17.4871 15.8725 17.7253 15.5402 17.5038L7.94161 12.438C7.64474 12.2401 7.64474 11.8039 7.94161 11.606L15.5402 6.54025C15.8725 6.31873 16.3176 6.55693 16.3176 6.95628Z</PathGeometry>
+    <PathGeometry x:Key="ScrollBarRightGlyph">M9 17.0657V6.93425C9 6.5349 9.44507 6.29671 9.77735 6.51823L17.376 11.584C17.6728 11.7819 17.6728 12.2181 17.376 12.416L9.77735 17.4818C9.44507 17.7033 9 17.4651 9 17.0657Z</PathGeometry>
+    <PathGeometry x:Key="ScrollBarUpGlyph">M17.0839 16.3212H6.9524C6.55305 16.3212 6.31486 15.8761 6.53638 15.5438L11.6021 7.94521C11.8 7.64834 12.2363 7.64834 12.4342 7.94521L17.4999 15.5438C17.7214 15.8761 17.4832 16.3212 17.0839 16.3212Z</PathGeometry>
+    <PathGeometry x:Key="ScrollBarDownGlyph">M6.95249 7.72265L17.084 7.72265C17.4833 7.72265 17.7215 8.16772 17.5 8.5L12.4343 16.0986C12.2363 16.3955 11.8001 16.3955 11.6022 16.0986L6.53647 8.5C6.31495 8.16772 6.55315 7.72265 6.95249 7.72265Z</PathGeometry>
+
 </ResourceDictionary>

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

@@ -24,62 +24,72 @@
     <SolidColorBrush x:Key="ToggleButtonDefaultPrimaryForeground" Color="#54A9FF" />
     <SolidColorBrush x:Key="ToggleButtonDefaultSecondaryForeground" Color="#40B4F3" />
     <SolidColorBrush x:Key="ToggleButtonDefaultTertiaryForeground" Color="#888D92" />
+    <SolidColorBrush x:Key="ToggleButtonDefaultSuccessForeground" Color="#5DC264" />
     <SolidColorBrush x:Key="ToggleButtonDefaultWarningForeground" Color="#FFAE43" />
     <SolidColorBrush x:Key="ToggleButtonDefaultDangerForeground" Color="#FC725A" />
 
     <SolidColorBrush x:Key="ToggleButtonPrimaryCheckedBackground" Color="#54A9FF" />
     <SolidColorBrush x:Key="ToggleButtonSecondaryCheckedBackground" Color="#40B4F3" />
     <SolidColorBrush x:Key="ToggleButtonTertiaryCheckedBackground" Color="#888D92" />
+    <SolidColorBrush x:Key="ToggleButtonSuccessCheckedBackground" Color="#5DC264" />
     <SolidColorBrush x:Key="ToggleButtonWarningCheckedBackground" Color="#FFAE43" />
     <SolidColorBrush x:Key="ToggleButtonDangerCheckedBackground" Color="#FC725A" />
 
     <SolidColorBrush x:Key="ToggleButtonPrimaryCheckedPointeroverBackground" Color="#7FC1FF" />
     <SolidColorBrush x:Key="ToggleButtonSecondaryCheckedPointeroverBackground" Color="#6EC8F6" />
     <SolidColorBrush x:Key="ToggleButtonTertiaryCheckedPointeroverBackground" Color="#A7ABB0" />
+    <SolidColorBrush x:Key="ToggleButtonSuccessCheckedPointeroverBackground" Color="#7FD184" />
     <SolidColorBrush x:Key="ToggleButtonWarningCheckedPointeroverBackground" Color="#FFC772" />
     <SolidColorBrush x:Key="ToggleButtonDangerCheckedPointeroverBackground" Color="#FD9983" />
 
     <SolidColorBrush x:Key="ToggleButtonPrimaryCheckedPressedBackground" Color="#A9D7FF" />
     <SolidColorBrush x:Key="ToggleButtonSecondaryCheckedPressedBackground" Color="#9DDCF9" />
     <SolidColorBrush x:Key="ToggleButtonTertiaryCheckedPressedBackground" Color="#C6CACD" />
+    <SolidColorBrush x:Key="ToggleButtonSuccessCheckedPressedBackground" Color="#A6E1A8" />
     <SolidColorBrush x:Key="ToggleButtonWarningCheckedPressedBackground" Color="#FFDDA1" />
     <SolidColorBrush x:Key="ToggleButtonDangerCheckedPressedBackground" Color="#FDBEAC" />
 
-    <SolidColorBrush x:Key="ToggleButtonCheckedForeground" Color="Black" />
+    <SolidColorBrush x:Key="ToggleButtonCheckedForeground" Color="White" />
 
     <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBackground" Color="#053170" />
     <SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBackground" Color="#003761" />
     <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminateBackground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ToggleButtonSuccessIndeterminateBackground" Color="#123C19" />
     <SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBackground" Color="#551F03" />
     <SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBackground" Color="#6C090B" />
 
     <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminateBorderBrush" Color="#54A9FF" />
     <SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminateBorderBrush" Color="#40B4F3" />
     <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminateBorderBrush" Color="#888D92" />
+    <SolidColorBrush x:Key="ToggleButtonSuccessIndeterminateBorderBrush" Color="#5DC264" />
     <SolidColorBrush x:Key="ToggleButtonWarningIndeterminateBorderBrush" Color="#FFAE43" />
     <SolidColorBrush x:Key="ToggleButtonDangerIndeterminateBorderBrush" Color="#FC725A" />
 
     <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminatePointeroverBorderBrush" Color="#7FC1FF" />
     <SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminatePointeroverBorderBrush" Color="#6EC8F6" />
     <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminatePointeroverBorderBrush" Color="#A7ABB0" />
+    <SolidColorBrush x:Key="ToggleButtonSuccessIndeterminatePointeroverBorderBrush" Color="#7FD184" />
     <SolidColorBrush x:Key="ToggleButtonWarningIndeterminatePointeroverBorderBrush" Color="#FFC772" />
     <SolidColorBrush x:Key="ToggleButtonDangerIndeterminatePointeroverBorderBrush" Color="#FD9983" />
 
     <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminatePointeroverForeground" Color="#7FC1FF" />
     <SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminatePointeroverForeground" Color="#6EC8F6" />
     <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminatePointeroverForeground" Color="#A7ABB0" />
+    <SolidColorBrush x:Key="ToggleButtonSuccessIndeterminatePointeroverForeground" Color="#7FD184" />
     <SolidColorBrush x:Key="ToggleButtonWarningIndeterminatePointeroverForeground" Color="#FFC772" />
     <SolidColorBrush x:Key="ToggleButtonDangerIndeterminatePointeroverForeground" Color="#FD9983" />
     
     <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminatePressedBorderBrush" Color="#A9D7FF" />
     <SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminatePressedBorderBrush" Color="#9DDCF9" />
     <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminatePressedBorderBrush" Color="#C6CACD" />
+    <SolidColorBrush x:Key="ToggleButtonSuccessIndeterminatePressedBorderBrush" Color="#A6E1A8" />
     <SolidColorBrush x:Key="ToggleButtonWarningIndeterminatePressedBorderBrush" Color="#FFDDA1" />
     <SolidColorBrush x:Key="ToggleButtonDangerIndeterminatePressedBorderBrush" Color="#FDBEAC" />
 
     <SolidColorBrush x:Key="ToggleButtonPrimaryIndeterminatePressedForeground" Color="#A9D7FF" />
     <SolidColorBrush x:Key="ToggleButtonSecondaryIndeterminatePressedForeground" Color="#9DDCF9" />
     <SolidColorBrush x:Key="ToggleButtonTertiaryIndeterminatePressedForeground" Color="#C6CACD" />
+    <SolidColorBrush x:Key="ToggleButtonSuccessIndeterminatePressedForeground" Color="#A6E1A8" />
     <SolidColorBrush x:Key="ToggleButtonWarningIndeterminatePressedForeground" Color="#FFDDA1" />
     <SolidColorBrush x:Key="ToggleButtonDangerIndeterminatePressedForeground" Color="#FDBEAC" />
 

src/Semi.Avalonia/Themes/Index.axaml

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

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

@@ -18,6 +18,7 @@
     <SolidColorBrush x:Key="ButtonDefaultPrimaryForeground" Color="#0077FA" />
     <SolidColorBrush x:Key="ButtonDefaultSecondaryForeground" Color="#0095EE" />
     <SolidColorBrush x:Key="ButtonDefaultTertiaryForeground" Color="#6B7075" />
+    <SolidColorBrush x:Key="ButtonDefaultSuccessForeground" Color="#3BB346" />
     <SolidColorBrush x:Key="ButtonDefaultWarningForeground" Color="#FC8800" />
     <SolidColorBrush x:Key="ButtonDefaultDangerForeground" Color="#F93920" />
     <SolidColorBrush x:Key="ButtonDefaultDisabledForeground" Opacity="0.35" Color="#1C1F23" />
@@ -50,6 +51,10 @@
     <SolidColorBrush x:Key="ButtonSolidTertiaryPointeroverBackground" Color="#555B61" />
     <SolidColorBrush x:Key="ButtonSolidTertiaryPressedBackground" Color="#41464C" />
 
+    <SolidColorBrush x:Key="ButtonSolidSuccessBackground" Color="#3BB346" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPointeroverBackground" Color="#30953B" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPressedBackground" Color="#25772F" />
+
     <SolidColorBrush x:Key="ButtonSolidWarningBackground" Color="#FC8800" />
     <SolidColorBrush x:Key="ButtonSolidWarningPointeroverBackground" Color="#D26700" />
     <SolidColorBrush x:Key="ButtonSolidWarningPressedBackground" Color="#A84A00" />
@@ -72,6 +77,10 @@
     <SolidColorBrush x:Key="ButtonSolidTertiaryPointeroverBorderBrush" Color="#555B61" />
     <SolidColorBrush x:Key="ButtonSolidTertiaryPressedBorderBrush" Color="#41464C" />
 
+    <SolidColorBrush x:Key="ButtonSolidSuccessBorderBrush" Color="#3BB346" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPointeroverBorderBrush" Color="#30953B" />
+    <SolidColorBrush x:Key="ButtonSolidSuccessPressedBorderBrush" Color="#25772F" />
+
     <SolidColorBrush x:Key="ButtonSolidWarningBorderBrush" Color="#FC8800" />
     <SolidColorBrush x:Key="ButtonSolidWarningPointeroverBorderBrush" Color="#D26700" />
     <SolidColorBrush x:Key="ButtonSolidWarningPressedBorderBrush" Color="#A84A00" />

src/Semi.Avalonia/Themes/Light/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="#FFF93920" />
+    <SolidColorBrush x:Key="DataValidationErrorsBackground" Color="#FFFEF2ED" />
+    <SolidColorBrush x:Key="DataValidationErrorsBorderBrush" Color="#FFFEF2ED" />
+    <SolidColorBrush x:Key="DataValidationErrorsPointerOverBackground" Color="#FFFEDDD2" />
+    <SolidColorBrush x:Key="DataValidationErrorsPointerOverBorderBrush" Color="#FFFEDDD2" />
+    <SolidColorBrush x:Key="DataValidationErrorsPressedBackground" Color="#FFFDB7A5" />
+    <SolidColorBrush x:Key="DataValidationErrorsPressedBorderBrush" Color="#FFFDB7A5" />
+    <SolidColorBrush x:Key="DataValidationErrorsSelectedBackground" Color="#FFFEF2ED" />
+    <SolidColorBrush x:Key="DataValidationErrorsSelectedBorderBrush" Color="#FFF93920" />
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Light/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="#1C1F23" />
+    <CornerRadius x:Key="HeaderedContentControlCornerRadius">4</CornerRadius>
+</ResourceDictionary>

src/Semi.Avalonia/Themes/Light/Label.axaml

@@ -28,8 +28,8 @@
     <SolidColorBrush x:Key="LabelTagLightLightBlueBackground" Opacity="0.15" Color="#0095EE" />
     <SolidColorBrush x:Key="LabelTagLightLightGreenForeground" Color="#395B1B" />
     <SolidColorBrush x:Key="LabelTagLightLightGreenBackground" Opacity="0.15" Color="#7BB63C" />
-    <SolidColorBrush x:Key="LabelTagLightLimeForeground" Color="#9BD100" />
+    <SolidColorBrush x:Key="LabelTagLightLimeForeground" Color="#486800" />
-    <SolidColorBrush x:Key="LabelTagLightLimeBackground" Opacity="0.15" Color="#486800" />
+    <SolidColorBrush x:Key="LabelTagLightLimeBackground" Opacity="0.15" Color="#9BD100" />
     <SolidColorBrush x:Key="LabelTagLightOrangeForeground" Color="#7E3100" />
     <SolidColorBrush x:Key="LabelTagLightOrangeBackground" Opacity="0.15" Color="#FC8800" />
     <SolidColorBrush x:Key="LabelTagLightPinkForeground" Color="#7E053A" />

src/Semi.Avalonia/Themes/Light/Light.axaml

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