From e03509d88576682ddda6665f569f50e669d9ecbb Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Mon, 23 Jan 2023 15:41:42 +0800
Subject: [PATCH 1/5] feat: add menu infra.

---
 demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml  | 20 +++++++++++++++++++
 .../Pages/MenuDemo.axaml.cs                   | 18 +++++++++++++++++
 src/Semi.Avalonia/Controls/Controls.axaml     |  2 ++
 src/Semi.Avalonia/Controls/Menu.axaml         |  3 +++
 .../Controls/MenuFlyoutPresenter.axaml        |  3 +++
 src/Semi.Avalonia/Themes/Light/Light.axaml    |  1 +
 src/Semi.Avalonia/Themes/Light/Menu.axaml     |  3 +++
 7 files changed, 50 insertions(+)
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
 create mode 100644 demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml.cs
 create mode 100644 src/Semi.Avalonia/Controls/Menu.axaml
 create mode 100644 src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
 create mode 100644 src/Semi.Avalonia/Themes/Light/Menu.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
new file mode 100644
index 0000000..7a52381
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
@@ -0,0 +1,20 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.MenuDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel Margin="20" Spacing="20">
+        <Menu>
+            <MenuItem Header="File">
+                <MenuItem Header="Create" />
+                <MenuItem Header="Delete" />
+            </MenuItem>
+            <MenuItem Header="View" />
+            <MenuItem Header="Tools" />
+        </Menu>
+    </StackPanel>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml.cs
new file mode 100644
index 0000000..698f0ee
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class MenuDemo : UserControl
+{
+    public MenuDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 55699a6..3376d8b 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -13,6 +13,8 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ItemsControl.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ListBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/Menu.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/NotificationCard.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/NumericUpDown.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/PathIcon.axaml" />
diff --git a/src/Semi.Avalonia/Controls/Menu.axaml b/src/Semi.Avalonia/Controls/Menu.axaml
new file mode 100644
index 0000000..9017e8d
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/Menu.axaml
@@ -0,0 +1,3 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml b/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
new file mode 100644
index 0000000..9017e8d
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
@@ -0,0 +1,3 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Themes/Light/Light.axaml b/src/Semi.Avalonia/Themes/Light/Light.axaml
index 378b4d9..c9f723b 100644
--- a/src/Semi.Avalonia/Themes/Light/Light.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Light.axaml
@@ -11,6 +11,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Label.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ListBox.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/Menu.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/NotificationCard.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/NumericUpDown.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Themes/Light/ProgressBar.axaml" />
diff --git a/src/Semi.Avalonia/Themes/Light/Menu.axaml b/src/Semi.Avalonia/Themes/Light/Menu.axaml
new file mode 100644
index 0000000..9017e8d
--- /dev/null
+++ b/src/Semi.Avalonia/Themes/Light/Menu.axaml
@@ -0,0 +1,3 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <!--  Add Resources Here  -->
+</ResourceDictionary>

From 30842b91506e72041feaf810030a7ac24ba78cfa Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Mon, 23 Jan 2023 22:46:16 +0800
Subject: [PATCH 2/5] feat: add default themes copy from fluent theme.

---
 demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml  |  32 +-
 .../Semi.Avalonia.Demo.csproj                 |   2 +-
 demo/Semi.Avalonia.Demo/Views/MainView.axaml  |   3 +
 src/Semi.Avalonia/Controls/Menu.axaml         | 358 +++++++++++++++++-
 .../Controls/MenuFlyoutPresenter.axaml        |  36 ++
 5 files changed, 423 insertions(+), 8 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
index 7a52381..6619598 100644
--- a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
@@ -9,12 +9,34 @@
     mc:Ignorable="d">
     <StackPanel Margin="20" Spacing="20">
         <Menu>
-            <MenuItem Header="File">
-                <MenuItem Header="Create" />
-                <MenuItem Header="Delete" />
+            <MenuItem Header="_First">
+                <MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
+                <MenuItem
+                    Header="_Disabled Menu Item"
+                    InputGesture="Ctrl+D"
+                    IsEnabled="False" />
+                <Separator />
+                <MenuItem Header="Menu with _Submenu">
+                    <MenuItem Header="Submenu _1" />
+                    <MenuItem Header="Submenu _2 with Submenu">
+                        <MenuItem Header="Submenu Level 2" />
+                    </MenuItem>
+                    <MenuItem Header="Submenu _3 with Submenu Disabled" IsEnabled="False">
+                        <MenuItem Header="Submenu Level 2" />
+                    </MenuItem>
+                </MenuItem>
+                <MenuItem Header="Menu Item with _Checkbox">
+                    <MenuItem.Icon>
+                        <CheckBox
+                            BorderThickness="0"
+                            IsChecked="True"
+                            IsHitTestVisible="False" />
+                    </MenuItem.Icon>
+                </MenuItem>
+            </MenuItem>
+            <MenuItem Header="_Second">
+                <MenuItem Header="Second _Menu Item" />
             </MenuItem>
-            <MenuItem Header="View" />
-            <MenuItem Header="Tools" />
         </Menu>
     </StackPanel>
 </UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj b/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
index 01aa6e7..7dd67bb 100644
--- a/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
+++ b/demo/Semi.Avalonia.Demo/Semi.Avalonia.Demo.csproj
@@ -13,7 +13,7 @@
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="11.0.0-preview4" />
         <!--Condition below is needed to remove Avalonia.Diagnostics package from build output in Release configuration.-->
-        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)" />
+        <PackageReference Condition="'$(Configuration)' == 'Debug'" Include="Avalonia.Diagnostics" Version="11.0.0-preview4" />
         <PackageReference Include="CommunityToolkit.Mvvm" Version="8.1.0" />
         <PackageReference Include="XamlNameReferenceGenerator" Version="1.5.1" />
     </ItemGroup>
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index b224975..aaa69f0 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -45,6 +45,9 @@
         <TabItem Header="ListBox">
             <pages:ListBoxDemo />
         </TabItem>
+        <TabItem Header="Menu">
+            <pages:MenuDemo />
+        </TabItem>
         <TabItem Header="Notification">
             <pages:NotificationDemo />
         </TabItem>
