Merge pull request #487 from gehongyan/combobox-selectionbox

feat: ComboBox should respect SelectionBoxItemTemplate
feat: ComboBox respects SelectionBoxItemTemplate
2024-12-08 16:20:07 +08:00 · 2024-12-07 00:57:14 +08:00 · 2024-12-05 16:44:46 +08:00 · 2024-12-04 11:46:52 +08:00 · 2024-12-02 17:54:01 +08:00 · 2024-12-02 17:52:12 +08:00
15 changed files with 338 additions and 300 deletions
--- a/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ComboBoxDemo.axaml
@ -27,6 +27,15 @@
        <ComboBox Classes="Small" />
        <ComboBox Classes="Bordered" />
        <ComboBox Classes="Bordered" IsEnabled="False" />
+        <ComboBox>
+          <ComboBox.SelectionBoxItemTemplate>
+            <DataTemplate DataType="x:String">
+              <ContentControl BorderThickness="1"
+                              BorderBrush="Gold"
+                              Content="{Binding}" />
+            </DataTemplate>
+          </ComboBox.SelectionBoxItemTemplate>
+        </ComboBox>

        <StackPanel Orientation="Horizontal">
            <ComboBox Width="100" Classes="Large" PlaceholderText="Large" />
--- a/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/ToggleSwitchDemo.axaml
@ -8,22 +8,23 @@
    d:DesignWidth="800"
    mc:Ignorable="d">
    <StackPanel Spacing="8" Margin="20">
-        <ToggleSwitch
-            Content="Content"
-            OffContent="OffContent"
-            OnContent="OnContent" />
-        <ToggleSwitch
-            Content="Content"
-            IsChecked="True"
-            IsEnabled="False"
-            OffContent="OffContent"
-            OnContent="OnContent" />
-        <ToggleSwitch
-            Content="Content"
-            IsChecked="False"
-            IsEnabled="False"
-            OffContent="OffContent"
-            OnContent="OnContent" />
+        <StackPanel Orientation="Horizontal">
+            <StackPanel>
+                <ToggleSwitch />
+                <ToggleSwitch IsChecked="True" />
+            </StackPanel>
+            <StackPanel>
+                <ToggleSwitch IsEnabled="False" />
+                <ToggleSwitch IsChecked="True" IsEnabled="False" />
+            </StackPanel>
+        </StackPanel>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" />
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsChecked="True"/>
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" />
+            <ToggleSwitch Content="Switch" OnContent="Yes" OffContent="No" IsEnabled="False" IsChecked="True" />
+        </StackPanel>
+
        <StackPanel Orientation="Horizontal">
            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" />
            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" Classes="Small" IsChecked="True" />
@ -44,8 +45,8 @@
        </StackPanel>

        <StackPanel Orientation="Horizontal">
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开"/>
-            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜"/>
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" />
+            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="关" OnContent="开" IsChecked="True" />
@ -60,21 +61,35 @@
            <ToggleSwitch Theme="{StaticResource SimpleToggleSwitch}" OffContent="〇" OnContent="｜" Classes="Large" IsChecked="True" />
        </StackPanel>

-        <ToggleSwitch Theme="{DynamicResource ButtonToggleSwitch}">
-            <ToggleSwitch.OnContent>
-                <PathIcon
-                    Width="16"
-                    Height="16"
-                    Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13"
-                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-            </ToggleSwitch.OnContent>
-            <ToggleSwitch.OffContent>
-                <PathIcon
-                    Width="16"
-                    Height="16"
-                    Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z"
-                    Foreground="{DynamicResource ButtonDefaultTertiaryForeground}" />
-            </ToggleSwitch.OffContent>
-        </ToggleSwitch>
+        <StackPanel Orientation="Horizontal">
+            <ToggleSwitch
+                HorizontalAlignment="Left"
+                Padding="8"
+                Theme="{DynamicResource ButtonToggleSwitch}"
+                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
+                <ToggleSwitch.Content>
+                    <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
+                        Data="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" />
+                </ToggleSwitch.Content>
+            </ToggleSwitch>
+            <ToggleSwitch
+                HorizontalAlignment="Left"
+                Padding="8"
+                Theme="{DynamicResource ButtonToggleSwitch}"
+                Foreground="{DynamicResource ButtonDefaultTertiaryForeground}">
+                <ToggleSwitch.OnContent>
+                    <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
+                        Data="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13" />
+                </ToggleSwitch.OnContent>
+                <ToggleSwitch.OffContent>
+                    <PathIcon
+                        Theme="{DynamicResource InnerPathIcon}"
+                        Data="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23ZM17 15C17.476 15 17.9408 14.9525 18.3901 14.862C17.296 17.3011 14.8464 19 12 19C8.13401 19 5 15.866 5 12C5 8.60996 7.40983 5.78277 10.6099 5.13803C10.218 6.01173 10 6.98041 10 8C10 11.866 13.134 15 17 15Z" />
+                </ToggleSwitch.OffContent>
+            </ToggleSwitch>
+        </StackPanel>
+
    </StackPanel>
 </UserControl>
--- a/demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml
+++ b/demo/Semi.Avalonia.Demo/Themes/ToggleSwitch.axaml
@ -1,67 +1,31 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <ControlTheme x:Key="ThemeToggleSwitch" TargetType="ToggleSwitch">
-        <Setter Property="HorizontalAlignment" Value="Center" />
-        <Setter Property="VerticalAlignment" Value="Center" />
-        <Setter Property="HorizontalContentAlignment" Value="Center" />
-        <Setter Property="VerticalContentAlignment" Value="Center" />
+    <ControlTheme x:Key="ThemeToggleSwitch"
+                  BasedOn="{StaticResource ButtonToggleSwitch}"
+                  TargetType="ToggleSwitch">
        <Setter Property="Padding" Value="8" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
