Sync Avalonia 12.0.0-rc2 changes (#786)

* chore: AppBar -> CommanrBar. * feat: Add keyboard navigation for overflow CommandBar popup. * chore: Style -> Theme in PipsPager. * chore: add Header/Footer templates to DrawerPage. * feaa: hide caption buttons when the platform does not support the action. * feat: Touch Improvements to TextBox. * chore: remove Opacity from PART_Placeholder. * feat: enable access key recognition for GroupBox. * feat: limit label text to a single line in CommandBar.
2026-04-09 02:36:34 +08:00 · 2026-04-01 23:01:45 +08:00
parent c128feb4ff
commit c48d96e40f
13 changed files with 213 additions and 142 deletions
--- a/src/Semi.Avalonia/Controls/CommandBar.axaml
+++ b/src/Semi.Avalonia/Controls/CommandBar.axaml
@@ -28,24 +28,24 @@
                    DefaultLabelPosition="{Binding #lc.SelectedValue}"
                    IsDynamicOverflowEnabled="{Binding #idfe.IsChecked}"
                    Width="{Binding #ws.Value}">
-                    <AppBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
-                    <AppBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
-                    <AppBarSeparator />
-                    <AppBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
-                    <AppBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
-                    <AppBarToggleButton IsEnabled="False" IsChecked="True" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
-                    <AppBarSeparator />
-                    <AppBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
-                    <AppBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
-                    <AppBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
-                    <AppBarSeparator />
-                    <AppBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
+                    <CommandBarButton Label="New" Icon="{DynamicResource SemiIconPlus}" />
+                    <CommandBarButton Label="Save" Icon="{DynamicResource SemiIconSave}" />
+                    <CommandBarSeparator />
+                    <CommandBarToggleButton Label="Bold" Icon="{DynamicResource SemiIconBold}" />
+                    <CommandBarToggleButton Label="Italic" Icon="{DynamicResource SemiIconItalic}" />
+                    <CommandBarToggleButton IsEnabled="False" IsChecked="True" Label="Underline" Icon="{DynamicResource SemiIconUnderline}" />
+                    <CommandBarSeparator />
+                    <CommandBarButton Label="Share" Icon="{DynamicResource SemiIconShare}" />
+                    <CommandBarButton Label="Export" Icon="{DynamicResource SemiIconExport}" />
+                    <CommandBarButton Label="Print" Icon="{DynamicResource SemiIconPrint}" />
+                    <CommandBarSeparator />
+                    <CommandBarButton Label="Delete" Icon="{DynamicResource SemiIconDelete}" />
                </CommandBar>
            </StackPanel>
        </GroupBox>
    </Design.PreviewWith>

-    <ControlTheme x:Key="AppBarButtonBaseTheme" TargetType="Button">
+    <ControlTheme x:Key="CommandBarButtonBaseTheme" TargetType="Button">
        <Setter Property="Template">
            <ControlTemplate TargetType="Button">
                <Border
@@ -57,7 +57,7 @@
                    Padding="{TemplateBinding Padding}">
                    <StackPanel
                        Name="PART_LayoutRoot"
-                        Spacing="{DynamicResource AppBarButtonPanelSpacing}"
+                        Spacing="{DynamicResource CommandBarButtonPanelSpacing}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                        <ContentPresenter
@@ -73,50 +73,51 @@
                        </ContentPresenter>
                        <TextBlock
                            Name="PART_Label"
+                            MaxLines="1"
                            Foreground="{TemplateBinding Foreground}"
-                            FontSize="{DynamicResource AppBarButtonLabelFontSize}"
+                            FontSize="{DynamicResource CommandBarButtonLabelFontSize}"
                            TextTrimming="CharacterEllipsis" />
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter>

-        <Setter Property="Background" Value="{DynamicResource AppBarButtonBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource AppBarButtonForeground}" />
+        <Setter Property="Background" Value="{DynamicResource CommandBarButtonBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource CommandBarButtonForeground}" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="BorderThickness" Value="0" />
-        <Setter Property="Padding" Value="{DynamicResource AppBarButtonPadding}" />
-        <Setter Property="Width" Value="{DynamicResource AppBarButtonWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonMinHeight}" />
+        <Setter Property="Padding" Value="{DynamicResource CommandBarButtonPadding}" />
+        <Setter Property="Width" Value="{DynamicResource CommandBarButtonWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource CommandBarButtonMinHeight}" />

-        <Setter Property="CornerRadius" Value="{DynamicResource AppBarButtonCornerRadius}" />
+        <Setter Property="CornerRadius" Value="{DynamicResource CommandBarButtonCornerRadius}" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Cursor" Value="Hand" />

        <Style Selector="^:pointerover /template/ Border#PART_Border">
-            <Setter Property="Background" Value="{DynamicResource AppBarButtonPointeroverBackground}" />
+            <Setter Property="Background" Value="{DynamicResource CommandBarButtonPointeroverBackground}" />
        </Style>

        <Style Selector="^:pressed /template/ Border#PART_Border">
-            <Setter Property="Background" Value="{DynamicResource AppBarButtonPressedBackground}" />
+            <Setter Property="Background" Value="{DynamicResource CommandBarButtonPressedBackground}" />
        </Style>

        <Style Selector="^:disabled">
            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CommandBarButtonDisabledForeground}" />
            </Style>
            <Style Selector="^ /template/ TextBlock#PART_Label">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarButtonDisabledForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CommandBarButtonDisabledForeground}" />
            </Style>
        </Style>
    </ControlTheme>