diff --git a/src/Semi.Avalonia/Controls/Menu.axaml b/src/Semi.Avalonia/Controls/Menu.axaml
index 9017e8d..6170dea 100644
--- a/src/Semi.Avalonia/Controls/Menu.axaml
+++ b/src/Semi.Avalonia/Controls/Menu.axaml
@@ -1,3 +1,357 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!--  Add Resources Here  -->
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Avalonia.Controls.Converters">
+
+    <converters:PlatformKeyGestureConverter x:Key="KeyGestureConverter" />
+
+    <ControlTheme x:Key="MenuScrollViewer" TargetType="ScrollViewer">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <DockPanel>
+                    <RepeatButton
+                        HorizontalAlignment="Stretch"
+                        HorizontalContentAlignment="Center"
+                        Background="Transparent"
+                        BorderThickness="0"
+                        Command="{Binding LineUp, RelativeSource={RelativeSource TemplatedParent}}"
+                        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>
+                        <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
+                            <Path
+                                Width="20"
+                                Height="20"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center"
+                                Data="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z"
+                                Fill="{DynamicResource ScrollBarButtonArrowForeground}" />
+                        </Viewbox>
+                    </RepeatButton>
+                    <RepeatButton
+                        HorizontalAlignment="Stretch"
+                        HorizontalContentAlignment="Center"
+                        Background="Transparent"
+                        BorderThickness="0"
+                        Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
+                        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>
+                        <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
+                            <Path
+                                Width="20"
+                                Height="20"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center"
+                                Data="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z"
+                                Fill="{DynamicResource ScrollBarButtonArrowForeground}" />
+                        </Viewbox>
+                    </RepeatButton>
+                    <ScrollContentPresenter
+                        Name="PART_ContentPresenter"
+                        Margin="{TemplateBinding Padding}"
+                        CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}"
+                        CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}"
+                        Content="{TemplateBinding Content}"
+                        Extent="{TemplateBinding Extent,
+                                                 Mode=TwoWay}"
+                        Viewport="{TemplateBinding Viewport,
+                                                   Mode=TwoWay}"
+                        Offset="{TemplateBinding Offset,
+                                                 Mode=TwoWay}">
+                        <ScrollContentPresenter.GestureRecognizers>
+                            <ScrollGestureRecognizer CanHorizontallyScroll="{TemplateBinding CanHorizontallyScroll}" CanVerticallyScroll="{TemplateBinding CanVerticallyScroll}" />
+                        </ScrollContentPresenter.GestureRecognizers>
+                    </ScrollContentPresenter>
+                </DockPanel>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^ /template/ RepeatButton:pointerover &gt; Viewbox &gt; Path">
+            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type MenuItem}" TargetType="MenuItem">
+        <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
+        <!--  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 MenuFlyoutItemThemePaddingNarrow}" />
+        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Panel>
+                    <Border
+                        Name="PART_LayoutRoot"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        BorderBrush="{TemplateBinding BorderBrush}"
+                        BorderThickness="{TemplateBinding BorderThickness}"
+                        CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIcon" />
+                                <ColumnDefinition Width="*" />
+                                <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGT" />
+                                <ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemChevron" />
+                            </Grid.ColumnDefinitions>
+
+                            <Viewbox
+                                Name="PART_IconPresenter"
+                                Width="16"
+                                Height="16"
+                                Margin="{DynamicResource MenuIconPresenterMargin}"
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center"
+                                IsVisible="False"
+                                StretchDirection="DownOnly">
+                                <ContentPresenter Content="{TemplateBinding Icon}" />
+                            </Viewbox>
+
+                            <ContentPresenter
+                                Name="PART_HeaderPresenter"
+                                Grid.Column="1"
+                                HorizontalAlignment="Stretch"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding Header}"
+                                RecognizesAccessKey="True" />
+                            <TextBlock
+                                x:Name="PART_InputGestureText"
+                                Grid.Column="2"
+                                Margin="{DynamicResource MenuInputGestureTextMargin}"
+                                HorizontalAlignment="Right"
+                                VerticalAlignment="Center"
+                                Classes="CaptionTextBlockStyle"
+                                Foreground="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForeground}"
+                                Text="{TemplateBinding InputGesture,
+                                                       Converter={StaticResource KeyGestureConverter}}" />
+                            <Path
+                                Name="PART_ChevronPath"
+                                Grid.Column="3"
+                                Width="8"
+                                Height="16"
+                                Margin="{DynamicResource MenuFlyoutItemChevronMargin}"
+                                VerticalAlignment="Center"
+                                Data="{DynamicResource MenuItemChevronPathData}"
+                                Fill="{DynamicResource MenuFlyoutSubItemChevron}"
+                                Stretch="Uniform" />
+                        </Grid>
+                    </Border>
+                    <Popup
+                        Name="PART_Popup"
+                        HorizontalOffset="{DynamicResource MenuFlyoutSubItemPopupHorizontalOffset}"
+                        IsLightDismissEnabled="False"
+                        IsOpen="{TemplateBinding IsSubMenuOpen,
+                                                 Mode=TwoWay}"
+                        PlacementMode="Right"
+                        WindowManagerAddShadowHint="False">
+                        <Border
+                            MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}"
+                            MaxWidth="{DynamicResource FlyoutThemeMaxWidth}"
+                            Padding="{DynamicResource MenuFlyoutPresenterThemePadding}"
+                            HorizontalAlignment="Stretch"
+                            Background="{DynamicResource MenuFlyoutPresenterBackground}"
+                            BorderBrush="{DynamicResource MenuFlyoutPresenterBorderBrush}"
+                            BorderThickness="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}"
+                            CornerRadius="{DynamicResource OverlayCornerRadius}">
+                            <ScrollViewer Theme="{StaticResource MenuScrollViewer}">
+                                <ItemsPresenter
+                                    Name="PART_ItemsPresenter"
+                                    Margin="{DynamicResource MenuFlyoutScrollerMargin}"
+                                    Grid.IsSharedSizeScope="True"
+                                    ItemTemplate="{TemplateBinding ItemTemplate}"
+                                    Items="{TemplateBinding Items}"
+                                    ItemsPanel="{TemplateBinding ItemsPanel}" />
+                            </ScrollViewer>
+                        </Border>
+                    </Popup>
+                </Panel>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:icon /template/ Viewbox#PART_IconPresenter">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ Border#PART_LayoutRoot">
+                <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPointerOver}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPointerOver}" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_InputGestureText">
+                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver}" />
+            </Style>
+            <Style Selector="^ /template/ Path#PART_ChevronPath">
+                <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronPointerOver}" />
+            </Style>
+        </Style>
+
+        <!--  Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed  -->
+        <Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover">
+            <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPressed}" />
+            <Style Selector="^ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPressed}" />
+            </Style>
+            <Style Selector="^ TextBlock#PART_InputGestureText">
+                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed}" />
+            </Style>
+            <Style Selector="^ Path#PART_ChevronPath">
+                <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronPressed}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Border#PART_LayoutRoot">
+                <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundDisabled}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundDisabled}" />
+            </Style>
+            <Style Selector="^ /template/ TextBlock#PART_InputGestureText">
+                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled}" />
+            </Style>
+            <Style Selector="^ /template/ Path#PART_ChevronPath">
+                <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronDisabled}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:open /template/ Path#PART_ChevronPath">
+            <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronSubMenuOpened}" />
+        </Style>
+
+        <Style Selector="^:empty /template/ Path#PART_ChevronPath">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+
+        <Style Selector="^:separator">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Separator />
+                </ControlTemplate>
+            </Setter>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="TopLevelMenuItem" TargetType="MenuItem">
+        <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
+        <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
+        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+        <Setter Property="Padding" Value="{DynamicResource MenuBarItemPadding}" />
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    Name="PART_LayoutRoot"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <Panel>
+                        <ContentPresenter
+                            Name="PART_HeaderPresenter"
+                            Margin="{TemplateBinding Padding}"
+                            HorizontalAlignment="Stretch"
+                            VerticalAlignment="Center"
+                            Content="{TemplateBinding Header}"
+                            RecognizesAccessKey="True" />
+                        <Popup
+                            Name="PART_Popup"
+                            MinWidth="{Binding Bounds.Width, RelativeSource={RelativeSource TemplatedParent}}"
+                            IsLightDismissEnabled="True"
+                            IsOpen="{TemplateBinding IsSubMenuOpen,
+                                                     Mode=TwoWay}"
+                            OverlayInputPassThroughElement="{Binding $parent[Menu]}"
+                            WindowManagerAddShadowHint="False">
+                            <Border
+                                MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}"
+                                MaxWidth="{DynamicResource FlyoutThemeMaxWidth}"
+                                Padding="{DynamicResource MenuFlyoutPresenterThemePadding}"
+                                HorizontalAlignment="Stretch"
+                                Background="{DynamicResource MenuFlyoutPresenterBackground}"
+                                BorderBrush="{DynamicResource MenuFlyoutPresenterBorderBrush}"
+                                BorderThickness="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}"
+                                CornerRadius="{DynamicResource OverlayCornerRadius}">
+                                <ScrollViewer Theme="{StaticResource MenuScrollViewer}">
+                                    <ItemsPresenter
+                                        Name="PART_ItemsPresenter"
+                                        Margin="{DynamicResource MenuFlyoutScrollerMargin}"
+                                        Grid.IsSharedSizeScope="True"
+                                        ItemTemplate="{TemplateBinding ItemTemplate}"
+                                        Items="{TemplateBinding Items}"
+                                        ItemsPanel="{TemplateBinding ItemsPanel}" />
+                                </ScrollViewer>
+                            </Border>
+                        </Popup>
+                    </Panel>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+
+        <Style Selector="^:selected">
+            <Style Selector="^ /template/ Border#PART_LayoutRoot">
+                <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPointerOver}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPointerOver}" />
+            </Style>
+        </Style>
+
+        <!--  Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed  -->
+        <Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover">
+            <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPressed}" />
+            <Style Selector="^ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPressed}" />
+            </Style>
+        </Style>
+
+        <Style Selector="^:disabled">
+            <Style Selector="^ /template/ Border#PART_LayoutRoot">
+                <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundDisabled}" />
+            </Style>
+            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
+                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundDisabled}" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type Menu}" TargetType="Menu">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Height" Value="60" />
+        <Setter Property="Menu.ItemContainerTheme" Value="{StaticResource TopLevelMenuItem}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="Menu">
+                <Border
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalAlignment="Stretch"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <ItemsPresenter
+                        Name="PART_ItemsPresenter"
+                        VerticalAlignment="Stretch"
+                        ItemTemplate="{TemplateBinding ItemTemplate}"
+                        Items="{TemplateBinding Items}"
+                        ItemsPanel="{TemplateBinding ItemsPanel}"
+                        KeyboardNavigation.TabNavigation="Continue" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
 </ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml b/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