-        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="OnContent" Value="{Binding $self.Content}" />
        <Setter Property="OnContentTemplate">
            <DataTemplate>
                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
            </DataTemplate>
        </Setter>
+        <Setter Property="OffContent" Value="{Binding $self.Content}" />
        <Setter Property="OffContentTemplate">
            <DataTemplate>
                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
            </DataTemplate>
        </Setter>
-        <Setter Property="Template">
-            <ControlTemplate TargetType="ToggleSwitch">
-                <Border
-                    Name="Background"
-                    Padding="{TemplateBinding Padding}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <Panel>
-                        <Panel Name="PART_SwitchKnob" />
-                        <Panel Name="PART_MovingKnobs" />
-                        <ContentPresenter
-                            Name="PART_OnContentPresenter"
-                            IsVisible="{TemplateBinding IsChecked}"
-                            Content="{TemplateBinding OnContent}"
-                            ContentTemplate="{TemplateBinding OnContentTemplate}" />
-                        <ContentPresenter
-                            Name="PART_OffContentPresenter"
-                            IsVisible="{TemplateBinding IsChecked, Converter={x:Static BoolConverters.Not}}"
-                            Content="{TemplateBinding OffContent}"
-                            ContentTemplate="{TemplateBinding OffContentTemplate}" />
-                    </Panel>
-                </Border>
-            </ControlTemplate>
+        <Setter Property="ContentTemplate">
+            <DataTemplate>
+                <PathIcon Theme="{StaticResource InnerPathIcon}" Data="{Binding}" />
+            </DataTemplate>
        </Setter>
-
-        <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
-        </Style>
-        <Style Selector="^:pressed">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
-        </Style>
    </ControlTheme>

    <ControlTheme x:Key="SplitViewToggleSwitch"
                  BasedOn="{StaticResource ThemeToggleSwitch}"
                  TargetType="ToggleSwitch">
-        <Setter Property="Width" Value="32" />
-        <Setter Property="Height" Value="32" />
-        <Setter Property="OnContent"
+        <Setter Property="Content"
                Value="M5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM6 4C5.44772 4 5 4.44772 5 5V19C5 19.5523 5.44772 20 6 20H9C9.55229 20 10 19.5523 10 19V5C10 4.44772 9.55229 4 9 4H6Z" />
-        <Setter Property="OffContent" Value="{Binding $self.OnContent}" />
    </ControlTheme>
 </ResourceDictionary>
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@ -52,14 +52,11 @@
                    <StackPanel.Styles>
                        <Style Selector="Button">
                            <Setter Property="Theme" Value="{DynamicResource BorderlessButton}" />
-                            <Setter Property="Width" Value="32" />
-                            <Setter Property="Height" Value="32" />
+                            <Setter Property="Padding" Value="8" />
                            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
                        </Style>
                        <Style Selector="ToggleSwitch">
                            <Setter Property="Theme" Value="{DynamicResource ThemeToggleSwitch}" />
-                            <Setter Property="Width" Value="32" />
-                            <Setter Property="Height" Value="32" />
                            <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultTertiaryForeground}" />
                        </Style>
                        <Style Selector="PathIcon">
--- a/src/Semi.Avalonia/Controls/AutoCompleteBox.axaml
+++ b/src/Semi.Avalonia/Controls/AutoCompleteBox.axaml
@ -27,28 +27,25 @@
                            Watermark="{TemplateBinding Watermark}" />
                        <Popup
                            Name="PART_Popup"
-                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
                            IsLightDismissEnabled="True"
                            PlacementTarget="{TemplateBinding}">
                            <Border
+                                MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                                Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
+                                Padding="{DynamicResource AutoCompleteBoxPopupPadding}"
                                HorizontalAlignment="Stretch"
                                Background="{DynamicResource AutoCompleteBoxPopupBackground}"
                                BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
                                BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                <Border
-                                    CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"
-                                    ClipToBounds="True">
-                                    <ListBox
-                                        Name="PART_SelectingItemsControl"
-                                        Foreground="{TemplateBinding Foreground}"
-                                        ItemTemplate="{TemplateBinding ItemTemplate}"
-                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
-                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
-                                </Border>
+                                <ListBox
+                                    Name="PART_SelectingItemsControl"
+                                    Foreground="{TemplateBinding Foreground}"
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    ScrollViewer.HorizontalScrollBarVisibility="Auto"
+                                    ScrollViewer.VerticalScrollBarVisibility="Auto" />
                            </Border>
                        </Popup>
                    </Panel>
@ -69,28 +66,25 @@
                            Watermark="{TemplateBinding Watermark}" />
                        <Popup
                            Name="PART_Popup"
-                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
                            IsLightDismissEnabled="True"
                            PlacementTarget="{TemplateBinding}">
                            <Border
+                                MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                                Margin="{DynamicResource AutoCompleteBoxPopupMargin}"
+                                Padding="{DynamicResource AutoCompleteBoxPopupPadding}"
                                HorizontalAlignment="Stretch"
                                Background="{DynamicResource AutoCompleteBoxPopupBackground}"
                                BorderBrush="{DynamicResource AutoCompleteBoxPopupBorderBrush}"
                                BorderThickness="{DynamicResource AutoCompleteBoxPopupBorderThickness}"
                                BoxShadow="{DynamicResource AutoCompleteBoxPopupBoxShadow}"
                                CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}">