-    <!--  AppBarButton  -->
+    <!--  CommandBarButton  -->
    <ControlTheme
-        x:Key="{x:Type AppBarButton}"
-        BasedOn="{StaticResource AppBarButtonBaseTheme}"
-        TargetType="AppBarButton">
+        x:Key="{x:Type CommandBarButton}"
+        BasedOn="{StaticResource CommandBarButtonBaseTheme}"
+        TargetType="CommandBarButton">

        <Style Selector="^ /template/ TextBlock#PART_Label">
            <Setter Property="Text" Value="{TemplateBinding Label}" />
@@ -127,7 +128,7 @@

        <!--  IsCompact: hide label, use compact width  -->
        <Style Selector="^[IsCompact=True]">
-            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ TextBlock#PART_Label">
                <Setter Property="IsVisible" Value="False" />
            </Style>
@@ -135,7 +136,7 @@

        <!--  LabelPosition=Collapsed: hide label, use compact width  -->
        <Style Selector="^[LabelPosition=Collapsed]">
-            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ TextBlock#PART_Label">
                <Setter Property="IsVisible" Value="False" />
            </Style>
@@ -144,7 +145,7 @@
        <!--  LabelPosition=Right: horizontal layout, auto-width  -->
        <Style Selector="^[LabelPosition=Right]">
            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="MinWidth" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
                <Setter Property="Orientation" Value="Horizontal" />
            </Style>
@@ -160,8 +161,8 @@
        <Style Selector="^[IsInOverflow=True]">
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" />
-            <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
+            <Setter Property="MinHeight" Value="{DynamicResource CommandBarButtonOverflowMinHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource CommandBarButtonOverflowPadding}" />
            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
                <Setter Property="Orientation" Value="Horizontal" />
            </Style>
@@ -174,11 +175,11 @@
        </Style>
    </ControlTheme>

-    <!--  AppBarToggleButton  -->
+    <!--  CommandBarToggleButton  -->
    <ControlTheme
-        x:Key="{x:Type AppBarToggleButton}"
-        BasedOn="{StaticResource AppBarButtonBaseTheme}"
-        TargetType="AppBarToggleButton">
+        x:Key="{x:Type CommandBarToggleButton}"
+        BasedOn="{StaticResource CommandBarButtonBaseTheme}"
+        TargetType="CommandBarToggleButton">

        <Style Selector="^ /template/ TextBlock#PART_Label">
            <Setter Property="Text" Value="{TemplateBinding Label}" />
@@ -189,25 +190,25 @@

        <Style Selector="^:checked">
            <Style Selector="^ /template/ Border#PART_Border">
-                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonCheckedBackground}" />
            </Style>
            <Style Selector="^ /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonCheckedForeground}" />
            </Style>
            <Style Selector="^:pointerover /template/ Border#PART_Border">
-                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPointeroverBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonCheckedPointeroverBackground}" />
            </Style>
            <Style Selector="^:pressed /template/ Border#PART_Border">