index 9017e8d..aec3cc5 100644
--- a/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
+++ b/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
@@ -1,3 +1,39 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
+    <ControlTheme x:Key="{x:Type MenuFlyoutPresenter}" TargetType="MenuFlyoutPresenter">
+        <Setter Property="Background" Value="{DynamicResource MenuFlyoutPresenterBackground}" />
+        <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutPresenterBorderBrush}" />
+        <Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}" />
+        <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPresenterThemePadding}" />
+        <Setter Property="MaxWidth" Value="{DynamicResource FlyoutThemeMaxWidth}" />
+        <Setter Property="MinHeight" Value="{DynamicResource MenuFlyoutThemeMinHeight}" />
+        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
+        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
+        <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="MenuFlyoutPresenter">
+                <Border
+                    Name="LayoutRoot"
+                    Padding="{DynamicResource FlyoutBorderThemePadding}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <ScrollViewer
+                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
+                        Theme="{StaticResource MenuScrollViewer}"
+                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
+                        <ItemsPresenter
+                            Name="PART_ItemsPresenter"
+                            Margin="{DynamicResource MenuFlyoutScrollerMargin}"
+                            Grid.IsSharedSizeScope="True"
+                            ItemTemplate="{TemplateBinding ItemTemplate}"
+                            Items="{TemplateBinding Items}"
+                            ItemsPanel="{TemplateBinding ItemsPanel}"
+                            KeyboardNavigation.TabNavigation="Continue" />
+                    </ScrollViewer>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
 </ResourceDictionary>

From 12c75c1573fdc912ad7c63426c64951b90c8f4aa Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Tue, 24 Jan 2023 00:38:58 +0800
Subject: [PATCH 3/5] feat: WIP some brushes and icon path data. Update height
 and width limitation.

---
 demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml  |  38 ++++++
 src/Semi.Avalonia/Controls/Menu.axaml         | 117 ++++++++++--------
 .../Controls/MenuFlyoutPresenter.axaml        |  16 +--
 src/Semi.Avalonia/Themes/Light/Menu.axaml     |  32 ++++-
 4 files changed, 145 insertions(+), 58 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
index 6619598..59e7353 100644
--- a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
@@ -37,6 +37,44 @@
             <MenuItem Header="_Second">
                 <MenuItem Header="Second _Menu Item" />
             </MenuItem>
+            <MenuItem Header="Parent">
+                <MenuItem Header="Child 1" />
+                <MenuItem Header="Child 2" />
+                <MenuItem Header="Child 3" />
+                <Separator />
+                <MenuItem Header="Child 4" />
+                <MenuItem Header="Child 5" />
+                <MenuItem Header="Child 6" />
+                <MenuItem Header="Child 7" />
+                <MenuItem Header="Child 8" />
+                <MenuItem Header="Child 9" />
+                <MenuItem Header="Child 10" />
+                <MenuItem Header="Child 11" />
+                <MenuItem Header="Child 12" />
+                <MenuItem Header="Child 13" />
+                <MenuItem Header="Child 14" />
+                <MenuItem Header="Child 15" />
+                <MenuItem Header="Child 16" />
+                <MenuItem Header="Child 17" />
+                <MenuItem Header="Child 18" />
+                <MenuItem Header="Child 19" />
+                <MenuItem Header="Child 4" />
+                <MenuItem Header="Child 5" />
+                <MenuItem Header="Child 6" />
+                <MenuItem Header="Child 7" />
+                <MenuItem Header="Child 8" />
+                <MenuItem Header="Child 9" />
+                <MenuItem Header="Child 10" />
+                <MenuItem Header="Child 11" />
+                <MenuItem Header="Child 12" />
+                <MenuItem Header="Child 13" />
+                <MenuItem Header="Child 14" />
+                <MenuItem Header="Child 15" />
+                <MenuItem Header="Child 16" />
+                <MenuItem Header="Child 17" />
+                <MenuItem Header="Child 18" />
+                <MenuItem Header="Child 19" />
+            </MenuItem>
         </Menu>
     </StackPanel>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/Menu.axaml b/src/Semi.Avalonia/Controls/Menu.axaml
