Merge branch 'main' into 256-colorpicker

demo/Directory.Build.props

@@ -1,6 +1,6 @@
 <Project>
   <PropertyGroup>
     <Nullable>enable</Nullable>
-    <AvaloniaVersion>11.1.999-cibuild0040425-beta</AvaloniaVersion>
+    <AvaloniaVersion>11.0.7</AvaloniaVersion>
   </PropertyGroup>
 </Project>

demo/Semi.Avalonia.Demo.Drm/Program.cs

@@ -1,59 +1,53 @@
-using Avalonia;
-using Avalonia.Dialogs;
-using Avalonia.Media;
-using System;
+using System;
+using System.Globalization;
 using System.Linq;
 using System.Threading;
+using Avalonia;
 
-namespace Semi.Avalonia.Demo.Drm
+namespace Semi.Avalonia.Demo.Drm;
+
+class Program
 {
-    internal class Program
+    // Initialization code. Don't use any Avalonia, third-party APIs or any
+    // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
+    // yet and stuff might break.
+    [STAThread]
+    public static int Main(string[] args)
     {
-        // Initialization code. Don't use any Avalonia, third-party APIs or any
-        // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
-        // yet and stuff might break.
-        [STAThread]
-        public static void Main(string[] args)
+        var builder = BuildAvaloniaApp();
+
+        double GetScaling()
         {
-            var builder = BuildAvaloniaApp();
-            builder.With(new FontManagerOptions
-            {
-                FontFallbacks = new[]
-                {
-                new FontFallback
-                {
-                    FontFamily = new FontFamily("Microsoft YaHei")
-                }
-            }
-            });
-            if (args.Contains("--drm"))
-            {
-                SilenceConsole();
-                builder.StartLinuxDrm(args: args, card: "/dev/dri/card0", scaling: 1);
-            }
-            else
-            {
-                builder.StartWithClassicDesktopLifetime(args);
-            }
+            var idx = Array.IndexOf(args, "--scaling");
+            if (idx != 0 && args.Length > idx + 1 &&
+                double.TryParse(args[idx + 1], NumberStyles.Any, CultureInfo.InvariantCulture, out var scaling))
+                return scaling;
+            return 1;
         }
 
-        // Avalonia configuration, don't remove; also used by visual designer.
-        public static AppBuilder BuildAvaloniaApp()
-            => AppBuilder.Configure<App>()
-                .UseManagedSystemDialogs()
-                .UsePlatformDetect()
-                .With(new Win32PlatformOptions())
-                .LogToTrace();
-
-        private static void SilenceConsole()
+        if (args.Contains("--drm"))
         {
-            new Thread(() =>
+            SilenceConsole();
+            return builder.StartLinuxDrm(args: args, card: "/dev/dri/card1", scaling: GetScaling());
+        }
+
+        return builder.StartWithClassicDesktopLifetime(args);
+    }
+
+    // Avalonia configuration, don't remove; also used by visual designer.
+    public static AppBuilder BuildAvaloniaApp()
+        => AppBuilder.Configure<App>()
+            .UsePlatformDetect()
+            .LogToTrace();
+
+    private static void SilenceConsole()
+    {
+        new Thread(() =>
             {
                 Console.CursorVisible = false;
                 while (true)
                     Console.ReadKey(true);
             })
             { IsBackground = true }.Start();
-        }
     }
 }

demo/Semi.Avalonia.Demo.Drm/使用方法.md

@@ -1,18 +1,23 @@
 # DRM启动步骤
 
-(Ubuntu18.04Server版本 虚拟机测试OK)
+(Ubuntu18.04Server版本 虚拟机测试OK)  
+(Orange Pi Zero2 Ubuntu20.04-arm64 测试OK)
 
 Avalonia官方参考文档：https://docs.avaloniaui.net/docs/next/guides/platforms/rpi/running-on-raspbian-lite-via-drm
 