-                                <Border
-                                    CornerRadius="{DynamicResource AutoCompleteBoxPopupCornerRadius}"
-                                    ClipToBounds="True">
                                    <ListBox
                                        Name="PART_SelectingItemsControl"
                                        Foreground="{TemplateBinding Foreground}"
                                        ItemTemplate="{TemplateBinding ItemTemplate}"
                                        ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                        ScrollViewer.VerticalScrollBarVisibility="Auto" />
-                                </Border>
                            </Border>
                        </Popup>
                    </Panel>
--- a/src/Semi.Avalonia/Controls/Calendar.axaml
+++ b/src/Semi.Avalonia/Controls/Calendar.axaml
@ -95,7 +95,8 @@
                            Name="PART_MonthView"
                            Grid.Row="1"
                            HorizontalAlignment="Stretch"
-                            IsVisible="False">
+                            IsVisible="False"
+                            ColumnDefinitions="*,*,*,*,*,*,*">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="{DynamicResource CalendarItemWeekDayNameHeight}" />
                                <RowDefinition Height="*" />
@ -105,33 +106,14 @@
                                <RowDefinition Height="*" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                            </Grid.ColumnDefinitions>
                        </Grid>
                        <Grid
                            Name="PART_YearView"
                            Grid.Row="1"
                            Background="{TemplateBinding Background}"
-                            IsVisible="False">
-                            <Grid.RowDefinitions>
-                                <RowDefinition Height="*" />
-                                <RowDefinition Height="*" />
-                                <RowDefinition Height="*" />
-                            </Grid.RowDefinitions>
-                            <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                                <ColumnDefinition Width="*" />
-                            </Grid.ColumnDefinitions>
-                        </Grid>
+                            IsVisible="False"
+                            ColumnDefinitions="*,*,*,*"
+                            RowDefinitions="*,*,*" />
                    </Grid>
                </Border>
            </ControlTemplate>
@ -151,6 +133,7 @@
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalAlignment" Value="Stretch" />
+        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <ControlTemplate TargetType="CalendarButton">
                <ContentControl
@ -211,6 +194,7 @@
        <Setter Property="VerticalAlignment" Value="Stretch" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <ControlTemplate TargetType="CalendarDayButton">
                <ContentControl
--- a/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
+++ b/src/Semi.Avalonia/Controls/CalendarDatePicker.axaml
@ -3,8 +3,8 @@
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:CompileBindings="True">
    <Design.PreviewWith>
-        <StackPanel Margin="20" Width="300" Height="400">
-            <CalendarDatePicker Classes="ClearButton" />
+        <StackPanel Margin="20" Width="800" Height="400">
+            <CalendarDatePicker HorizontalAlignment="Center" Classes="ClearButton" />
        </StackPanel>
    </Design.PreviewWith>
    <ControlTheme x:Key="{x:Type CalendarDatePicker}" TargetType="CalendarDatePicker">
@ -96,25 +96,22 @@
                            <Popup
                                Name="PART_Popup"
                                Grid.Column="0"
-                                HorizontalOffset="-8"
                                IsLightDismissEnabled="True"
-                                PlacementTarget="{TemplateBinding}"
-                                VerticalOffset="-4">
+                                Placement="BottomEdgeAlignedLeft"
+                                PlacementTarget="{TemplateBinding}">
                                <Border
-                                    Margin="8"
-                                    Background="Transparent"
+                                    Margin="4"
                                    BoxShadow="{DynamicResource CalendarDatePickerPopupBoxShadows}"
                                    CornerRadius="{DynamicResource CalendarCornerRadius}">
                                    <Calendar
                                        Name="PART_Calendar"
-                                        CornerRadius="{Binding $parent[Border].CornerRadius}"
+                                        BorderThickness="0"
                                        DisplayDate="{TemplateBinding DisplayDate}"
                                        DisplayDateEnd="{TemplateBinding DisplayDateEnd}"
                                        DisplayDateStart="{TemplateBinding DisplayDateStart}"
                                        FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}"
                                        IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}"
-                                        SelectedDate="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=SelectedDate, Mode=TwoWay}">
-                                    </Calendar>
+                                        SelectedDate="{TemplateBinding SelectedDate, Mode=TwoWay}" />
                                </Border>
                            </Popup>
                        </Grid>
--- a/src/Semi.Avalonia/Controls/ComboBox.axaml
+++ b/src/Semi.Avalonia/Controls/ComboBox.axaml
@ -76,7 +76,7 @@
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding SelectionBoxItem}"
-                            ContentTemplate="{TemplateBinding ItemTemplate}" />
+                            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" />
                        <Button
                            Name="ClearButton"
                            Grid.Column="1"
@ -100,9 +100,7 @@
                        <Popup
                            Name="PART_Popup"
                            Grid.Column="0"
-                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                            MaxHeight="{TemplateBinding MaxDropDownHeight}"
-                            ClipToBounds="False"
                            InheritsTransform="True"
                            IsLightDismissEnabled="True"
                            IsOpen="{TemplateBinding IsDropDownOpen, Mode=TwoWay}"
@ -111,24 +109,22 @@
                            <Border
                                Name="PopupBorder"
                                HorizontalAlignment="Stretch"
+                                MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
                                Margin="{DynamicResource ComboBoxPopupBorderMargin}"
+                                Padding="{DynamicResource ComboBoxPopupBorderPadding}"
                                Background="{DynamicResource ComboBoxPopupBackground}"
                                BorderBrush="{DynamicResource ComboBoxPopupBorderBrush}"
                                BorderThickness="{DynamicResource ComboBoxPopupBorderThickness}"
                                BoxShadow="{DynamicResource ComboBoxPopupBoxShadow}"
                                CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}">