index 6170dea..b518470 100644
--- a/src/Semi.Avalonia/Controls/Menu.axaml
+++ b/src/Semi.Avalonia/Controls/Menu.axaml
@@ -8,14 +8,20 @@
     <ControlTheme x:Key="MenuScrollViewer" TargetType="ScrollViewer">
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
-            <ControlTemplate>
+            <ControlTemplate TargetType="ScrollViewer">
                 <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>
@@ -26,15 +32,11 @@
                                 <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                         </RepeatButton.IsVisible>
-                        <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
-                            <Path
-                                Width="20"
-                                Height="20"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                Data="M 19.091797 14.970703 L 10 5.888672 L 0.908203 14.970703 L 0.029297 14.091797 L 10 4.111328 L 19.970703 14.091797 Z"
-                                Fill="{DynamicResource ScrollBarButtonArrowForeground}" />
-                        </Viewbox>
+                        <PathIcon
+                            Width="8"
+                            Height="8"
+                            Data="{DynamicResource MenuScrollViewerUpButtonGlyph}"
+                            Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
                     </RepeatButton>
                     <RepeatButton
                         HorizontalAlignment="Stretch"
@@ -42,6 +44,7 @@
                         Background="Transparent"
                         BorderThickness="0"
                         Command="{Binding LineDown, RelativeSource={RelativeSource TemplatedParent}}"
+                        CornerRadius="0"
                         DockPanel.Dock="Bottom"
                         RenderTransform="{x:Null}">
                         <RepeatButton.IsVisible>
@@ -52,15 +55,11 @@
                                 <Binding Path="Viewport.Height" RelativeSource="{RelativeSource TemplatedParent}" />
                             </MultiBinding>
                         </RepeatButton.IsVisible>
-                        <Viewbox Width="{DynamicResource ScrollBarButtonArrowIconFontSize}" Height="{DynamicResource ScrollBarButtonArrowIconFontSize}">
-                            <Path
-                                Width="20"
-                                Height="20"
-                                HorizontalAlignment="Center"
-                                VerticalAlignment="Center"
-                                Data="M 18.935547 4.560547 L 19.814453 5.439453 L 10 15.253906 L 0.185547 5.439453 L 1.064453 4.560547 L 10 13.496094 Z"
-                                Fill="{DynamicResource ScrollBarButtonArrowForeground}" />
-                        </Viewbox>
+                        <PathIcon
+                            Width="8"
+                            Height="8"
+                            Data="{DynamicResource MenuScrollViewerDownButtonGlyph}"
+                            Foreground="{DynamicResource MenuFlyoutScrollViewerIconForeground}" />
                     </RepeatButton>
                     <ScrollContentPresenter
                         Name="PART_ContentPresenter"
@@ -81,11 +80,32 @@
                 </DockPanel>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^ /template/ RepeatButton:pointerover &gt; Viewbox &gt; Path">
-            <Setter Property="Fill" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
+        <Style Selector="^ /template/ RepeatButton:pointerover &gt; PathIcon">
+            <Setter Property="Foreground" Value="{DynamicResource ScrollBarButtonArrowForegroundPointerOver}" />
         </Style>
     </ControlTheme>
 
+    <ControlTheme x:Key="{x:Type Separator}" TargetType="Separator">
+        <Setter Property="Separator.Background" Value="{DynamicResource MenuItemSeparatorBackground}" />
+        <Setter Property="Separator.Focusable" Value="False" />
+        <Setter Property="Separator.Height" Value="{DynamicResource MenuItemSeparatorHeight}" />
+        <Setter Property="Separator.HorizontalAlignment" Value="Stretch" />
+        <Setter Property="Separator.Margin" Value="{DynamicResource MenuItemSeparatorMargin}" />
+        <Setter Property="Separator.Template">
+            <ControlTemplate TargetType="Separator">
+                <Border
+                    Height="{TemplateBinding Height}"
+                    Padding="{TemplateBinding Margin}"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
     <ControlTheme x:Key="{x:Type MenuItem}" TargetType="MenuItem">
         <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
@@ -160,14 +180,18 @@
                         PlacementMode="Right"
                         WindowManagerAddShadowHint="False">
                         <Border
-                            MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}"
-                            MaxWidth="{DynamicResource FlyoutThemeMaxWidth}"
-                            Padding="{DynamicResource MenuFlyoutPresenterThemePadding}"
+                            MinWidth="{DynamicResource MenuFlyoutMinWidth}"
+                            MinHeight="{DynamicResource MenuFlyoutMinHeight}"
+                            MaxWidth="{DynamicResource MenuFlyoutMaxWidth}"
+                            MaxHeight="{DynamicResource MenuFlyoutMaxHeight}"
+                            Margin="0,4"
+                            Padding="{DynamicResource MenuFlyoutPadding}"
                             HorizontalAlignment="Stretch"
-                            Background="{DynamicResource MenuFlyoutPresenterBackground}"
-                            BorderBrush="{DynamicResource MenuFlyoutPresenterBorderBrush}"
-                            BorderThickness="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}"
-                            CornerRadius="{DynamicResource OverlayCornerRadius}">
+                            Background="{DynamicResource MenuFlyoutBackground}"
+                            BorderBrush="{DynamicResource MenuFlyoutBorderBrush}"
+                            BorderThickness="{DynamicResource MenuFlyoutBorderThickness}"
+                            BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
+                            CornerRadius="{DynamicResource MenuFlyoutCornerRadius}">
                             <ScrollViewer Theme="{StaticResource MenuScrollViewer}">
                                 <ItemsPresenter
                                     Name="PART_ItemsPresenter"
@@ -249,11 +273,10 @@
     </ControlTheme>
 
     <ControlTheme x:Key="TopLevelMenuItem" TargetType="MenuItem">
-        <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
+        <Setter Property="Background" Value="{DynamicResource MenuItemBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource MenuItemForeground}" />
         <!--  Narrow padding should be used for mouse input, when non-narrow one should be used for touch input in future.  -->
-        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
-        <Setter Property="Padding" Value="{DynamicResource MenuBarItemPadding}" />
+        <Setter Property="Padding" Value="{DynamicResource MenuItemTopLevelPadding}" />
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
@@ -279,15 +302,18 @@
                             OverlayInputPassThroughElement="{Binding $parent[Menu]}"
                             WindowManagerAddShadowHint="False">
                             <Border
-                                MinHeight="{DynamicResource MenuFlyoutThemeMinHeight}"
-                                MaxWidth="{DynamicResource FlyoutThemeMaxWidth}"
-                                Padding="{DynamicResource MenuFlyoutPresenterThemePadding}"
+                                MinWidth="{DynamicResource MenuFlyoutMinWidth}"
+                                MinHeight="{DynamicResource MenuFlyoutMinHeight}"
+                                MaxWidth="{DynamicResource MenuFlyoutMaxWidth}"
+                                MaxHeight="{DynamicResource MenuFlyoutMaxHeight}"
+                                Margin="0,4"
                                 HorizontalAlignment="Stretch"