-                <Setter Property="Background" Value="{DynamicResource AppBarToggleButtonCheckedPressedBackground}" />
+                <Setter Property="Background" Value="{DynamicResource CommandBarToggleButtonCheckedPressedBackground}" />
            </Style>
            <Style Selector="^:disabled /template/ ContentPresenter#PART_IconPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource AppBarToggleButtonCheckedDisabledForeground}" />
+                <Setter Property="Foreground" Value="{DynamicResource CommandBarToggleButtonCheckedDisabledForeground}" />
            </Style>
        </Style>

        <!--  IsCompact: hide label, use compact width  -->
        <Style Selector="^[IsCompact=True]">
-            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ TextBlock#PART_Label">
                <Setter Property="IsVisible" Value="False" />
            </Style>
@@ -215,7 +216,7 @@

        <!--  LabelPosition=Collapsed: hide label, use compact width  -->
        <Style Selector="^[LabelPosition=Collapsed]">
-            <Setter Property="Width" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="Width" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ TextBlock#PART_Label">
                <Setter Property="IsVisible" Value="False" />
            </Style>
@@ -224,7 +225,7 @@
        <!--  LabelPosition=Right: horizontal layout, auto-width  -->
        <Style Selector="^[LabelPosition=Right]">
            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinWidth" Value="{DynamicResource AppBarButtonCompactWidth}" />
+            <Setter Property="MinWidth" Value="{DynamicResource CommandBarButtonCompactWidth}" />
            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
                <Setter Property="Orientation" Value="Horizontal" />
            </Style>
@@ -240,8 +241,8 @@
        <Style Selector="^[IsInOverflow=True]">
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="MinHeight" Value="{DynamicResource AppBarButtonOverflowMinHeight}" />
-            <Setter Property="Padding" Value="{DynamicResource AppBarButtonOverflowPadding}" />
+            <Setter Property="MinHeight" Value="{DynamicResource CommandBarButtonOverflowMinHeight}" />
+            <Setter Property="Padding" Value="{DynamicResource CommandBarButtonOverflowPadding}" />
            <Style Selector="^ /template/ StackPanel#PART_LayoutRoot">
                <Setter Property="Orientation" Value="Horizontal" />
            </Style>
@@ -254,14 +255,14 @@
        </Style>
    </ControlTheme>

-    <!--  AppBarSeparator  -->
-    <ControlTheme x:Key="{x:Type AppBarSeparator}" TargetType="AppBarSeparator">
-        <Setter Property="Background" Value="{DynamicResource AppBarSeparatorBackground}" />
-        <Setter Property="Width" Value="{DynamicResource AppBarSeparatorWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource AppBarSeparatorMinHeight}" />
-        <Setter Property="Margin" Value="{DynamicResource AppBarSeparatorMargin}" />
+    <!--  CommandBarSeparator  -->
+    <ControlTheme x:Key="{x:Type CommandBarSeparator}" TargetType="CommandBarSeparator">
+        <Setter Property="Background" Value="{DynamicResource CommandBarSeparatorBackground}" />
+        <Setter Property="Width" Value="{DynamicResource CommandBarSeparatorWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource CommandBarSeparatorMinHeight}" />
+        <Setter Property="Margin" Value="{DynamicResource CommandBarSeparatorMargin}" />
        <Setter Property="Template">
-            <ControlTemplate TargetType="AppBarSeparator">
+            <ControlTemplate TargetType="CommandBarSeparator">
                <Border
                    Background="{TemplateBinding Background}"
                    Width="{TemplateBinding Width}"
@@ -273,9 +274,9 @@
        <Style Selector="^[IsInOverflow=True]">
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="Width" Value="{x:Static x:Double.NaN}" />
-            <Setter Property="Height" Value="{DynamicResource AppBarSeparatorOverflowHeight}" />
+            <Setter Property="Height" Value="{DynamicResource CommandBarSeparatorOverflowHeight}" />
            <Setter Property="MinHeight" Value="0" />
-            <Setter Property="Margin" Value="{DynamicResource AppBarSeparatorOverflowMargin}" />
+            <Setter Property="Margin" Value="{DynamicResource CommandBarSeparatorOverflowMargin}" />
        </Style>
    </ControlTheme>

@@ -299,9 +300,9 @@
                    MinHeight="{TemplateBinding MinHeight}"
                    Padding="{TemplateBinding Padding}">
                    <Panel>