-                                <Border
-                                    CornerRadius="{DynamicResource ComboBoxPopupBoxCornerRadius}"
-                                    ClipToBounds="True">
-                                    <ScrollViewer
-                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
-                                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
-                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
-                                        <ItemsPresenter
-                                            Name="PART_ItemsPresenter"
-                                            ItemsPanel="{TemplateBinding ItemsPanel}" />
-                                    </ScrollViewer>
-                                </Border>
+                                <ScrollViewer
+                                    HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                                    IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
+                                    VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                                    <ItemsPresenter
+                                        Name="PART_ItemsPresenter"
+                                        ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                </ScrollViewer>
                            </Border>
                        </Popup>
                    </Grid>
--- a/src/Semi.Avalonia/Controls/Menu.axaml
+++ b/src/Semi.Avalonia/Controls/Menu.axaml
@ -10,81 +10,77 @@
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <ControlTemplate TargetType="ScrollViewer">
-                <Border 
-                    ClipToBounds="True"
-                    CornerRadius="{TemplateBinding CornerRadius}">
-                    <DockPanel>
-                        <DockPanel.Styles>
-                            <Style Selector="RepeatButton:pressed">
-                                <Setter Property="RenderTransform" Value="{x:Null}" />
-                            </Style>
-                        </DockPanel.Styles>
-                        <RepeatButton
-                            HorizontalAlignment="Stretch"
-                            HorizontalContentAlignment="Center"
-                            Background="Transparent"
-                            BorderThickness="0"
-                            Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
-                            CornerRadius="0"
-                            DockPanel.Dock="Top"
-                            RenderTransform="{x:Null}">
-                            <RepeatButton.IsVisible>
-                                <MultiBinding
-                                    Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
-                                    ConverterParameter="0">
-                                    <Binding Path="VerticalScrollBarVisibility"
-                                             RelativeSource="{RelativeSource TemplatedParent}" />
-                                    <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                    <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                    <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                </MultiBinding>
-                            </RepeatButton.IsVisible>
-                            <PathIcon
-                                Theme="{DynamicResource InnerPathIcon}"
-                                Data="{DynamicResource MenuScrollViewerUpButtonGlyph}"
-                                Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
-                        </RepeatButton>
-                        <RepeatButton
-                            HorizontalAlignment="Stretch"
-                            HorizontalContentAlignment="Center"
-                            Background="Transparent"
-                            BorderThickness="0"
-                            Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
-                            CornerRadius="0"
-                            DockPanel.Dock="Bottom"
-                            RenderTransform="{x:Null}">
-                            <RepeatButton.IsVisible>
-                                <MultiBinding
-                                    Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
-                                    ConverterParameter="100">
-                                    <Binding Path="VerticalScrollBarVisibility"
-                                             RelativeSource="{RelativeSource TemplatedParent}" />
-                                    <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
-                                    <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                    <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
-                                </MultiBinding>
-                            </RepeatButton.IsVisible>
-                            <PathIcon
-                                Theme="{DynamicResource InnerPathIcon}"
-                                Data="{DynamicResource MenuScrollViewerDownButtonGlyph}"
-                                Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
-                        </RepeatButton>
-                        <ScrollContentPresenter
-                            Name="PART_ContentPresenter"
-                            Margin="{TemplateBinding Padding}"
-                            HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
-                            HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
-                            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}}" />
-                            </ScrollContentPresenter.GestureRecognizers>
-                        </ScrollContentPresenter>
-                    </DockPanel>
-                </Border>
+                <DockPanel>
+                    <DockPanel.Styles>
+                        <Style Selector="RepeatButton:pressed">
+                            <Setter Property="RenderTransform" Value="{x:Null}" />
+                        </Style>
+                    </DockPanel.Styles>
+                    <RepeatButton
+                        HorizontalAlignment="Stretch"
+                        HorizontalContentAlignment="Center"
+                        Background="Transparent"
+                        BorderThickness="0"
+                        Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
+                        CornerRadius="0"
+                        DockPanel.Dock="Top"
+                        RenderTransform="{x:Null}">
+                        <RepeatButton.IsVisible>
+                            <MultiBinding
+                                Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                                ConverterParameter="0">
+                                <Binding Path="VerticalScrollBarVisibility"
+                                         RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                            </MultiBinding>
+                        </RepeatButton.IsVisible>
+                        <PathIcon
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Data="{DynamicResource MenuScrollViewerUpButtonGlyph}"
+                            Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
+                    </RepeatButton>
+                    <RepeatButton
+                        HorizontalAlignment="Stretch"
+                        HorizontalContentAlignment="Center"
+                        Background="Transparent"
+                        BorderThickness="0"
+                        Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
+                        CornerRadius="0"
+                        DockPanel.Dock="Bottom"
+                        RenderTransform="{x:Null}">
+                        <RepeatButton.IsVisible>
+                            <MultiBinding
+                                Converter="{x:Static converters:MenuScrollingVisibilityConverter.Instance}"
+                                ConverterParameter="100">
+                                <Binding Path="VerticalScrollBarVisibility"
+                                         RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="Offset.Y" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="Extent.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                                <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
+                            </MultiBinding>
+                        </RepeatButton.IsVisible>
+                        <PathIcon
+                            Theme="{DynamicResource InnerPathIcon}"
+                            Data="{DynamicResource MenuScrollViewerDownButtonGlyph}"
+                            Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
+                    </RepeatButton>
+                    <ScrollContentPresenter
+                        Name="PART_ContentPresenter"
+                        Margin="{TemplateBinding Padding}"
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
+                        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}}" />
+                        </ScrollContentPresenter.GestureRecognizers>
+                    </ScrollContentPresenter>
+                </DockPanel>
            </ControlTemplate>
        </Setter>
    </ControlTheme>