-                                Background="{DynamicResource MenuFlyoutPresenterBackground}"
-                                BorderBrush="{DynamicResource MenuFlyoutPresenterBorderBrush}"
-                                BorderThickness="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}"
-                                CornerRadius="{DynamicResource OverlayCornerRadius}">
-                                <ScrollViewer Theme="{StaticResource MenuScrollViewer}">
+                                Background="{DynamicResource MenuFlyoutBackground}"
+                                BorderBrush="{DynamicResource MenuFlyoutBorderBrush}"
+                                BorderThickness="{DynamicResource MenuFlyoutBorderThickness}"
+                                BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
+                                CornerRadius="{DynamicResource MenuFlyoutCornerRadius}">
+                                <ScrollViewer Padding="{DynamicResource MenuFlyoutPadding}" Theme="{StaticResource MenuScrollViewer}">
                                     <ItemsPresenter
                                         Name="PART_ItemsPresenter"
                                         Margin="{DynamicResource MenuFlyoutScrollerMargin}"
@@ -305,19 +331,13 @@
 
         <Style Selector="^:selected">
             <Style Selector="^ /template/ Border#PART_LayoutRoot">
-                <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPointerOver}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPointerOver}" />
+                <Setter Property="Background" Value="{DynamicResource MenuItemPointeroverBackground}" />
             </Style>
         </Style>
 
         <!--  Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed  -->
         <Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover">
-            <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPressed}" />
-            <Style Selector="^ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPressed}" />
-            </Style>
+            <Setter Property="Background" Value="{DynamicResource MenuItemPressedBackground}" />
         </Style>
 
         <Style Selector="^:disabled">
@@ -332,7 +352,6 @@
 
     <ControlTheme x:Key="{x:Type Menu}" TargetType="Menu">
         <Setter Property="Background" Value="Transparent" />
-        <Setter Property="Height" Value="60" />
         <Setter Property="Menu.ItemContainerTheme" Value="{StaticResource TopLevelMenuItem}" />
         <Setter Property="Template">
             <ControlTemplate TargetType="Menu">
diff --git a/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml b/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
index aec3cc5..6cae984 100644
--- a/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
+++ b/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
@@ -1,16 +1,15 @@
 <ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
     <!--  Add Resources Here  -->
     <ControlTheme x:Key="{x:Type MenuFlyoutPresenter}" TargetType="MenuFlyoutPresenter">
-        <Setter Property="Background" Value="{DynamicResource MenuFlyoutPresenterBackground}" />
-        <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutPresenterBorderBrush}" />
-        <Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}" />
-        <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPresenterThemePadding}" />
-        <Setter Property="MaxWidth" Value="{DynamicResource FlyoutThemeMaxWidth}" />
-        <Setter Property="MinHeight" Value="{DynamicResource MenuFlyoutThemeMinHeight}" />
+        <Setter Property="MenuFlyoutPresenter.Background" Value="{DynamicResource MenuFlyoutBackground}" />
+        <Setter Property="MenuFlyoutPresenter.BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
+        <Setter Property="MenuFlyoutPresenter.BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
+        <Setter Property="MenuFlyoutPresenter.Padding" Value="{DynamicResource MenuFlyoutPadding}" />
         <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
         <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
-        <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
-        <Setter Property="Template">
+        <Setter Property="MenuFlyoutPresenter.Margin" Value="4" />
+        <Setter Property="MenuFlyoutPresenter.CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+        <Setter Property="MenuFlyoutPresenter.Template">
             <ControlTemplate TargetType="MenuFlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
@@ -18,6 +17,7 @@
                     Background="{TemplateBinding Background}"
                     BorderBrush="{TemplateBinding BorderBrush}"
                     BorderThickness="{TemplateBinding BorderThickness}"
+                    BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
                     CornerRadius="{TemplateBinding CornerRadius}">
                     <ScrollViewer
                         HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
diff --git a/src/Semi.Avalonia/Themes/Light/Menu.axaml b/src/Semi.Avalonia/Themes/Light/Menu.axaml
index 9017e8d..f970dbf 100644
--- a/src/Semi.Avalonia/Themes/Light/Menu.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Menu.axaml
@@ -1,3 +1,33 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:sys="clr-namespace:System;assembly=System.Runtime">
     <!--  Add Resources Here  -->
+
+    <PathGeometry x:Key="MenuScrollViewerUpButtonGlyph">M19.637 16.4369C19.0513 17.0227 18.1015 17.0227 17.5157 16.4369L11.8589 10.7801L6.20202 16.4369C5.61623 17.0227 4.66648 17.0227 4.0807 16.4369C3.49491 15.8511 3.49491 14.9014 4.0807 14.3156L10.7982 7.59809C11.384 7.01231 12.3337 7.01231 12.9195 7.59809L19.637 14.3156C20.2228 14.9014 20.2228 15.8511 19.637 16.4369Z</PathGeometry>
+    <PathGeometry x:Key="MenuScrollViewerDownButtonGlyph">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</PathGeometry>
+    <SolidColorBrush x:Key="MenuFlyoutScrollViewerIconForeground" Opacity="0.62" Color="#1C1F23" />
+
+    <!--  MenuFlyout  -->
+    <SolidColorBrush x:Key="MenuFlyoutBackground" Color="White" />
+    <SolidColorBrush x:Key="MenuFlyoutBorderBrush" Opacity="0.08" Color="#1C1F23" />
+    <Thickness x:Key="MenuFlyoutBorderThickness">1</Thickness>
+    <Thickness x:Key="MenuFlyoutPadding">8</Thickness>
+    <BoxShadows x:Key="MenuFlyoutBorderBoxShadow">0 0 8 0 #1A000000</BoxShadows>
+    <CornerRadius x:Key="MenuFlyoutCornerRadius">3</CornerRadius>
+    <sys:Double x:Key="MenuFlyoutMinHeight">16</sys:Double>
+    <sys:Double x:Key="MenuFlyoutMinWidth">100</sys:Double>
+    <sys:Double x:Key="MenuFlyoutMaxHeight">400</sys:Double>
+    <sys:Double x:Key="MenuFlyoutMaxWidth">600</sys:Double>
+
+    <!--  MenuItem  -->
+    <SolidColorBrush x:Key="MenuItemBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="MenuItemForeground" Color="#1C1F23" />
+    <Thickness x:Key="MenuItemTopLevelPadding">8 4</Thickness>
+
+    <SolidColorBrush x:Key="MenuItemSeparatorBackground" Opacity="0.08" Color="#1C1F23" />
+    <sys:Double x:Key="MenuItemSeparatorHeight">1</sys:Double>
+    <Thickness x:Key="MenuItemSeparatorMargin">2</Thickness>
+    <SolidColorBrush x:Key="MenuItemPointeroverBackground" Opacity="0.05" Color="#2E3238" />
+    <SolidColorBrush x:Key="MenuItemPressedBackground" Opacity="0.09" Color="#2E3238" />
 </ResourceDictionary>