-                        <DockPanel>
+                        <DockPanel KeyboardNavigation.TabNavigation="Cycle">
                            <!--  Overflow button (docked right)  -->
-                            <AppBarButton
+                            <CommandBarButton
                                Name="PART_OverflowButton"
                                DockPanel.Dock="Right"
                                Icon="{DynamicResource CommandBarOverflowButtonGlyph}"
@@ -351,6 +352,7 @@
                                CornerRadius="{DynamicResource CommandBarOverflowCornerRadius}">

                                <ItemsControl
+                                    Name="PART_OverflowPresenter"
                                    ItemsSource="{Binding OverflowItems, RelativeSource={RelativeSource TemplatedParent}}">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
--- a/src/Semi.Avalonia/Controls/DrawerPage.axaml
+++ b/src/Semi.Avalonia/Controls/DrawerPage.axaml
@@ -71,14 +71,16 @@
                                        Name="PART_DrawerHeader"
                                        DockPanel.Dock="Top"
                                        Background="{TemplateBinding DrawerHeaderBackground}"
-                                        Content="{TemplateBinding DrawerHeader}" />
+                                        Content="{TemplateBinding DrawerHeader}"
+                                        ContentTemplate="{TemplateBinding DrawerHeaderTemplate}" />

                                    <!--  Drawer footer  -->
                                    <ContentPresenter
                                        Name="PART_DrawerFooter"
                                        DockPanel.Dock="Bottom"
                                        Background="{TemplateBinding DrawerFooterBackground}"
-                                        Content="{TemplateBinding DrawerFooter}" />
+                                        Content="{TemplateBinding DrawerFooter}"
+                                        ContentTemplate="{TemplateBinding DrawerFooterTemplate}" />

                                    <!--  Compact pane icon (compact mode)  -->
                                    <ContentPresenter
--- a/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
+++ b/src/Semi.Avalonia/Controls/HeaderedContentControl.axaml
@@ -116,5 +116,13 @@
                </Border>
            </ControlTemplate>
        </Setter>
+
+        <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
+
+        <Style Selector="^ /template/ ContentPresenter#PART_ContentPresenter">
+            <Setter Property="RecognizesAccessKey" Value="True" />
+        </Style>
    </ControlTheme>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
+++ b/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
@@ -54,4 +54,17 @@
            </ControlTemplate>
        </Setter>
    </ControlTheme>
+
+    <ControlTheme
+        x:Key="HorizontalMenuFlyoutPresenter"
+        TargetType="MenuFlyoutPresenter"
+        BasedOn="{StaticResource {x:Type MenuFlyoutPresenter}}">
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="MinWidth" Value="{DynamicResource HorizontalMenuFlyoutThemeMinWidth}" />
+        <Setter Property="ItemsPanel">
+            <ItemsPanelTemplate>
+                <StackPanel Orientation="Horizontal" />
+            </ItemsPanelTemplate>
+        </Setter>
+    </ControlTheme>
 </ResourceDictionary>
--- a/src/Semi.Avalonia/Controls/PipsPager.axaml
+++ b/src/Semi.Avalonia/Controls/PipsPager.axaml
@@ -54,8 +54,8 @@

    <ControlTheme x:Key="{x:Type PipsPager}" TargetType="PipsPager">
        <Setter Property="IsTabStop" Value="False" />
-        <Setter Property="PreviousButtonStyle" Value="{StaticResource PipsPagerButton}" />
-        <Setter Property="NextButtonStyle" Value="{StaticResource PipsPagerButton}" />
+        <Setter Property="PreviousButtonTheme" Value="{StaticResource PipsPagerButton}" />
+        <Setter Property="NextButtonTheme" Value="{StaticResource PipsPagerButton}" />
        <Setter Property="Template">
            <ControlTemplate>
                <StackPanel
@@ -65,7 +65,7 @@
                    ClipToBounds="False">
                    <Button
                        Name="PART_PreviousButton"
-                        Theme="{TemplateBinding PreviousButtonStyle}"
+                        Theme="{TemplateBinding PreviousButtonTheme}"
                        IsVisible="{TemplateBinding IsPreviousButtonVisible}"
                        Foreground="{DynamicResource PipsPagerButtonForeground}"
                        Content="{StaticResource SemiIconSmallTriangleLeft}" />
@@ -89,7 +89,7 @@

                    <Button
                        Name="PART_NextButton"