@ -113,7 +109,6 @@
    <ControlTheme x:Key="{x:Type MenuItem}" TargetType="MenuItem">
        <Setter Property="Background" Value="{DynamicResource MenuItemBackground}" />
        <Setter Property="Foreground" Value="{DynamicResource MenuItemForeground}" />
-        <Setter Property="CornerRadius" Value="{DynamicResource MenuItemCornerRadius}" />
        <Setter Property="Cursor" Value="Hand" />
        <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
        <Setter Property="Padding" Value="{DynamicResource MenuItemPadding}" />
--- a/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Controls/ToggleSwitch.axaml
@ -3,22 +3,45 @@
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:CompileBindings="True">
    <Design.PreviewWith>
-        <StackPanel Margin="20">
-            <ToggleSwitch
-                Content="Content"
-                OffContent="OffContent"
-                OnContent="OnContent" />
-        </StackPanel>
+        <ThemeVariantScope RequestedThemeVariant="Dark">
+            <StackPanel Spacing="8" Background="{DynamicResource SemiBackground0Color}">
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch Classes="Small" />
+                    <ToggleSwitch Classes="Small" IsChecked="True" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch />
+                    <ToggleSwitch IsChecked="True" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch Classes="Large" />
+                    <ToggleSwitch Classes="Large" IsChecked="True" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Small" />
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Small" IsChecked="True" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" />
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" IsChecked="True" />
+                </StackPanel>
+                <StackPanel Orientation="Horizontal">
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Large" />
+                    <ToggleSwitch Theme="{DynamicResource SimpleToggleSwitch}" OnContent="是" OffContent="否" Classes="Large" IsChecked="True" />
+                </StackPanel>
+            </StackPanel>
+        </ThemeVariantScope>
    </Design.PreviewWith>
    <ControlTheme x:Key="{x:Type ToggleSwitch}" TargetType="ToggleSwitch">
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Left" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="FocusAdorner">
            <FocusAdornerTemplate>
                <Border Theme="{DynamicResource AdornerLayerBorder}"
-                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}"/>
+                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}" />
            </FocusAdornerTemplate>
        </Setter>
        <Setter Property="KnobTransitions">
@ -32,9 +55,7 @@
        <Setter Property="Template">
            <ControlTemplate TargetType="ToggleSwitch">
                <Grid
-                    Background="{TemplateBinding Background}"
-                    Cursor="Hand"
-                    RowDefinitions="Auto,*"
+                    RowDefinitions="Auto, *"
                    ColumnDefinitions="Auto, *">
                    <ContentPresenter
                        Name="PART_ContentPresenter"
@ -53,9 +74,10 @@
                        TemplatedControl.IsTemplateFocusTarget="True"
                        Width="{DynamicResource ToggleSwitchDefaultWidth}"
                        Height="{DynamicResource ToggleSwitchDefaultHeight}"
+                        BackgroundSizing="OuterBorderEdge"
                        BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
-                        BorderThickness="1"
-                        CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
+                        BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
+                        CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
                        <Border.Transitions>
                            <Transitions>
                                <BrushTransition Property="Background" Duration="0:0:0.2" />
@ -66,7 +88,7 @@
                            Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                            Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                            HorizontalAlignment="Left">
-                            <Grid
+                            <Panel
                                Name="PART_MovingKnobs"
                                Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                                Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
@ -79,7 +101,7 @@
                                <Arc
                                    Name="SwitchKnobLoadingIndicator"
                                    IsVisible="False"
-                                    StrokeThickness="2"
+                                    StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
                                    StartAngle="0"
                                    SweepAngle="140"
                                    StrokeJoin="Round"
@ -107,7 +129,7 @@
                                        </Style>
                                    </Arc.Styles>
                                </Arc>
-                            </Grid>
+                            </Panel>
                        </Canvas>
                    </Border>

@ -156,7 +178,6 @@
            <Style Selector="^:disabled /template/ Border#SwitchBackgroundBorder">
                <Setter Property="Background" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBackground}" />
                <Setter Property="BorderBrush" Value="{DynamicResource ToggleSwitchContainerUnCheckedDisabledBorderBrush}" />
-                <Setter Property="BorderThickness" Value="1" />
            </Style>
        </Style>

@ -200,15 +221,16 @@
            <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
                <Setter Property="Width" Value="{DynamicResource ToggleSwitchSmallWidth}" />
                <Setter Property="Height" Value="{DynamicResource ToggleSwitchSmallHeight}" />
+                <Setter Property="CornerRadius" Value="{DynamicResource ToggleSwitchSmallCornerRadius}" />
            </Style>
            <Style Selector="^ /template/ Canvas#PART_SwitchKnob">
                <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
                <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
            </Style>
-            <Style Selector="^ /template/ Grid#PART_MovingKnobs">
+            <Style Selector="^ /template/ Panel#PART_MovingKnobs">
                <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
                <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorSmallWidth}" />
-                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorSmallMargin}"/>
+                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorSmallMargin}" />
            </Style>
            <Style Selector="^ /template/ Arc#SwitchKnobLoadingIndicator">
                <Setter Property="StrokeThickness" Value="{DynamicResource ToggleSwitchLoadingIndicatorSmallStrokeThickness}" />