From 0f4208731488aa71cde85e06a1a812bc46a5bb6d Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Tue, 24 Jan 2023 12:29:29 +0800
Subject: [PATCH 4/5] feat: update pointerover, pressed and disabled style.

---
 demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml |  5 +-
 src/Semi.Avalonia/Controls/Menu.axaml        | 80 +++++++-------------
 src/Semi.Avalonia/Themes/Light/Menu.axaml    | 17 ++++-
 3 files changed, 44 insertions(+), 58 deletions(-)

diff --git a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
index 59e7353..76934fa 100644
--- a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
@@ -27,10 +27,7 @@
                 </MenuItem>
                 <MenuItem Header="Menu Item with _Checkbox">
                     <MenuItem.Icon>
-                        <CheckBox
-                            BorderThickness="0"
-                            IsChecked="True"
-                            IsHitTestVisible="False" />
+                        <TextBlock>😊</TextBlock>
                     </MenuItem.Icon>
                 </MenuItem>
             </MenuItem>
diff --git a/src/Semi.Avalonia/Controls/Menu.axaml b/src/Semi.Avalonia/Controls/Menu.axaml
index b518470..4cb55e0 100644
--- a/src/Semi.Avalonia/Controls/Menu.axaml
+++ b/src/Semi.Avalonia/Controls/Menu.axaml
@@ -107,11 +107,11 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type MenuItem}" TargetType="MenuItem">
-        <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackground}" />
-        <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForeground}" />
+        <Setter Property="Background" Value="{DynamicResource MenuItemBackground}" />
+        <Setter Property="Foreground" Value="{DynamicResource MenuItemForeground}" />
+        <Setter Property="MenuItem.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 MenuFlyoutItemThemePaddingNarrow}" />
-        <Setter Property="FontSize" Value="{DynamicResource ControlContentThemeFontSize}" />
+        <Setter Property="Padding" Value="{DynamicResource MenuItemPadding}" />
         <Setter Property="Template">
             <ControlTemplate>
                 <Panel>
@@ -132,12 +132,13 @@
 
                             <Viewbox
                                 Name="PART_IconPresenter"
-                                Width="16"
-                                Height="16"
-                                Margin="{DynamicResource MenuIconPresenterMargin}"
+                                Width="12"
+                                Height="12"
+                                Margin="{DynamicResource MenuItemIconMargin}"
                                 HorizontalAlignment="Center"
                                 VerticalAlignment="Center"
                                 IsVisible="False"
+                                Stretch="UniformToFill"
                                 StretchDirection="DownOnly">
                                 <ContentPresenter Content="{TemplateBinding Icon}" />
                             </Viewbox>
@@ -152,23 +153,21 @@
                             <TextBlock
                                 x:Name="PART_InputGestureText"
                                 Grid.Column="2"
-                                Margin="{DynamicResource MenuInputGestureTextMargin}"
+                                Margin="{DynamicResource MenuItemInputGestureTextMargin}"
                                 HorizontalAlignment="Right"
                                 VerticalAlignment="Center"
-                                Classes="CaptionTextBlockStyle"
-                                Foreground="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForeground}"
+                                Foreground="{DynamicResource MenuItemInputGestureTextForeground}"
                                 Text="{TemplateBinding InputGesture,
                                                        Converter={StaticResource KeyGestureConverter}}" />
-                            <Path
-                                Name="PART_ChevronPath"
+                            <PathIcon
+                                Name="PART_ExpandIcon"
                                 Grid.Column="3"
                                 Width="8"
-                                Height="16"
-                                Margin="{DynamicResource MenuFlyoutItemChevronMargin}"
+                                Height="8"
+                                Margin="{DynamicResource MenuItemExpandIconMargin}"
                                 VerticalAlignment="Center"
-                                Data="{DynamicResource MenuItemChevronPathData}"
-                                Fill="{DynamicResource MenuFlyoutSubItemChevron}"
-                                Stretch="Uniform" />
+                                Data="{DynamicResource MenuItemExpandIconGlyph}"
+                                Foreground="{DynamicResource MenuItemExpandIconForeground}" />
                         </Grid>
                     </Border>
                     <Popup
@@ -213,53 +212,32 @@
 
         <Style Selector="^:selected">
             <Style Selector="^ /template/ Border#PART_LayoutRoot">
-                <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPointerOver}" />
-            </Style>
-            <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPointerOver}" />
-            </Style>
-            <Style Selector="^ /template/ TextBlock#PART_InputGestureText">
-                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPointerOver}" />
-            </Style>
-            <Style Selector="^ /template/ Path#PART_ChevronPath">
-                <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronPointerOver}" />
+                <Setter Property="Background" Value="{DynamicResource MenuItemPointeroverBackground}" />
             </Style>
         </Style>
 
         <!--  Listen for PART_LayoutRoot:pointerover, so it will not be triggered when subitem is pressed  -->
         <Style Selector="^:pressed /template/ Border#PART_LayoutRoot:pointerover">
-            <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundPressed}" />
-            <Style Selector="^ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundPressed}" />
-            </Style>
-            <Style Selector="^ TextBlock#PART_InputGestureText">
-                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundPressed}" />
-            </Style>
-            <Style Selector="^ Path#PART_ChevronPath">
-                <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronPressed}" />
-            </Style>
+            <Setter Property="Background" Value="{DynamicResource MenuItemPressedBackground}" />
         </Style>
 
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ Border#PART_LayoutRoot">
-                <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundDisabled}" />
-            </Style>
             <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundDisabled}" />
+                <Setter Property="Foreground" Value="{DynamicResource MenuItemDisabledForeground}" />
             </Style>
             <Style Selector="^ /template/ TextBlock#PART_InputGestureText">
-                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemKeyboardAcceleratorTextForegroundDisabled}" />
+                <Setter Property="Foreground" Value="{DynamicResource MenuItemDisabledInputGestureTextForeground}" />
             </Style>
-            <Style Selector="^ /template/ Path#PART_ChevronPath">
-                <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronDisabled}" />
+            <Style Selector="^ /template/ PathIcon#PART_ExpandIcon">
+                <Setter Property="Foreground" Value="{DynamicResource MenuItemDisabledExpandIconForeground}" />
             </Style>
         </Style>
 
-        <Style Selector="^:open /template/ Path#PART_ChevronPath">
-            <Setter Property="Fill" Value="{DynamicResource MenuFlyoutSubItemChevronSubMenuOpened}" />
+        <Style Selector="^:open /template/ PathIcon#PART_ExpandIcon">
+            <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutSubItemChevronSubMenuOpened}" />
         </Style>
 
-        <Style Selector="^:empty /template/ Path#PART_ChevronPath">
+        <Style Selector="^:empty /template/ PathIcon#PART_ExpandIcon">
             <Setter Property="IsVisible" Value="False" />
         </Style>
 
@@ -275,8 +253,9 @@
     <ControlTheme x:Key="TopLevelMenuItem" TargetType="MenuItem">
         <Setter Property="Background" Value="{DynamicResource MenuItemBackground}" />
         <Setter Property="Foreground" Value="{DynamicResource MenuItemForeground}" />