-                        Theme="{TemplateBinding NextButtonStyle}"
+                        Theme="{TemplateBinding NextButtonTheme}"
                        Foreground="{DynamicResource PipsPagerButtonForeground}"
                        Content="{StaticResource SemiIconSmallTriangleRight}"
                        IsVisible="{TemplateBinding IsNextButtonVisible}" />
--- a/src/Semi.Avalonia/Controls/TextBox.axaml
+++ b/src/Semi.Avalonia/Controls/TextBox.axaml
@@ -22,6 +22,27 @@
            IsEnabled="{Binding $parent[TextBox].CanPaste}" />
    </MenuFlyout>

+    <MenuFlyout
+        x:Key="HorizontalTextBoxContextFlyout"
+        ShowMode="{OnFormFactor Desktop=Standard, Mobile=Transient}"
+        FlyoutPresenterTheme="{StaticResource HorizontalMenuFlyoutPresenter}"
+        ItemContainerTheme="{StaticResource TopLevelMenuItem}">
+        <MenuItem
+            Command="{Binding $parent[TextBox].Cut}"
+            Header="{DynamicResource STRING_MENU_CUT}"
+            IsEnabled="{Binding $parent[TextBox].CanCut}"
+            IsVisible="{Binding $parent[TextBox].CanCut}" />
+        <MenuItem
+            Command="{Binding $parent[TextBox].Copy}"
+            Header="{DynamicResource STRING_MENU_COPY}"
+            IsEnabled="{Binding $parent[TextBox].CanCopy}"
+            IsVisible="{Binding $parent[TextBox].CanCopy}" />
+        <MenuItem
+            Command="{Binding $parent[TextBox].Paste}"
+            Header="{DynamicResource STRING_MENU_PASTE}"
+            IsEnabled="{Binding $parent[TextBox].CanPaste}" />
+    </MenuFlyout>
+
    <ControlTheme x:Key="{x:Type TextBox}" TargetType="TextBox">
        <Setter Property="Foreground" Value="{DynamicResource TextBoxForeground}" />
        <Setter Property="PlaceholderForeground" Value="{DynamicResource TextBoxPlaceholderForeground}" />
@@ -133,6 +154,10 @@
            </ControlTemplate>
        </Setter>

+        <Style Selector="^:touch-mode">
+            <Setter Property="ContextFlyout" Value="{StaticResource HorizontalTextBoxContextFlyout}" />
+        </Style>
+
        <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
            <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
            <Setter Property="BorderBrush" Value="{DynamicResource TextBoxPointeroverBorderBrush}" />
@@ -304,7 +329,6 @@
                                        Name="PART_Placeholder"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                        Opacity="0.5"
                                        Foreground="{TemplateBinding PlaceholderForeground}"
                                        Text="{TemplateBinding PlaceholderText}"
                                        TextAlignment="{TemplateBinding TextAlignment}"
@@ -368,6 +392,10 @@
            </ControlTemplate>
        </Setter>

+        <Style Selector="^:touch-mode">
+            <Setter Property="ContextFlyout" Value="{StaticResource HorizontalTextBoxContextFlyout}" />
+        </Style>
+
        <Style Selector="^:pointerover /template/ Border#PART_ContentPresenterBorder">
            <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
            <Setter Property="BorderBrush" Value="{DynamicResource TextBoxPointeroverBorderBrush}" />
@@ -526,7 +554,6 @@
                                    Name="PART_Placeholder"
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
-                                    Opacity="0.5"
                                    Foreground="{TemplateBinding PlaceholderForeground}"
                                    Text="{TemplateBinding PlaceholderText}"
                                    TextAlignment="{TemplateBinding TextAlignment}"
@@ -573,6 +600,10 @@
            </ControlTemplate>
        </Setter>

+        <Style Selector="^:touch-mode">
+            <Setter Property="ContextFlyout" Value="{StaticResource HorizontalTextBoxContextFlyout}" />
+        </Style>
+
        <Style Selector="^:disabled">
            <Setter Property="Foreground" Value="{DynamicResource TextBoxDisabledForeground}" />
        </Style>
--- a/src/Semi.Avalonia/Controls/WindowDrawnDecorations.axaml
+++ b/src/Semi.Avalonia/Controls/WindowDrawnDecorations.axaml
@@ -187,6 +187,20 @@
            </Style>
        </Style>