@ -218,15 +240,16 @@
            <Style Selector="^ /template/ Border#SwitchBackgroundBorder">
                <Setter Property="Width" Value="{DynamicResource ToggleSwitchLargeWidth}" />
                <Setter Property="Height" Value="{DynamicResource ToggleSwitchLargeHeight}" />
+                <Setter Property="CornerRadius" Value="{DynamicResource ToggleSwitchLargeCornerRadius}" />
            </Style>
            <Style Selector="^ /template/ Canvas#PART_SwitchKnob">
                <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
                <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
            </Style>
-            <Style Selector="^ /template/ Grid#PART_MovingKnobs">
+            <Style Selector="^ /template/ Panel#PART_MovingKnobs">
                <Setter Property="Width" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
                <Setter Property="Height" Value="{DynamicResource ToggleSwitchIndicatorLargeWidth}" />
-                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorLargeMargin}"/>
+                <Setter Property="Margin" Value="{DynamicResource ToggleSwitchIndicatorLargeMargin}" />
            </Style>
            <Style Selector="^ /template/ Arc#SwitchKnobLoadingIndicator">
                <Setter Property="StrokeThickness" Value="{DynamicResource ToggleSwitchLoadingIndicatorLargeStrokeThickness}" />
@ -234,69 +257,25 @@
        </Style>
    </ControlTheme>

-    <ControlTheme
-        x:Key="ButtonToggleSwitch"
-        BasedOn="{StaticResource {x:Type ToggleSwitch}}"
-        TargetType="ToggleSwitch">
-        <Setter Property="Padding" Value="8" />
-        <Setter Property="CornerRadius" Value="3" />
-        <Setter Property="Background" Value="Transparent" />
-        <Setter Property="FocusAdorner">
-            <FocusAdornerTemplate>
-                <Border Theme="{StaticResource AdornerLayerBorder}" />
-            </FocusAdornerTemplate>
-        </Setter>
-        <Setter Property="Template">
-            <ControlTemplate TargetType="ToggleSwitch">
-                <Border
-                    Name="Background"
-                    Padding="{TemplateBinding Padding}"
-                    Background="{TemplateBinding Background}"
-                    CornerRadius="{TemplateBinding CornerRadius}"
-                    Cursor="Hand">
-                    <Panel>
-                        <Panel Name="PART_SwitchKnob" />
-                        <Panel Name="PART_MovingKnobs" />
-                        <ContentPresenter
-                            Name="PART_OnContentPresenter"
-                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
-                            Content="{TemplateBinding OnContent}"
-                            ContentTemplate="{TemplateBinding OnContentTemplate}" />
-                        <ContentPresenter
-                            Name="PART_OffContentPresenter"
-                            Margin="{DynamicResource ToggleSwitchOnContentMargin}"
-                            Content="{TemplateBinding OffContent}"
-                            ContentTemplate="{TemplateBinding OffContentTemplate}" />
-                    </Panel>
-                </Border>
-            </ControlTemplate>
-        </Setter>
-        <Style Selector="^:pointerover">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
-        </Style>
-        <Style Selector="^:pressed">
-            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
-        </Style>
-    </ControlTheme>
-
    <ControlTheme
        x:Key="SimpleToggleSwitch"
        BasedOn="{StaticResource {x:Type ToggleSwitch}}"
        TargetType="ToggleSwitch">
        <Setter Property="OnContent" Value="{x:Null}" />
        <Setter Property="OffContent" Value="{x:Null}" />
+        <Setter Property="Content" Value="{x:Null}" />
        <Setter Property="FontSize" Value="{DynamicResource SimpleToggleSwitchFontSize}" />
        <Setter Property="Template">
            <ControlTemplate TargetType="ToggleSwitch">
                <Border
                    Name="SwitchBackgroundBorder"
                    Background="{TemplateBinding Background}"
-                    Cursor="Hand"
                    Width="{DynamicResource ToggleSwitchDefaultWidth}"
                    Height="{DynamicResource ToggleSwitchDefaultHeight}"
+                    BackgroundSizing="OuterBorderEdge"
                    BorderBrush="{DynamicResource ToggleSwitchDefaultBorderBrush}"
-                    BorderThickness="1"
-                    CornerRadius="{DynamicResource ToggleSwitchIndicatorCornerRadius}">
+                    BorderThickness="{DynamicResource ToggleSwitchDefaultBorderThickness}"
+                    CornerRadius="{DynamicResource ToggleSwitchDefaultCornerRadius}">
                    <Border.Transitions>
                        <Transitions>
                            <BrushTransition Property="Background" Duration="0:0:0.2" />
@ -311,7 +290,7 @@
                            Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                            Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                            HorizontalAlignment="Left">
-                            <Grid
+                            <Panel
                                Name="PART_MovingKnobs"
                                Width="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
                                Height="{DynamicResource ToggleSwitchIndicatorDefaultWidth}"
@ -324,7 +303,7 @@
                                <Arc
                                    Name="SwitchKnobLoadingIndicator"
                                    IsVisible="False"
-                                    StrokeThickness="2"
+                                    StrokeThickness="{DynamicResource ToggleSwitchLoadingIndicatorDefaultStrokeThickness}"
                                    StartAngle="0"
                                    SweepAngle="140"
                                    StrokeJoin="Round"
@ -352,7 +331,7 @@
                                        </Style>
                                    </Arc.Styles>
                                </Arc>
-                            </Grid>
+                            </Panel>
                        </Canvas>
                        <ContentPresenter
                            Name="PART_OnContentPresenter"
@ -391,4 +370,105 @@
            </Style>
        </Style>
    </ControlTheme>