-1.Linux端运行命令
- sudo apt update
- sudo apt upgrade
- sudo reboot
- sudo apt - get install libgbm1 libgl1 - mesa - dri libegl1 - mesa libinput10
+1.Linux端运行命令  
+```
+sudo apt update  
+sudo apt upgrade  
+sudo reboot  
+sudo apt - get install libgbm1 libgl1 - mesa - dri libegl1 - mesa libinput10
+```
 
-2.安装测试工具测试(出现一个彩色立方体说明环境安装完成)
- sudo apt-get install kmscube
- sudo kmscube
+2.安装测试工具测试(出现一个彩色立方体说明环境安装完成)  
+```
+sudo apt-get install kmscube
+sudo kmscube
+```
 
 3.安装.net运行时(参考网址：https://learn.microsoft.com/zh-cn/dotnet/core/install/linux?WT.mc_id=dotnet-35129-website)
 
@@ -31,7 +36,7 @@ Avalonia官方参考文档：https://docs.avaloniaui.net/docs/next/guides/platfo
 >Unhandled exception. Avalonia.Markup.Xaml.XamlLoadException: No precompiled XAML found for avares://Semi.Avalonia/Themes/Light/Light.axaml (baseUri: avares://Semi.Avalonia/Themes/Index.axaml), make sure to specify x:Class and include your XAML file as AvaloniaResource
 
  解决方法：
-    如果使用Semi发布文件不要裁剪，如果裁剪会报错
+>如果使用Semi发布文件不要裁剪，如果裁剪会报错
          
 
 2. 报错内容
@@ -41,11 +46,32 @@ Avalonia官方参考文档：https://docs.avaloniaui.net/docs/next/guides/platfo
     at SkiaSharp.SKImageInfo..cctor()
 
 解决方法：
-    Linux命令行安装一下 apt-get install -y libfontconfig1
-    参考网址：https://github.com/mono/SkiaSharp/issues/509
+>Linux命令行安装一下 apt-get install -y libfontconfig1  
+参考网址：https://github.com/mono/SkiaSharp/issues/509
 
 3. 报错内容
 >Permission denied
 
+解决方法：  
+>sudo chmod +x ./Semi.Avalonia.Demo.Drm
+
+4. 报错内容
+>Unhandled exception. System.ComponentModel.Win32Exception (95): drmModeGetResources failed
+at Avalonia.LinuxFramebuffer.Output.DrmResources..ctor(Int32 fd, Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 91
+at Avalonia.LinuxFramebuffer.Output.DrmCard.GetResources(Boolean connectorsForceProbe) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 171
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String path, Boolean connectorsForceProbe, DrmOutputOptions options) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 60
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder builder, String[] args, String card, Double scaling, IInputBackend inputBackend) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[] args)
+
 解决方法：