+        <Setter Property="MenuItem.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 MenuItemTopLevelPadding}" />
+        <Setter Property="Padding" Value="{DynamicResource MenuItemPadding}" />
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
@@ -341,11 +320,8 @@
         </Style>
 
         <Style Selector="^:disabled">
-            <Style Selector="^ /template/ Border#PART_LayoutRoot">
-                <Setter Property="Background" Value="{DynamicResource MenuFlyoutItemBackgroundDisabled}" />
-            </Style>
             <Style Selector="^ /template/ ContentPresenter#PART_HeaderPresenter">
-                <Setter Property="Foreground" Value="{DynamicResource MenuFlyoutItemForegroundDisabled}" />
+                <Setter Property="Foreground" Value="{DynamicResource MenuItemDisabledForeground}" />
             </Style>
         </Style>
     </ControlTheme>
diff --git a/src/Semi.Avalonia/Themes/Light/Menu.axaml b/src/Semi.Avalonia/Themes/Light/Menu.axaml
index f970dbf..2f5ebc2 100644
--- a/src/Semi.Avalonia/Themes/Light/Menu.axaml
+++ b/src/Semi.Avalonia/Themes/Light/Menu.axaml
@@ -6,6 +6,7 @@
 
     <PathGeometry x:Key="MenuScrollViewerUpButtonGlyph">M19.637 16.4369C19.0513 17.0227 18.1015 17.0227 17.5157 16.4369L11.8589 10.7801L6.20202 16.4369C5.61623 17.0227 4.66648 17.0227 4.0807 16.4369C3.49491 15.8511 3.49491 14.9014 4.0807 14.3156L10.7982 7.59809C11.384 7.01231 12.3337 7.01231 12.9195 7.59809L19.637 14.3156C20.2228 14.9014 20.2228 15.8511 19.637 16.4369Z</PathGeometry>
     <PathGeometry x:Key="MenuScrollViewerDownButtonGlyph">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</PathGeometry>
+    <PathGeometry x:Key="MenuItemExpandIconGlyph">M7.43934 19.7957C6.85355 19.2099 6.85355 18.2601 7.43934 17.6744L13.0962 12.0175L7.43934 6.36065C6.85355 5.77486 6.85355 4.82511 7.43934 4.23933C8.02513 3.65354 8.97487 3.65354 9.56066 4.23933L16.2782 10.9568C16.864 11.5426 16.864 12.4924 16.2782 13.0782L9.56066 19.7957C8.97487 20.3815 8.02513 20.3815 7.43934 19.7957Z</PathGeometry>
     <SolidColorBrush x:Key="MenuFlyoutScrollViewerIconForeground" Opacity="0.62" Color="#1C1F23" />
 
     <!--  MenuFlyout  -->
@@ -21,13 +22,25 @@
     <sys:Double x:Key="MenuFlyoutMaxWidth">600</sys:Double>
 
     <!--  MenuItem  -->
-    <SolidColorBrush x:Key="MenuItemBackground" Color="Transparent" />
+    <SolidColorBrush x:Key="MenuItemBackground" Color="White" />
     <SolidColorBrush x:Key="MenuItemForeground" Color="#1C1F23" />
-    <Thickness x:Key="MenuItemTopLevelPadding">8 4</Thickness>
+    <Thickness x:Key="MenuItemPadding">8 4</Thickness>
 
     <SolidColorBrush x:Key="MenuItemSeparatorBackground" Opacity="0.08" Color="#1C1F23" />
     <sys:Double x:Key="MenuItemSeparatorHeight">1</sys:Double>
     <Thickness x:Key="MenuItemSeparatorMargin">2</Thickness>
     <SolidColorBrush x:Key="MenuItemPointeroverBackground" Opacity="0.05" Color="#2E3238" />
     <SolidColorBrush x:Key="MenuItemPressedBackground" Opacity="0.09" Color="#2E3238" />
+
+    <Thickness x:Key="MenuItemIconMargin">0 0 12 0</Thickness>
+    <Thickness x:Key="MenuItemInputGestureTextMargin">4 0</Thickness>
+
+    <SolidColorBrush x:Key="MenuItemInputGestureTextForeground" Color="Gray" />
+    <SolidColorBrush x:Key="MenuItemExpandIconForeground" Opacity="0.62" Color="#1C1F23" />
+    <Thickness x:Key="MenuItemExpandIconMargin">4 0</Thickness>
+
+    <SolidColorBrush x:Key="MenuItemDisabledForeground" Opacity="0.35" Color="#1C1F23" />
+    <SolidColorBrush x:Key="MenuItemDisabledInputGestureTextForeground" Opacity="0.2" Color="#1C1F23" />
+    <SolidColorBrush x:Key="MenuItemDisabledExpandIconForeground" Opacity="0.35" Color="#1C1F23" />
+
 </ResourceDictionary>

From dfcc8bc9bba894b841bb504426ffb6060b4c3107 Mon Sep 17 00:00:00 2001
From: rabbitism <popmessiah@hotmail.com>
Date: Tue, 24 Jan 2023 12:42:55 +0800
Subject: [PATCH 5/5] feat: update context menu and context flyout menu. add
 demos.

---
 demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml  | 51 +++++++++++++++++++
 src/Semi.Avalonia/Controls/ContextMenu.axaml  | 39 ++++++++++++++
 src/Semi.Avalonia/Controls/Controls.axaml     |  1 +
 src/Semi.Avalonia/Controls/Menu.axaml         |  2 -
 .../Controls/MenuFlyoutPresenter.axaml        | 16 ++++--
 5 files changed, 102 insertions(+), 7 deletions(-)
 create mode 100644 src/Semi.Avalonia/Controls/ContextMenu.axaml

diff --git a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
index 76934fa..ab044b7 100644
--- a/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
+++ b/demo/Semi.Avalonia.Demo/Pages/MenuDemo.axaml
@@ -73,5 +73,56 @@
                 <MenuItem Header="Child 19" />
             </MenuItem>
         </Menu>
+        <Border>
+            <Border.ContextMenu>
+                <ContextMenu>
+                    <MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
+                    <MenuItem
+                        Header="_Disabled Menu Item"
+                        InputGesture="Ctrl+D"
+                        IsEnabled="False" />
+                    <Separator />
+                    <MenuItem Header="Menu with _Submenu">
+                        <MenuItem Header="Submenu _1" />
+                        <MenuItem Header="Submenu _2" />
+                    </MenuItem>
+                    <MenuItem Header="Menu Item with _Checkbox">
+                        <MenuItem.Icon>
+                            <CheckBox
+                                BorderThickness="0"
+                                IsChecked="True"
+                                IsHitTestVisible="False" />
+                        </MenuItem.Icon>
+                    </MenuItem>
+                    <MenuItem Header="Menu Item that won't close on click" StaysOpenOnClick="True" />
+                </ContextMenu>
+            </Border.ContextMenu>
+            <TextBlock Text="Context Menu" />
+        </Border>
+        <Border>
+            <Border.ContextFlyout>
+                <MenuFlyout>
+                    <MenuItem Header="Standard _Menu Item" InputGesture="Ctrl+A" />
+                    <MenuItem
+                        Header="_Disabled Menu Item"
+                        InputGesture="Ctrl+D"
+                        IsEnabled="False" />
+                    <Separator />
+                    <MenuItem Header="Menu with _Submenu">
+                        <MenuItem Header="Submenu _1" />
+                        <MenuItem Header="Submenu _2" />
+                    </MenuItem>
+                    <MenuItem Header="Menu Item with _Checkbox">
+                        <MenuItem.Icon>
+                            <CheckBox
+                                BorderThickness="0"
+                                IsChecked="True"
+                                IsHitTestVisible="False" />
+                        </MenuItem.Icon>
+                    </MenuItem>
+                </MenuFlyout>
+            </Border.ContextFlyout>
+            <TextBlock Text="Context Flyout" />
+        </Border>
     </StackPanel>
 </UserControl>