+
+    <ControlTheme x:Key="ButtonToggleSwitch" TargetType="ToggleSwitch">
+        <Setter Property="HorizontalAlignment" Value="Center" />
+        <Setter Property="VerticalAlignment" Value="Center" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+        <Setter Property="VerticalContentAlignment" Value="Center" />
+        <Setter Property="Padding" Value="{DynamicResource ButtonDefaultPadding}" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
+        <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource ButtonBorderThickness}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource ButtonCornerRadius}" />
+        <Setter Property="Cursor" Value="Hand" />
+        <Setter Property="OnContent" Value="{x:Null}" />
+        <Setter Property="OffContent" Value="{x:Null}" />
+        <Setter Property="Content" Value="{x:Null}" />
+        <Setter Property="MinHeight" Value="{DynamicResource ButtonDefaultHeight}" />
+        <Setter Property="FontSize" Value="{DynamicResource ButtonDefaultFontSize}" />
+        <Setter Property="FontWeight" Value="{DynamicResource ButtonDefaultFontWeight}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ToggleSwitch">
+                <Border
+                    Name="Background"
+                    Padding="{TemplateBinding Padding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Panel>
+                        <Panel Name="PART_SwitchKnob" />
+                        <Panel Name="PART_MovingKnobs" />
+                        <ContentPresenter
+                            Name="PART_OnContentPresenter"
+                            IsVisible="{TemplateBinding IsChecked}"
+                            Content="{TemplateBinding OnContent}"
+                            ContentTemplate="{TemplateBinding OnContentTemplate}" />
+                        <ContentPresenter
+                            Name="PART_OffContentPresenter"
+                            IsVisible="{TemplateBinding IsChecked, Converter={x:Static BoolConverters.Not}}"
+                            Content="{TemplateBinding OffContent}"
+                            ContentTemplate="{TemplateBinding OffContentTemplate}" />
+                        <ContentPresenter
+                            Name="PART_ContentPresenter"
+                            Content="{TemplateBinding Content}"
+                            ContentTemplate="{TemplateBinding ContentTemplate}">
+                            <ContentPresenter.IsVisible>
+                                <MultiBinding Converter="{x:Static BoolConverters.And}">
+                                    <TemplateBinding Property="Content" Converter="{x:Static ObjectConverters.IsNotNull}" />
+                                    <TemplateBinding Property="OnContent" Converter="{x:Static ObjectConverters.IsNull}" />
+                                    <TemplateBinding Property="OffContent" Converter="{x:Static ObjectConverters.IsNull}" />
+                                </MultiBinding>
+                            </ContentPresenter.IsVisible>
+                        </ContentPresenter>
+                    </Panel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:pressed">
+            <Setter Property="RenderTransform" Value="scale(0.98)" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{TemplateBinding BorderBrush}" />
+            <Setter Property="Background" Value="{TemplateBinding Background}" />
+        </Style>
+
+        <Style Selector="^:pointerover /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPointeroverBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPointeroverBackground}" />
+        </Style>
+
+        <Style Selector="^:pressed /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultPressedBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonDefaultPressedBackground}" />
+        </Style>
+
+        <Style Selector="^:disabled /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonDefaultDisabledBorderBrush}" />
+            <!-- <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> -->
+        </Style>
+
+        <Style Selector="^.Large">
+            <Setter Property="MinHeight" Value="{DynamicResource ButtonLargeHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource ButtonLargePadding}" />
+        </Style>
+        <Style Selector="^.Small">
+            <Setter Property="MinHeight" Value="{DynamicResource ButtonSmallHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource ButtonSmallPadding}" />
+        </Style>
+
+        <Style Selector="^ /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+        </Style>
+        <Style Selector="^:disabled /template/ Border#Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderlessBorderBrush}" />
+            <Setter Property="Background" Value="{DynamicResource ButtonBorderlessBackground}" />
+            <!-- <Setter Property="Foreground" Value="{DynamicResource ButtonDefaultDisabledForeground}" /> -->
+        </Style>
+    </ControlTheme>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/AutoCompleteBox.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/AutoCompleteBox.axaml
@ -1,6 +1,7 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Thickness x:Key="AutoCompleteBoxPopupBorderThickness">1</Thickness>
    <Thickness x:Key="AutoCompleteBoxPopupMargin">4</Thickness>
+    <Thickness x:Key="AutoCompleteBoxPopupPadding">0 4</Thickness>
    <CornerRadius x:Key="AutoCompleteBoxPopupCornerRadius">6</CornerRadius>
    <x:Double x:Key="AutoCompleteBoxDefaultHeight">32</x:Double>
    <x:Double x:Key="AutoCompleteBoxSmallHeight">24</x:Double>
--- a/src/Semi.Avalonia/Themes/Shared/ComboBox.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ComboBox.axaml
@ -14,6 +14,7 @@
        M4.08045 7.59809C4.66624 7.01231 5.61599 7.01231 6.20177 7.59809L11.8586 13.2549L17.5155 7.59809C18.1013 7.01231 19.051 7.01231 19.6368 7.59809C20.2226 8.18388 20.2226 9.13363 19.6368 9.71941L12.9193 16.4369C12.3335 17.0227 11.3838 17.0227 10.798 16.4369L4.08045 9.71941C3.49467 9.13363 3.49467 8.18388 4.08045 7.59809Z
    </StreamGeometry>
    <Thickness x:Key="ComboBoxPopupBorderMargin">4</Thickness>