-    sudo chmod +x ./Semi.Avalonia.Demo.Drm
+>`program.cs`的显卡路径错误，可能不是`dev/dri/card1`，看在`dev/dri`目录下有无其他的显卡如`card0`。
+
+5. 报错内容
+>Unhandled exception. System.ComponentModel.Win32Exception (2): Couldn't open /dev/dri/card1
+at Avalonia.LinuxFramebuffer.Output.DrmCard..ctor(String ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmBindings.cs:line 167
+at Avalonia.LinuxFramebuffer.Output.DrmOutput..ctor(String , Boolean , DrmOutputOptions ) in /_/src/Linux/Avalonia.LinuxFramebuffer/Output/DrmOutput.cs:line 58
+at LinuxFramebufferPlatformExtensions.StartLinuxDrm(AppBuilder, String[], String , Double , IInputBackend ) in /_/src/Linux/Avalonia.LinuxFramebuffer/LinuxFramebufferPlatform.cs:line 166
+at Semi.Avalonia.Demo.Drm.Program.Main(String[])
+
+解决办法：
+>找不到显卡路径`dev/dri/card1`，可能是显卡挂载到别的文件夹下了，待解决。

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

@@ -9,6 +9,7 @@
     mc:Ignorable="d">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
         <CalendarDatePicker />
+        <CalendarDatePicker Classes="ClearButton" Width="200" />
         <CalendarDatePicker Width="500" />
         <CalendarDatePicker Classes="Large" />
         <CalendarDatePicker Classes="Small" />

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

@@ -15,6 +15,13 @@
             <ComboBoxItem>Mr. 17</ComboBoxItem>
             <ComboBoxItem>Cass</ComboBoxItem>
         </ComboBox>
+        <ComboBox Width="150" Classes="ClearButton">
+            <ComboBoxItem>Ding</ComboBoxItem>
+            <ComboBoxItem>Otter</ComboBoxItem>
+            <ComboBoxItem>Husky</ComboBoxItem>
+            <ComboBoxItem>Mr. 17</ComboBoxItem>
+            <ComboBoxItem>Cass</ComboBoxItem>
+        </ComboBox>
         <ComboBox Width="150" PlaceholderText="Please Select">
             <ComboBoxItem>Ding</ComboBoxItem>
             <ComboBoxItem>Otter</ComboBoxItem>

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

@@ -13,43 +13,48 @@
     mc:Ignorable="d">
     <TabControl>
         <TabItem Header="DataGrid">
-            <DataGrid
-                Margin="8"
-                CanUserReorderColumns="True"
-                CanUserResizeColumns="True"
-                CanUserSortColumns="True"
-                HeadersVisibility="All"
-                IsReadOnly="True"
-                ItemsSource="{Binding GridData1}">
-                <DataGrid.Columns>
-                    <DataGridTextColumn
-                        Width="6*"
-                        x:DataType="vm:Song"
-                        Binding="{Binding Title}"
-                        Header="Title" />
-                    <DataGridTextColumn
-                        Width="6*"
-                        x:DataType="vm:Song"
-                        Binding="{Binding Artist}"
-                        Header="Artist" />
-                    <DataGridTextColumn
-                        Width="6*"
-                        x:DataType="vm:Song"
-                        Binding="{Binding Album}"
-                        Header="Album" />
-                    <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
-                        <DataGridTemplateColumn.CellTemplate>
-                            <DataTemplate>
-                                <TextBlock
-                                    Margin="8,0,0,0"
-                                    VerticalAlignment="Center"
-                                    Text="{Binding Duration}" />
-                            </DataTemplate>
-                        </DataGridTemplateColumn.CellTemplate>
-                    </DataGridTemplateColumn>
-                </DataGrid.Columns>
+           <Grid RowDefinitions="Auto, *">
+               <ToggleSwitch Grid.Row="0" Content="Disable" Name="DisableToggle"></ToggleSwitch>
+               <DataGrid Grid.Row="1"
+                         Margin="8"
+                         CanUserReorderColumns="True"
+                         CanUserResizeColumns="True"
+                         CanUserSortColumns="True"
+                         HeadersVisibility="All"
+                         IsReadOnly="True"
+                         IsEnabled="{Binding #DisableToggle.IsChecked}"
+                         ItemsSource="{Binding GridData1}">
+                   <DataGrid.Columns>
+                       <DataGridTextColumn
+                           Width="6*"
+                           x:DataType="vm:Song"
+                           Binding="{Binding Title}"
+                           Header="Title" />
+                       <DataGridTextColumn
+                           Width="6*"
+                           x:DataType="vm:Song"
+                           Binding="{Binding Artist}"
+                           Header="Artist" />
+                       <DataGridTextColumn
+                           Width="6*"
+                           x:DataType="vm:Song"
+                           Binding="{Binding Album}"
+                           Header="Album" />
+                       <DataGridTemplateColumn Header="Duration" SortMemberPath="Duration">
+                           <DataGridTemplateColumn.CellTemplate>
+                               <DataTemplate>
+                                   <TextBlock
+                                       Margin="8,0,0,0"
+                                       VerticalAlignment="Center"
+                                       Text="{Binding Duration}" />
+                               </DataTemplate>
+                           </DataGridTemplateColumn.CellTemplate>
+                       </DataGridTemplateColumn>
+                   </DataGrid.Columns>
 
-            </DataGrid>
+               </DataGrid>
+               
+           </Grid>
         </TabItem>
         <TabItem Header="Grouping">
             <DataGrid
@@ -162,6 +167,7 @@
                     Grid.Row="2"
                     Margin="12,0,12,12"
                     HorizontalAlignment="Right"
+                    Command="{Binding AddCommand}"
                     Content="Add" />
             </Grid>
         </TabItem>

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

@@ -9,6 +9,7 @@
     mc:Ignorable="d">
     <StackPanel Spacing="20">
         <DatePicker />
+        <DatePicker Classes="ClearButton" />
         <DatePicker DayFormat="d (ddd)" YearVisible="False" />
         <DatePicker IsEnabled="False" />
         <DatePicker Classes="Large" />

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

@@ -6,7 +6,32 @@
              x:Class="Semi.Avalonia.Demo.Pages.HeaderedContentControlDemo">
     <ScrollViewer>
         <StackPanel HorizontalAlignment="Left" Spacing="20">
-            <HeaderedContentControl Theme="{DynamicResource GroupBox}" Header="Semi Design" Width="400" Height="200">
+            <TextBlock>Default Theme</TextBlock>
+            <WrapPanel ItemWidth="400">
+                <HeaderedContentControl
+                    Header="This is the text header!"
+                    BorderBrush="Gray"
+                    BorderThickness="1"
+                    CornerRadius="4">
+                    <TextBlock Text="Some content" />
+                </HeaderedContentControl>
+                <HeaderedContentControl Header="This is the image header!">
+                    <Image Source="/Assets/WORLD.png" />
+                </HeaderedContentControl>
+                <HeaderedContentControl>
+                    <HeaderedContentControl.Header>
+                        <Image Source="/Assets/WORLD.png" />
+                    </HeaderedContentControl.Header>
+                    <TextBlock Text="This is the content. But the header can also be non textual" />
+                </HeaderedContentControl>
+            </WrapPanel>
+            <TextBlock>GroupBox Theme</TextBlock>
+            <HeaderedContentControl
+                HorizontalAlignment="Left"
+                Theme="{DynamicResource GroupBox}"
+                Header="Semi Design"
+                Width="400"
+                Height="200">
                 <TextBlock TextWrapping="Wrap">Semi Design 是由互娱社区前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。</TextBlock>
             </HeaderedContentControl>
         </StackPanel>

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

@@ -38,9 +38,9 @@
                             <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
                             <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
                             <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
-                            <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
-                            <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
-                            <TextBlock Grid.Row="8" Grid.Column="0">Success</TextBlock>
+                            <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
+                            <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
+                            <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
                             <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
                             <TextBlock Grid.Row="10" Grid.Column="0">Code</TextBlock>
                             <Label Grid.Row="2" Grid.Column="1">Text</Label>
@@ -65,20 +65,20 @@
                             <Label
                                 Grid.Row="6"
                                 Grid.Column="1"
-                                Classes="Warning">
-                                Warning
+                                Classes="Success">
+                                Success
                             </Label>
                             <Label
                                 Grid.Row="7"
                                 Grid.Column="1"
-                                Classes="Danger">
-                                Danger
+                                Classes="Warning">
+                                Warning
                             </Label>
                             <Label
                                 Grid.Row="8"
                                 Grid.Column="1"
-                                Classes="Success">
-                                Success
+                                Classes="Danger">
+                                Danger
                             </Label>
                             <Label
                                 Grid.Row="9"

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

@@ -8,6 +8,7 @@
     d:DesignWidth="800"
     mc:Ignorable="d">
     <StackPanel HorizontalAlignment="Left" Spacing="20">
+        <Button Click="InfoButton_OnClick" Content="Default" />
         <Button Click="InfoButton_OnClick" Content="Information" />
         <Button Click="InfoButton_OnClick" Content="Success" />
         <Button Click="InfoButton_OnClick" Content="Warning" />

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

@@ -2,17 +2,14 @@ using System;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Notifications;
-using Avalonia.Controls.Presenters;
 using Avalonia.Interactivity;
-using Avalonia.Markup.Xaml;
-using Avalonia.VisualTree;
-using Semi.Avalonia.Demo.Views;
 
 namespace Semi.Avalonia.Demo.Pages;
 
 public partial class NotificationDemo : UserControl
 {
     private WindowNotificationManager? _manager;
+
     public NotificationDemo()
     {
         InitializeComponent();
@@ -22,14 +19,16 @@ public partial class NotificationDemo : UserControl
     {
         base.OnAttachedToVisualTree(e);
         var topLevel = TopLevel.GetTopLevel(this);
-        _manager = new WindowNotificationManager(topLevel){ MaxItems = 3};
+        _manager = new WindowNotificationManager(topLevel) { MaxItems = 3 };
     }
 
     private void InfoButton_OnClick(object? sender, RoutedEventArgs e)
     {
-        if (sender is Button b && b.Content is string s && Enum.TryParse<NotificationType>(s, out NotificationType t))
+        if (sender is Button b && b.Content is string s)
         {
-            _manager?.Show(new Notification(t.ToString(), "This is message", t));
+            _manager?.Show(Enum.TryParse<NotificationType>(s, out NotificationType t)
+                ? new Notification(t.ToString(), "This is message", t)
+                : new Notification(s, "This is message"));
         }
     }
 }

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

@@ -31,9 +31,9 @@
                     <SelectableTextBlock Grid.Row="3" Grid.Column="0">Secondary</SelectableTextBlock>
                     <SelectableTextBlock Grid.Row="4" Grid.Column="0">Tertiary</SelectableTextBlock>
                     <SelectableTextBlock Grid.Row="5" Grid.Column="0">Quaternary</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Warning</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Danger</SelectableTextBlock>
-                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Success</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="6" Grid.Column="0">Success</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="7" Grid.Column="0">Warning</SelectableTextBlock>
+                    <SelectableTextBlock Grid.Row="8" Grid.Column="0">Danger</SelectableTextBlock>
                     <SelectableTextBlock Grid.Row="9" Grid.Column="0">Mark</SelectableTextBlock>
                     <SelectableTextBlock Grid.Row="10" Grid.Column="0">Underline</SelectableTextBlock>
                     <SelectableTextBlock Grid.Row="11" Grid.Column="0">Delete</SelectableTextBlock>
@@ -60,20 +60,20 @@
                     <SelectableTextBlock
                         Grid.Row="6"
                         Grid.Column="1"
-                        Classes="Warning">
-                        Warning
+                        Classes="Success">
+                        Success
                     </SelectableTextBlock>
                     <SelectableTextBlock
                         Grid.Row="7"
                         Grid.Column="1"
-                        Classes="Danger">
-                        Danger
+                        Classes="Warning">
+                        Warning
                     </SelectableTextBlock>
                     <SelectableTextBlock
                         Grid.Row="8"
                         Grid.Column="1"
-                        Classes="Success">
-                        Success
+                        Classes="Danger">
+                        Danger
                     </SelectableTextBlock>
                     <SelectableTextBlock
                         Grid.Row="9"

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

@@ -4,63 +4,92 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:vm="clr-namespace:Semi.Avalonia.Demo.ViewModels;assembly=Semi.Avalonia.Demo"
     d:DesignHeight="450"
     d:DesignWidth="800"
+    x:CompileBindings="True"
+    x:DataType="vm:TabControlDemoViewModel"
     mc:Ignorable="d">
-    <StackPanel Spacing="20">
-        <Border Theme="{StaticResource CardBorder}">
-            <TabControl TabStripPlacement="Top">
-                <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </TabControl>
-        </Border>
-        <Border Theme="{StaticResource CardBorder}">
-            <TabControl TabStripPlacement="Left">
-                <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </TabControl>
-        </Border>
-        <Border Theme="{StaticResource CardBorder}">
-            <TabControl TabStripPlacement="Right">
-                <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </TabControl>
-        </Border>
-        <Border Theme="{StaticResource CardBorder}">
-            <TabControl TabStripPlacement="Bottom">
-                <TabItem Content="Hello 1" Header="Tab 1" />
-                <TabItem Content="Hello 2" Header="Tab 2" />
-                <TabItem Content="Hello 3" Header="Tab 3" />
-                <TabItem Content="中文内容" Header="中文中文" />
-                <TabItem
-                    Content="Hello 4"
-                    Header="Tab 4"
-                    IsEnabled="False" />
-            </TabControl>
-        </Border>
-        <Border Theme="{StaticResource CardBorder}">
-            <TabStrip>
-                <TabStripItem>Tab 1</TabStripItem>
-                <TabStripItem>Tab 2</TabStripItem>
-            </TabStrip>
-        </Border>
-    </StackPanel>
+    <ScrollViewer>
+        <StackPanel Spacing="20">
+            <Border Theme="{StaticResource CardBorder}">
+                <TabControl TabStripPlacement="Top">
+                    <TabItem Content="Hello 1" Header="Tab 1" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </TabControl>
+            </Border>
+            <Border Theme="{StaticResource CardBorder}">
+                <TabControl TabStripPlacement="Left">
+                    <TabItem Content="Hello 1" Header="Tab 1" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </TabControl>
+            </Border>
+            <Border Theme="{StaticResource CardBorder}">
+                <TabControl TabStripPlacement="Right">
+                    <TabItem Content="Hello 1" Header="Tab 1" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </TabControl>
+            </Border>
+            <Border Theme="{StaticResource CardBorder}">
+                <TabControl TabStripPlacement="Bottom">
+                    <TabItem Content="Hello 1" Header="Tab 1" />
+                    <TabItem Content="Hello 2" Header="Tab 2" />
+                    <TabItem Content="Hello 3" Header="Tab 3" />
+                    <TabItem Content="中文内容" Header="中文中文" />
+                    <TabItem
+                        Content="Hello 4"
+                        Header="Tab 4"
+                        IsEnabled="False" />
+                </TabControl>
+            </Border>
+            <Border Theme="{StaticResource CardBorder}">
+                <TabStrip>
+                    <TabStripItem>Tab 1</TabStripItem>
+                    <TabStripItem>Tab 2</TabStripItem>
+                </TabStrip>
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Top"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Left"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Bottom"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+            <Border Height="300" Theme="{DynamicResource CardBorder}">
+                <TabControl
+                    ItemsSource="{Binding Items}"
+                    TabStripPlacement="Right"
+                    Theme="{DynamicResource ScrollTabControl}" />
+            </Border>
+        </StackPanel>
+    </ScrollViewer>
 </UserControl>

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

@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using Semi.Avalonia.Demo.ViewModels;
 
 namespace Semi.Avalonia.Demo.Pages;
 
@@ -9,5 +10,6 @@ public partial class TabControlDemo : UserControl
     public TabControlDemo()
     {
         InitializeComponent();
+        this.DataContext = new TabControlDemoViewModel();
     }
 }

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

@@ -31,9 +31,9 @@
                     <TextBlock Grid.Row="3" Grid.Column="0">Secondary</TextBlock>
                     <TextBlock Grid.Row="4" Grid.Column="0">Tertiary</TextBlock>
                     <TextBlock Grid.Row="5" Grid.Column="0">Quaternary</TextBlock>
-                    <TextBlock Grid.Row="6" Grid.Column="0">Warning</TextBlock>
-                    <TextBlock Grid.Row="7" Grid.Column="0">Danger</TextBlock>
-                    <TextBlock Grid.Row="8" Grid.Column="0">Success</TextBlock>
+                    <TextBlock Grid.Row="6" Grid.Column="0">Success</TextBlock>
+                    <TextBlock Grid.Row="7" Grid.Column="0">Warning</TextBlock>
+                    <TextBlock Grid.Row="8" Grid.Column="0">Danger</TextBlock>
                     <TextBlock Grid.Row="9" Grid.Column="0">Mark</TextBlock>
                     <TextBlock Grid.Row="10" Grid.Column="0">Underline</TextBlock>
                     <TextBlock Grid.Row="11" Grid.Column="0">Delete</TextBlock>
@@ -60,20 +60,20 @@
                     <TextBlock
                         Grid.Row="6"
                         Grid.Column="1"
-                        Classes="Warning">
-                        Warning
+                        Classes="Success">
+                        Success
                     </TextBlock>
                     <TextBlock
                         Grid.Row="7"
                         Grid.Column="1"
-                        Classes="Danger">
-                        Danger
+                        Classes="Warning">
+                        Warning
                     </TextBlock>
                     <TextBlock
                         Grid.Row="8"
                         Grid.Column="1"
-                        Classes="Success">
-                        Success
+                        Classes="Danger">
+                        Danger
                     </TextBlock>
                     <TextBlock
                         Grid.Row="9"

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

@@ -9,6 +9,7 @@
     mc:Ignorable="d">
     <StackPanel Spacing="20">
         <TimePicker />
+        <TimePicker Classes="ClearButton" />
         <TimePicker MinuteIncrement="15" />
         <TimePicker ClockIdentifier="24HourClock" />
         <TimePicker ClockIdentifier="12HourClock" IsEnabled="False" />

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

@@ -36,9 +36,9 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^[TabStripPlacement=Left] /template/ Border#PART_BorderSeparator">
-            <Setter Property="Border.Width" Value="1" />
-            <Setter Property="Border.VerticalAlignment" Value="Stretch" />
-            <Setter Property="Border.HorizontalAlignment" Value="Left" />
+            <Setter Property="Width" Value="1" />
+            <Setter Property="VerticalAlignment" Value="Stretch" />
+            <Setter Property="HorizontalAlignment" Value="Left" />
         </Style>
     </ControlTheme>
 </ResourceDictionary>

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

@@ -4,6 +4,7 @@ using System.Collections.ObjectModel;
 using System.Linq;
 using Avalonia.Collections;
 using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 
 namespace Semi.Avalonia.Demo.ViewModels;
 
@@ -14,6 +15,8 @@ public class DataGridDemoViewModel: ObservableObject
     public DataGridCollectionView GridData2 { get; set; }
     
     public ObservableCollection<SongViewModel> GridData3 { get; set; }
+    
+    public RelayCommand AddCommand { get; set; }
 
     public DataGridDemoViewModel()
     {
@@ -28,6 +31,12 @@ public class DataGridDemoViewModel: ObservableObject
             CountOfComment = a.CountOfComment,
             IsSelected = false
         }));