+        <!-- Hide caption buttons when the platform does not support the action -->
+        <Style Selector="^:not(:has-minimize) /template/ Button#PART_MinimizeButton">
+            <Setter Property="IsVisible" Value="False"/>
+        </Style>
+        <Style Selector="^:not(:has-maximize) /template/ Button#PART_MaximizeButton">
+            <Setter Property="IsVisible" Value="False"/>
+        </Style>
+        <Style Selector="^:not(:has-fullscreen) /template/ Button#PART_FullScreenButton">
+            <Setter Property="IsVisible" Value="False"/>
+        </Style>
+        <Style Selector="^:not(:has-fullscreen) /template/ Button#PART_PopoverFullScreenButton">
+            <Setter Property="IsVisible" Value="False"/>
+        </Style>
+
        <!--  Fullscreen: hide overlay and titlebar (popover takes over)  -->
        <Style Selector="^:fullscreen">
            <Style Selector="^ /template/ Panel#PART_TitleTextPanel">
--- a/src/Semi.Avalonia/Themes/Dark/CommandBar.axaml
+++ b/src/Semi.Avalonia/Themes/Dark/CommandBar.axaml
@@ -1,18 +1,18 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  AppBarButton / AppBarToggleButton  -->
-    <SolidColorBrush x:Key="AppBarButtonBackground" Color="Transparent" />
-    <StaticResource x:Key="AppBarButtonForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="AppBarButtonPointeroverBackground" ResourceKey="SemiColorFill0" />
-    <StaticResource x:Key="AppBarButtonPressedBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="AppBarButtonDisabledForeground" ResourceKey="SemiColorDisabledText" />
-    <!--  AppBarToggleButton checked state  -->
-    <StaticResource x:Key="AppBarToggleButtonCheckedForeground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryLightActive" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedDisabledForeground" ResourceKey="SemiColorPrimaryDisabled" />
-    <!--  AppBarSeparator  -->
-    <StaticResource x:Key="AppBarSeparatorBackground" ResourceKey="SemiColorBorder" />
+    <!--  CommandBarButton / CommandBarToggleButton  -->
+    <SolidColorBrush x:Key="CommandBarButtonBackground" Color="Transparent" />
+    <StaticResource x:Key="CommandBarButtonForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="CommandBarButtonPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="CommandBarButtonPressedBackground" ResourceKey="SemiColorFill1" />
+    <StaticResource x:Key="CommandBarButtonDisabledForeground" ResourceKey="SemiColorDisabledText" />
+    <!--  CommandBarToggleButton checked state  -->
+    <StaticResource x:Key="CommandBarToggleButtonCheckedForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedBackground" ResourceKey="SemiColorPrimaryLight" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryLightActive" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedDisabledForeground" ResourceKey="SemiColorPrimaryDisabled" />
+    <!--  CommandBarSeparator  -->
+    <StaticResource x:Key="CommandBarSeparatorBackground" ResourceKey="SemiColorBorder" />
    <!--  CommandBar  -->
    <StaticResource x:Key="CommandBarBackground" ResourceKey="SemiColorBackground1" />
    <StaticResource x:Key="CommandBarForeground" ResourceKey="SemiColorText0" />
