Merge pull request #217 from irihitech/11.0

feat: upgrade to v11.

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

demo/Directory.Build.props

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

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

@@ -16,7 +16,7 @@
             <Rectangle
                 Width="300"
                 Height="300"
-                Fill="#FEFBCB" />
+                Fill="{DynamicResource SemiYellow2}" />
         </ScrollViewer>
         <ScrollViewer
             Width="200"
@@ -27,7 +27,7 @@
             <Rectangle
                 Width="300"
                 Height="300"
-                Fill="#FEFBCB" />
+                Fill="{DynamicResource SemiYellow2}" />
         </ScrollViewer>
     </StackPanel>
 </UserControl>

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

@@ -18,29 +18,6 @@
         <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/Views/MainView.axaml

@@ -123,6 +123,9 @@
             <TabItem Header="GridSplitter">
                 <pages:GridSplitter />
             </TabItem>
+            <TabItem Header="HeaderedContentControl">
+                <pages:HeaderedContentControlDemo />
+            </TabItem>
             <TabItem Header="Label">
                 <pages:LabelDemo />
             </TabItem>

src/Package.props

@@ -3,11 +3,11 @@
         <TargetFrameworks>net6.0;netstandard2.0</TargetFrameworks>
         <Nullable>enable</Nullable>
         <LangVersion>10</LangVersion>
-        <Version>0.1.0-preview8</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-preview8</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

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

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

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

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

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

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

@@ -40,8 +40,6 @@
         <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">
                 <DataValidationErrors>
@@ -50,8 +48,8 @@
                             x:Name="Background"
                             Grid.Column="0"
                             Grid.ColumnSpan="2"
-                            MinHeight="{DynamicResource ComboBoxDefaultHeight}"
                             MinWidth="{DynamicResource ComboBoxThemeMinWidth}"
+                            MinHeight="{DynamicResource ComboBoxDefaultHeight}"
                             Background="{TemplateBinding Background}"
                             BorderBrush="{TemplateBinding BorderBrush}"
                             BorderThickness="{TemplateBinding BorderThickness}"
@@ -63,7 +61,8 @@
                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                             Foreground="{TemplateBinding Foreground}"
-                            IsVisible="{TemplateBinding SelectionBoxItem,Converter={x:Static ObjectConverters.IsNull}}"
+                            IsVisible="{TemplateBinding SelectionBoxItem,
+                                                        Converter={x:Static ObjectConverters.IsNull}}"
                             Opacity="0.3"
                             Text="{TemplateBinding PlaceholderText}" />
                         <ContentPresenter
@@ -105,7 +104,8 @@
                             ClipToBounds="False"
                             InheritsTransform="True"
                             IsLightDismissEnabled="True"
-                            IsOpen="{TemplateBinding IsDropDownOpen,Mode=TwoWay}"
+                            IsOpen="{TemplateBinding IsDropDownOpen,
+                                                     Mode=TwoWay}"
                             PlacementTarget="Background"
                             WindowManagerAddShadowHint="False">
                             <Border
@@ -118,9 +118,7 @@
                                 BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
                                 ClipToBounds="True"
                                 CornerRadius="6">
-                                <ScrollViewer
+                                <ScrollViewer HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
-                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
-                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                                     <ItemsPresenter
                                         Name="PART_ItemsPresenter"
                                         Margin="{DynamicResource ComboBoxDropdownContentMargin}"

src/Semi.Avalonia/Controls/Controls.axaml

@@ -24,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/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/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">
@@ -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" />
@@ -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/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>
@@ -214,13 +227,14 @@
                         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 IsScrollInertiaEnabled, RelativeSource={RelativeSource TemplatedParent}}" />
+                                IsScrollInertiaEnabled="{Binding (ScrollViewer.IsScrollInertiaEnabled), ElementName=PART_ContentPresenter}" />
                         </ScrollContentPresenter.GestureRecognizers>
                     </ScrollContentPresenter>
                     <ScrollBar
@@ -263,13 +277,14 @@
                         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 IsScrollInertiaEnabled, RelativeSource={RelativeSource TemplatedParent}}" />
+                                IsScrollInertiaEnabled="{Binding (ScrollViewer.IsScrollInertiaEnabled), ElementName=PART_ContentPresenter}" />
                         </ScrollContentPresenter.GestureRecognizers>
                     </ScrollContentPresenter>
                     <ScrollBar

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/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/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>Update to Avalonia 11.0.0-preview8</PackageReleaseNotes>
+    <PackageReleaseNotes>Update to Avalonia 11.0.0-rc1</PackageReleaseNotes>
   </PropertyGroup>
 
   <ItemGroup>

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

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

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

@@ -19,6 +19,7 @@
         <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/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/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

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

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

@@ -18,6 +18,7 @@
         <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" />

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

@@ -2,11 +2,14 @@
     <!--  Add Resources Here  -->
     <SolidColorBrush x:Key="ProgressBarIndicatorBrush" Color="#0077FA" />
     <CornerRadius x:Key="ProgressBarBackgroundCornerRadius">3</CornerRadius>
-    <SolidColorBrush x:Key="ProgressBarBackground" Opacity="0.5" Color="#2E3238" />
+    <SolidColorBrush x:Key="ProgressBarBackground" Opacity="0.05" Color="#2E3238" />
     <SolidColorBrush x:Key="ProgressBarTextForeground" Color="#1C1F23" />
     <SolidColorBrush x:Key="ProgressBarOuterTextForeground" Color="#1C1F23" />
     <SolidColorBrush x:Key="ProgressBarRootBorderBrush" Color="Transparent" />
     <FontWeight x:Key="ProgressBarTextFontWeight">600</FontWeight>
+    <SolidColorBrush x:Key="ProgressBarPrimaryForeground" Color="#0077FA" />
+    <SolidColorBrush x:Key="ProgressBarSecondaryForeground" Color="#0095EE" />
+    <SolidColorBrush x:Key="ProgressBarTertiaryForeground" Color="#6B7075" />
     <SolidColorBrush x:Key="ProgressBarSuccessForeground" Color="#3BB346" />
     <SolidColorBrush x:Key="ProgressBarWarningForeground" Color="#FC8800" />
     <SolidColorBrush x:Key="ProgressBarErrorForeground" Color="#F93920" />

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

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

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

@@ -2,11 +2,16 @@
     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="#1C1F23" />
+    <SolidColorBrush x:Key="ScrollBarButtonDefaultForeground" Opacity="0.35" Color="#1C1F23" />
-    <SolidColorBrush x:Key="ScrollBarButtonPointeroverForeground" Color="#1C1F23" />
+    <SolidColorBrush x:Key="ScrollBarButtonPointeroverForeground" Opacity="0.62" Color="#1C1F23" />
     <SolidColorBrush x:Key="ScrollBarThumbForeground" Opacity="0.35" Color="#1C1F23" />
-    <SolidColorBrush x:Key="ScrollBarBackground" Opacity="0.05" Color="#2E3238" />
+    <SolidColorBrush x:Key="ScrollBarThumbPointeroverForeground" Opacity="0.62" Color="#1C1F23" />
+    <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>