diff --git a/src/Semi.Avalonia/Controls/ContextMenu.axaml b/src/Semi.Avalonia/Controls/ContextMenu.axaml
new file mode 100644
index 0000000..2d8f2c4
--- /dev/null
+++ b/src/Semi.Avalonia/Controls/ContextMenu.axaml
@@ -0,0 +1,39 @@
+<ResourceDictionary xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ControlTheme x:Key="{x:Type ContextMenu}" TargetType="ContextMenu">
+        <Setter Property="ContextMenu.Background" Value="{DynamicResource MenuFlyoutBackground}" />
+        <Setter Property="ContextMenu.BorderBrush" Value="{DynamicResource MenuFlyoutBorderBrush}" />
+        <Setter Property="ContextMenu.BorderThickness" Value="{DynamicResource MenuFlyoutBorderThickness}" />
+        <Setter Property="ContextMenu.CornerRadius" Value="{DynamicResource MenuFlyoutCornerRadius}" />
+        <Setter Property="ContextMenu.MaxWidth" Value="{DynamicResource MenuFlyoutMaxWidth}" />
+        <Setter Property="ContextMenu.MinHeight" Value="{DynamicResource MenuFlyoutMinHeight}" />
+        <Setter Property="ContextMenu.Padding" Value="{DynamicResource MenuFlyoutPadding}" />
+        <Setter Property="ContextMenu.HorizontalAlignment" Value="Stretch" />
+        <Setter Property="TextBlock.FontWeight" Value="Normal" />
+        <Setter Property="ContextMenu.WindowManagerAddShadowHint" Value="False" />
+        <Setter Property="ContextMenu.Template">
+            <ControlTemplate TargetType="ContextMenu">
+                <Border
+                    MinHeight="{TemplateBinding MinHeight}"
+                    MaxWidth="{TemplateBinding MaxWidth}"
+                    Margin="0,4"
+                    Padding="{TemplateBinding Padding}"
+                    HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                    Background="{TemplateBinding Background}"
+                    BorderBrush="{TemplateBinding BorderBrush}"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
+                    <ScrollViewer Theme="{StaticResource MenuScrollViewer}">
+                        <ItemsPresenter
+                            Name="PART_ItemsPresenter"
+                            Grid.IsSharedSizeScope="True"
+                            ItemTemplate="{TemplateBinding ItemTemplate}"
+                            Items="{TemplateBinding Items}"
+                            ItemsPanel="{TemplateBinding ItemsPanel}"
+                            KeyboardNavigation.TabNavigation="Continue" />
+                    </ScrollViewer>
+                </Border>
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+</ResourceDictionary>
diff --git a/src/Semi.Avalonia/Controls/Controls.axaml b/src/Semi.Avalonia/Controls/Controls.axaml
index 3376d8b..adce855 100644
--- a/src/Semi.Avalonia/Controls/Controls.axaml
+++ b/src/Semi.Avalonia/Controls/Controls.axaml
@@ -8,6 +8,7 @@
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/CheckBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ComboBox.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContentControl.axaml" />
+        <ResourceInclude Source="avares://Semi.Avalonia/Controls/ContextMenu.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/Expander.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/FlyoutPresenter.axaml" />
         <ResourceInclude Source="avares://Semi.Avalonia/Controls/ItemsControl.axaml" />
diff --git a/src/Semi.Avalonia/Controls/Menu.axaml b/src/Semi.Avalonia/Controls/Menu.axaml
index 4cb55e0..e2baad4 100644
--- a/src/Semi.Avalonia/Controls/Menu.axaml
+++ b/src/Semi.Avalonia/Controls/Menu.axaml
@@ -194,7 +194,6 @@
                             <ScrollViewer Theme="{StaticResource MenuScrollViewer}">
                                 <ItemsPresenter
                                     Name="PART_ItemsPresenter"
-                                    Margin="{DynamicResource MenuFlyoutScrollerMargin}"
                                     Grid.IsSharedSizeScope="True"
                                     ItemTemplate="{TemplateBinding ItemTemplate}"
                                     Items="{TemplateBinding Items}"
@@ -295,7 +294,6 @@
                                 <ScrollViewer Padding="{DynamicResource MenuFlyoutPadding}" Theme="{StaticResource MenuScrollViewer}">
                                     <ItemsPresenter
                                         Name="PART_ItemsPresenter"
-                                        Margin="{DynamicResource MenuFlyoutScrollerMargin}"
                                         Grid.IsSharedSizeScope="True"
                                         ItemTemplate="{TemplateBinding ItemTemplate}"
                                         Items="{TemplateBinding Items}"
diff --git a/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml b/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
index 6cae984..368107f 100644
--- a/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
+++ b/src/Semi.Avalonia/Controls/MenuFlyoutPresenter.axaml
@@ -13,12 +13,18 @@
             <ControlTemplate TargetType="MenuFlyoutPresenter">
                 <Border
                     Name="LayoutRoot"
-                    Padding="{DynamicResource FlyoutBorderThemePadding}"
-                    Background="{TemplateBinding Background}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    BorderThickness="{TemplateBinding BorderThickness}"
+                    MinWidth="{DynamicResource MenuFlyoutMinWidth}"
+                    MinHeight="{DynamicResource MenuFlyoutMinHeight}"
+                    MaxWidth="{DynamicResource MenuFlyoutMaxWidth}"
+                    MaxHeight="{DynamicResource MenuFlyoutMaxHeight}"
+                    Margin="0,4"
+                    Padding="{DynamicResource MenuFlyoutPadding}"
+                    HorizontalAlignment="Stretch"
+                    Background="{DynamicResource MenuFlyoutBackground}"
+                    BorderBrush="{DynamicResource MenuFlyoutBorderBrush}"
+                    BorderThickness="{DynamicResource MenuFlyoutBorderThickness}"
                     BoxShadow="{DynamicResource MenuFlyoutBorderBoxShadow}"
-                    CornerRadius="{TemplateBinding CornerRadius}">
+                    CornerRadius="{DynamicResource MenuFlyoutCornerRadius}">
                     <ScrollViewer
                         HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                         Theme="{StaticResource MenuScrollViewer}"