--- a/src/Semi.Avalonia/Themes/HighContrast/CommandBar.axaml
+++ b/src/Semi.Avalonia/Themes/HighContrast/CommandBar.axaml
@@ -1,18 +1,18 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  AppBarButton / AppBarToggleButton  -->
-    <SolidColorBrush x:Key="AppBarButtonBackground" Color="Transparent" />
-    <StaticResource x:Key="AppBarButtonForeground" ResourceKey="SemiColorWindowText" />
-    <StaticResource x:Key="AppBarButtonPointeroverBackground" ResourceKey="SemiColorHighlight" />
-    <StaticResource x:Key="AppBarButtonPressedBackground" ResourceKey="SemiColorHighlight" />
-    <StaticResource x:Key="AppBarButtonDisabledForeground" ResourceKey="SemiColorGrayText" />
-    <!--  AppBarToggleButton checked state  -->
-    <StaticResource x:Key="AppBarToggleButtonCheckedForeground" ResourceKey="SemiColorHighlightText" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedBackground" ResourceKey="SemiColorHighlight" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedPointeroverBackground" ResourceKey="SemiColorButtonText" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedPressedBackground" ResourceKey="SemiColorButtonFace" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedDisabledForeground" ResourceKey="SemiColorGrayText" />
-    <!--  AppBarSeparator  -->
-    <StaticResource x:Key="AppBarSeparatorBackground" ResourceKey="SemiColorWindowText" />
+    <!--  CommandBarButton / CommandBarToggleButton  -->
+    <SolidColorBrush x:Key="CommandBarButtonBackground" Color="Transparent" />
+    <StaticResource x:Key="CommandBarButtonForeground" ResourceKey="SemiColorWindowText" />
+    <StaticResource x:Key="CommandBarButtonPointeroverBackground" ResourceKey="SemiColorHighlight" />
+    <StaticResource x:Key="CommandBarButtonPressedBackground" ResourceKey="SemiColorHighlight" />
+    <StaticResource x:Key="CommandBarButtonDisabledForeground" ResourceKey="SemiColorGrayText" />
+    <!--  CommandBarToggleButton checked state  -->
+    <StaticResource x:Key="CommandBarToggleButtonCheckedForeground" ResourceKey="SemiColorHighlightText" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedBackground" ResourceKey="SemiColorHighlight" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedPointeroverBackground" ResourceKey="SemiColorButtonText" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedPressedBackground" ResourceKey="SemiColorButtonFace" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedDisabledForeground" ResourceKey="SemiColorGrayText" />
+    <!--  CommandBarSeparator  -->
+    <StaticResource x:Key="CommandBarSeparatorBackground" ResourceKey="SemiColorWindowText" />
    <!--  CommandBar  -->
    <StaticResource x:Key="CommandBarBackground" ResourceKey="SemiColorWindow" />
    <StaticResource x:Key="CommandBarForeground" ResourceKey="SemiColorWindowText" />
--- a/src/Semi.Avalonia/Themes/Light/CommandBar.axaml
+++ b/src/Semi.Avalonia/Themes/Light/CommandBar.axaml
@@ -1,18 +1,18 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  AppBarButton / AppBarToggleButton  -->
-    <SolidColorBrush x:Key="AppBarButtonBackground" Color="Transparent" />
-    <StaticResource x:Key="AppBarButtonForeground" ResourceKey="SemiColorText0" />
-    <StaticResource x:Key="AppBarButtonPointeroverBackground" ResourceKey="SemiColorFill0" />
-    <StaticResource x:Key="AppBarButtonPressedBackground" ResourceKey="SemiColorFill1" />
-    <StaticResource x:Key="AppBarButtonDisabledForeground" ResourceKey="SemiColorDisabledText" />
-    <!--  AppBarToggleButton checked state  -->
-    <StaticResource x:Key="AppBarToggleButtonCheckedForeground" ResourceKey="SemiColorPrimary" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedBackground" ResourceKey="SemiColorPrimaryLight" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryLightActive" />
-    <StaticResource x:Key="AppBarToggleButtonCheckedDisabledForeground" ResourceKey="SemiColorPrimaryDisabled" />
-    <!--  AppBarSeparator  -->
-    <StaticResource x:Key="AppBarSeparatorBackground" ResourceKey="SemiColorBorder" />
+    <!--  CommandBarButton / CommandBarToggleButton  -->
+    <SolidColorBrush x:Key="CommandBarButtonBackground" Color="Transparent" />
+    <StaticResource x:Key="CommandBarButtonForeground" ResourceKey="SemiColorText0" />
+    <StaticResource x:Key="CommandBarButtonPointeroverBackground" ResourceKey="SemiColorFill0" />
+    <StaticResource x:Key="CommandBarButtonPressedBackground" ResourceKey="SemiColorFill1" />
+    <StaticResource x:Key="CommandBarButtonDisabledForeground" ResourceKey="SemiColorDisabledText" />
+    <!--  CommandBarToggleButton checked state  -->
+    <StaticResource x:Key="CommandBarToggleButtonCheckedForeground" ResourceKey="SemiColorPrimary" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedBackground" ResourceKey="SemiColorPrimaryLight" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedPointeroverBackground" ResourceKey="SemiColorPrimaryLightPointerover" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedPressedBackground" ResourceKey="SemiColorPrimaryLightActive" />
+    <StaticResource x:Key="CommandBarToggleButtonCheckedDisabledForeground" ResourceKey="SemiColorPrimaryDisabled" />
+    <!--  CommandBarSeparator  -->
+    <StaticResource x:Key="CommandBarSeparatorBackground" ResourceKey="SemiColorBorder" />
    <!--  CommandBar  -->
    <StaticResource x:Key="CommandBarBackground" ResourceKey="SemiColorBackground1" />
    <StaticResource x:Key="CommandBarForeground" ResourceKey="SemiColorText0" />