+    <Thickness x:Key="ComboBoxPopupBorderPadding">0 4</Thickness>

    <x:Double x:Key="ComboBoxDefaultHeight">32</x:Double>
    <x:Double x:Key="ComboBoxSmallHeight">24</x:Double>
--- a/src/Semi.Avalonia/Themes/Shared/ListBox.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ListBox.axaml
@ -1,6 +1,6 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- ListBox -->
    <Thickness x:Key="ListBoxItemDefaultPadding">12 8</Thickness>
-    <CornerRadius x:Key="ListBoxItemCornerRadius">3</CornerRadius>
+    <CornerRadius x:Key="ListBoxItemCornerRadius">0</CornerRadius>

 </ResourceDictionary>
--- a/src/Semi.Avalonia/Themes/Shared/Menu.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Menu.axaml
@ -6,7 +6,7 @@

    <!--  MenuFlyout  -->
    <Thickness x:Key="MenuFlyoutBorderThickness">1</Thickness>
-    <Thickness x:Key="MenuFlyoutPadding">0</Thickness>
+    <Thickness x:Key="MenuFlyoutPadding">0 4</Thickness>
    <CornerRadius x:Key="MenuFlyoutCornerRadius">6</CornerRadius>
    <x:Double x:Key="MenuFlyoutMinHeight">16</x:Double>
    <x:Double x:Key="MenuFlyoutMinWidth">100</x:Double>
--- a/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/ToggleSwitch.axaml
@ -5,13 +5,18 @@
    <x:Double x:Key="ToggleSwitchDefaultWidth">40</x:Double>
    <x:Double x:Key="ToggleSwitchSmallWidth">26</x:Double>
    <x:Double x:Key="ToggleSwitchLargeWidth">54</x:Double>
+    <Thickness x:Key="ToggleSwitchDefaultBorderThickness">1</Thickness>
+    <CornerRadius x:Key="ToggleSwitchDefaultCornerRadius">12</CornerRadius>
+    <CornerRadius x:Key="ToggleSwitchSmallCornerRadius">8</CornerRadius>
+    <CornerRadius x:Key="ToggleSwitchLargeCornerRadius">16</CornerRadius>
    <CornerRadius x:Key="ToggleSwitchIndicatorCornerRadius">100</CornerRadius>
    <x:Double x:Key="ToggleSwitchIndicatorDefaultWidth">18</x:Double>
    <x:Double x:Key="ToggleSwitchIndicatorSmallWidth">12</x:Double>
    <x:Double x:Key="ToggleSwitchIndicatorLargeWidth">24</x:Double>
-    <Thickness x:Key="ToggleSwitchIndicatorDefaultMargin">2 0 0 0</Thickness>
-    <Thickness x:Key="ToggleSwitchIndicatorSmallMargin">1 0 0 0</Thickness>
-    <Thickness x:Key="ToggleSwitchIndicatorLargeMargin">3 0 0 0</Thickness>
+    <Thickness x:Key="ToggleSwitchIndicatorDefaultMargin">1 0 0 0</Thickness>
+    <Thickness x:Key="ToggleSwitchIndicatorSmallMargin">0</Thickness>
+    <Thickness x:Key="ToggleSwitchIndicatorLargeMargin">2 0 0 0</Thickness>
+    <x:Double x:Key="ToggleSwitchLoadingIndicatorDefaultStrokeThickness">2</x:Double>
    <x:Double x:Key="ToggleSwitchLoadingIndicatorSmallStrokeThickness">1</x:Double>
    <x:Double x:Key="ToggleSwitchLoadingIndicatorLargeStrokeThickness">3</x:Double>
Author	SHA1	Message	Date
Dong Bin	002619a8b5	Merge pull request #487 from gehongyan/combobox-selectionbox feat: ComboBox should respect SelectionBoxItemTemplate	2024-12-08 16:20:07 +08:00
Ge	f3c4714372	feat: ComboBox respects SelectionBoxItemTemplate	2024-12-07 00:57:14 +08:00
Zhang Dian	9cabf55ebd	Merge pull request #486 from metaone01/bugfix-demo-splitview-paneplacement bugfix:Demo crashes when changing SplitView's PanePlacement	2024-12-05 16:44:46 +08:00
metaone	f318d33764	bugfix:Demo crashes when changing SplitView's PanePlacement	2024-12-04 11:46:52 +08:00
Dong Bin	e4445da37b	Merge pull request #482 from irihitech/popup Enhance Popup Layout and Alignment	2024-12-02 17:54:01 +08:00
rabbitism	42aa2c7f17	fix calendar border.	2024-12-02 17:52:12 +08:00
Zhang Dian	a909b6da6e	feat: remove Calendar BorderThickness.	2024-12-02 17:36:49 +08:00
Dong Bin	a8cdf5688b	Merge pull request #481 from irihitech/switch Enhance ToggleSwitch	2024-12-02 12:02:32 +08:00
Zhang Dian	2ce8bcdc1b	feat: align with the part of TextBox.	2024-12-01 23:56:53 +08:00
Zhang Dian	50b5159d17	fix: fix popup Padding.	2024-12-01 23:50:21 +08:00
Zhang Dian	3c8854f9de	feat: redesign ButtonToggleSwitch.	2024-12-01 18:06:01 +08:00
Zhang Dian	147d4fd968	fix: fix Switch BorderThickness issue.	2024-11-30 00:28:50 +08:00
Zhang Dian	142abbf3da	misc: enhance Switch.	2024-11-29 23:51:19 +08:00
Zhang Dian	b4d5a3f932	misc: swap SimpleToggleSwitch & ButtonToggleSwitch.	2024-11-29 23:46:37 +08:00