+        AddCommand = new RelayCommand(Add);
+    }
+
+    private void Add()
+    {
+        GridData3.Add(new SongViewModel());
     }
 }
 

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

@@ -0,0 +1,15 @@
+using System.Collections.ObjectModel;
+using System.Linq;
+using CommunityToolkit.Mvvm.ComponentModel;
+
+namespace Semi.Avalonia.Demo.ViewModels;
+
+public class TabControlDemoViewModel: ObservableObject
+{
+    public ObservableCollection<string> Items { get; set; }
+
+    public TabControlDemoViewModel()
+    {
+        Items = new ObservableCollection<string>(Enumerable.Range(1, 200).Select(a => "Tab " + a));
+    }
+}

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

@@ -8,14 +8,15 @@
         <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
     </PropertyGroup>
 
-
+    <Import Project="../Directory.Build.props" />
+    
     <ItemGroup>
-        <PackageReference Include="Avalonia" Version="11.0.0" />
-        <PackageReference Include="Avalonia.Desktop" Version="11.0.0" />
-        <PackageReference Include="Avalonia.Themes.Fluent" Version="11.0.0" />
-        <PackageReference Include="Avalonia.Fonts.Inter" Version="11.0.0" />
+        <PackageReference Include="Avalonia" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Themes.Fluent" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.Fonts.Inter" Version="$(AvaloniaVersion)" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.1" />
     </ItemGroup>