--- a/src/Semi.Avalonia/Themes/Shared/CommandBar.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/CommandBar.axaml
@@ -1,20 +1,20 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  AppBarButton / AppBarToggleButton  -->
-    <x:Double x:Key="AppBarButtonWidth">64</x:Double>
-    <x:Double x:Key="AppBarButtonCompactWidth">40</x:Double>
-    <x:Double x:Key="AppBarButtonMinHeight">40</x:Double>
-    <Thickness x:Key="AppBarButtonPadding">8 4</Thickness>
-    <x:Double x:Key="AppBarButtonPanelSpacing">4</x:Double>
-    <StaticResource x:Key="AppBarButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
-    <StaticResource x:Key="AppBarButtonLabelFontSize" ResourceKey="SemiFontSizeSmall" />
-    <x:Double x:Key="AppBarButtonOverflowMinHeight">36</x:Double>
-    <Thickness x:Key="AppBarButtonOverflowPadding">12 6</Thickness>
-    <!--  AppBarSeparator  -->
-    <x:Double x:Key="AppBarSeparatorWidth">1</x:Double>
-    <x:Double x:Key="AppBarSeparatorMinHeight">24</x:Double>
-    <Thickness x:Key="AppBarSeparatorMargin">8 4</Thickness>
-    <x:Double x:Key="AppBarSeparatorOverflowHeight">1</x:Double>
-    <Thickness x:Key="AppBarSeparatorOverflowMargin">4 4</Thickness>
+    <!--  CommandBarButton / CommandBarToggleButton  -->
+    <x:Double x:Key="CommandBarButtonWidth">64</x:Double>
+    <x:Double x:Key="CommandBarButtonCompactWidth">40</x:Double>
+    <x:Double x:Key="CommandBarButtonMinHeight">40</x:Double>
+    <Thickness x:Key="CommandBarButtonPadding">8 4</Thickness>
+    <x:Double x:Key="CommandBarButtonPanelSpacing">4</x:Double>
+    <StaticResource x:Key="CommandBarButtonCornerRadius" ResourceKey="SemiBorderRadiusSmall" />
+    <StaticResource x:Key="CommandBarButtonLabelFontSize" ResourceKey="SemiFontSizeSmall" />
+    <x:Double x:Key="CommandBarButtonOverflowMinHeight">36</x:Double>
+    <Thickness x:Key="CommandBarButtonOverflowPadding">12 6</Thickness>
+    <!--  CommandBarSeparator  -->
+    <x:Double x:Key="CommandBarSeparatorWidth">1</x:Double>
+    <x:Double x:Key="CommandBarSeparatorMinHeight">24</x:Double>
+    <Thickness x:Key="CommandBarSeparatorMargin">8 4</Thickness>
+    <x:Double x:Key="CommandBarSeparatorOverflowHeight">1</x:Double>
+    <Thickness x:Key="CommandBarSeparatorOverflowMargin">4 4</Thickness>
    <!--  CommandBar  -->
    <x:Double x:Key="CommandBarMinHeight">48</x:Double>
    <Thickness x:Key="CommandBarPadding">4 0</Thickness>
--- a/src/Semi.Avalonia/Themes/Shared/Flyout.axaml
+++ b/src/Semi.Avalonia/Themes/Shared/Flyout.axaml
@@ -7,4 +7,5 @@
    <x:Double x:Key="FlyoutMaxWidth">600</x:Double>
    <StaticResource x:Key="FlyoutCornerRadius" ResourceKey="SemiBorderRadiusMedium" />
    <StaticResource x:Key="FlyoutPadding" ResourceKey="SemiThicknessTight" />
+    <StaticResource x:Key="HorizontalMenuFlyoutThemeMinWidth" ResourceKey="SemiSpacingExtraLoose" />
 </ResourceDictionary>