[MacOS] Add pointerover behaviours for main MenuItems with Icon & Label side-by-side (#112)

Author: apman

samples/SampleApp/DemoPages/MenuDemo.axaml

@@ -14,11 +14,11 @@
     </Style>
 
     <Style Selector="Menu.Icons25 > MenuItem">
-      <Style Selector="^ ContentPresenter#PART_HeaderPresenter">
+      <Style Selector="^ ContentPresenter#PART_HeaderPresenter.TopLevelMenuItem">
         <Setter Property="MinWidth" Value="56" />
-        <Setter Property="MaxWidth" Value="56" />
+        <Setter Property="MaxWidth" Value="66" />
       </Style>
-      <Style Selector="^.LongTitle ContentPresenter#PART_HeaderPresenter">
+      <Style Selector="^.LongTitle ContentPresenter#PART_HeaderPresenter.TopLevelMenuItem">
         <Setter Property="MaxWidth" Value="75" />
       </Style>
       <Style Selector="^ Svg">
@@ -28,7 +28,7 @@
     </Style>
 
     <Style Selector="Menu.Icons15 > MenuItem">
-      <Style Selector="^ ContentPresenter#PART_HeaderPresenter">
+      <Style Selector="^ ContentPresenter#PART_HeaderPresenter.TopLevelMenuItem">
         <Setter Property="MinWidth" Value="44" />
         <Setter Property="MaxWidth" Value="66" />
       </Style>
@@ -106,13 +106,15 @@
                 <MenuItem.Icon>
                   <Svg Path="/Assets/Details.svg" />
                 </MenuItem.Icon>
+                <MenuItem Header="Menu Item 1" />
+                <MenuItem Header="Menu Item" />
               </MenuItem>
               <MenuItem Header="-" />
               <MenuItem Header="Copy name">
                 <MenuItem.Icon>
                   <Svg Path="/Assets/CopyName.svg" />
                 </MenuItem.Icon>
-                <MenuItem Header="Menu Item" />
+                <MenuItem Header="Longer Menu Item" />
                 <MenuItem Header="Menu Item" />
               </MenuItem>
 
@@ -129,13 +131,20 @@
             </Menu>
             <Menu Name="SmallToolbar" DockPanel.Dock="Right" VerticalAlignment="Center" HorizontalAlignment="Right"
                   Classes="MacOS_Theme_MenuLabelBelowIcon Icons15">
-              <MenuItem Header="Group" IsEnabled="False">
+              <MenuItem Header="Testing" IsEnabled="False">
                 <MenuItem.Icon>
                   <Svg Path="/Assets/EnableUser.svg" />
                 </MenuItem.Icon>
                 <MenuItem Header="Menu Item" />
                 <MenuItem Header="Menu Item" />
               </MenuItem>
+              <MenuItem Header="Group">
+                <MenuItem.Icon>
+                  <Svg Path="/Assets/EnableUser.svg" />
+                </MenuItem.Icon>
+                <MenuItem Header="Longer Menu Item" />
+                <MenuItem Header="Menu Item" />
+              </MenuItem>
               <MenuItem Header="Share">
                 <MenuItem.Icon>
                   <Svg Path="/Assets/DisableUser.svg" />
@@ -211,7 +220,9 @@
               • <TextBlock Classes="code" Text="MacOS_Theme_MenuItemIconOnly" /> for a toolbar-style menu without labels (Header content appears in a ToolTip instead)
               <LineBreak /><LineBreak />
               • <TextBlock Classes="code" Text="MacOS_Theme_MenuOpensAbove" /> for bottom-placed menus, opening upwards
-              <LineBreak />
+              <LineBreak /><LineBreak />
+              • <TextBlock Classes="code" Text="ContentPresenter#PART_HeaderPresenter" /> of the top-level menu items has a class
+              <TextBlock Classes="code" Text="TopLevelMenuItem" /> attached that allows easier styling without affecting sub-menu items. E.g. setting MaxWidth to force long names to wrap
             </TextBlock>
           </Border>
         </DockPanel>

src/Devolutions.AvaloniaTheme.MacOS/Accents/ThemeResources.axaml

@@ -372,7 +372,8 @@
   <x:Double x:Key="MenuFlyoutSubItemPopupHorizontalOffset">-14</x:Double>
   <x:Double x:Key="MenuFlyoutSubItemPopupVerticalOffset">-7</x:Double>
   <x:Double x:Key="MenuPopupHorizontalOffset">-12</x:Double>
-  <x:Double x:Key="MenuPopupBelowVerticalOffset">-10</x:Double>
+  <x:Double x:Key="MenuPopupVerticalOffset">6</x:Double>
+  <x:Double x:Key="MenuToolBarPopupVerticalOffset">-10</x:Double>
   <x:Double x:Key="MenuPopupAboveVerticalOffset">-5</x:Double>
   <Thickness x:Key="MenuPopupAboveMargin">12 1 12 2</Thickness>
   <Thickness x:Key="MenuBarPadding">6</Thickness>
@@ -384,6 +385,7 @@
   <Thickness x:Key="MenuToolBarItemPadding">4 0 4 4</Thickness>
   <Thickness x:Key="MenuToolBarItemIconPadding">10 5 8 5</Thickness>
   <Thickness x:Key="MenuToolBarItemActiveBackgroundMargin">-10 -3 -8 -3</Thickness>
+  <Thickness x:Key="MenuItemActiveBackgroundMargin">-6,-2,-7,-2</Thickness>
   <Thickness x:Key="MenuItemIconPadding">0</Thickness>
   <SolidColorBrush x:Key="SeparatorBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.2" />
   <SolidColorBrush x:Key="SvgIconDisabledColorBrush" Color="{DynamicResource SvgIconDisabledColor}" />

src/Devolutions.AvaloniaTheme.MacOS/Controls/Menu.axaml

@@ -60,6 +60,8 @@
     </DockPanel>
   </Design.PreviewWith>
 
+  <!-- TODO: Consider refactoring with separate ControlThemes for the different Menu types 
+       (instead of multiple individual variations on the property level) -->
   <ControlTheme x:Key="FluentTopLevelMenuItem" TargetType="MenuItem">
     <Setter Property="FontSize">
       <Setter.Value>
@@ -92,6 +94,19 @@
                 BorderThickness="{TemplateBinding BorderThickness}"
                 VerticalAlignment="Top">
           <Panel>
+            <Border Name="MenuItemActiveBackground"
+                    Background="Transparent"
+                    CornerRadius="{StaticResource SelectionCornerRadius}"
+                    Margin="{DynamicResource MenuItemActiveBackgroundMargin}">
+              <Border.IsVisible>
+                <MultiBinding Converter="{StaticResource ClassToChoiceConverter}"
+                              ConverterParameter="MacOS_Theme_MenuLabelBelowIcon">
+                  <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Menu}" Path="Classes" />
+                  <Binding Source="{x:False}" />
+                  <Binding Source="{x:True}" />
+                </MultiBinding>
+              </Border.IsVisible>
+            </Border>
             <StackPanel>
               <StackPanel.Orientation>
                 <MultiBinding Converter="{StaticResource ClassToChoiceConverter}"
@@ -113,7 +128,7 @@
                   </MultiBinding>
                 </Border.Padding>
                 <Panel>
-                  <Border Name="ItemActiveBackground"
+                  <Border Name="ToolBarItemActiveBackground"
                           Background="Transparent"
                           CornerRadius="{StaticResource SelectionCornerRadius}"
                           Margin="{DynamicResource MenuToolBarItemActiveBackgroundMargin}">
@@ -180,7 +195,8 @@
                                 TextWrapping="Wrap"
                                 HorizontalContentAlignment="Center"
                                 TextAlignment="Center"
-                                RecognizesAccessKey="True">
+                                RecognizesAccessKey="True"
+                                Classes="TopLevelMenuItem">
                 <ContentPresenter.IsVisible>
                   <MultiBinding Converter="{StaticResource ClassToChoiceConverter}"
                                 ConverterParameter="MacOS_Theme_MenuItemIconOnly">
@@ -199,8 +215,15 @@
                    IsOpen="{TemplateBinding IsSubMenuOpen, Mode=TwoWay}"
                    Placement="BottomEdgeAlignedLeft"
                    HorizontalOffset="{DynamicResource MenuPopupHorizontalOffset}"
-                   VerticalOffset="{DynamicResource MenuPopupBelowVerticalOffset}"
                    OverlayInputPassThroughElement="{Binding $parent[Menu]}">
+              <Popup.VerticalOffset>
+                <MultiBinding Converter="{StaticResource ClassToChoiceConverter}"
+                              ConverterParameter="MacOS_Theme_MenuLabelBelowIcon">
+                  <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Menu}" Path="Classes" />
+                  <Binding Source="{StaticResource MenuToolBarPopupVerticalOffset}" />
+                  <Binding Source="{StaticResource MenuPopupVerticalOffset}" />
+                </MultiBinding>
+              </Popup.VerticalOffset>
               <Border Margin="{StaticResource PopupMargin} "
                       Background="{DynamicResource PopupBackgroundBrush}"
                       BorderBrush="{DynamicResource MenuFlyoutPresenterBorderBrush}"
@@ -248,18 +271,30 @@
     </Style>
 
     <Style Selector="^:open, ^:pointerover">
-      <Style Selector="^ /template/ Border#ItemActiveBackground">
+      <Style Selector="^ /template/ Border#MenuItemActiveBackground">
+        <Setter Property="Background" Value="{DynamicResource LayoutBackgroundMidBrush}" />
+      </Style>
+    </Style>
+
+    <Style Selector="^:pressed">
+      <Style Selector="^ /template/ Border#MenuItemActiveBackground">
+        <Setter Property="Background" Value="{DynamicResource LayoutBackgroundHighBrush}" />
+      </Style>
+    </Style>
+
+    <Style Selector="^:open, ^:pointerover">
+      <Style Selector="^ /template/ Border#ToolBarItemActiveBackground">
         <Setter Property="Background" Value="{DynamicResource LayoutBackgroundMidBrush}" />
       </Style>
     </Style>
 
     <Style Selector="^:pressed">
-      <Style Selector="^ /template/ Border#ItemActiveBackground">
+      <Style Selector="^ /template/ Border#ToolBarItemActiveBackground">
         <Setter Property="Background" Value="{DynamicResource LayoutBackgroundHighBrush}" />
       </Style>
     </Style>
 
-    <Style Selector="^:empty /template/ Border#ItemActiveBackground">
+    <Style Selector="^:empty /template/ Border#ToolBarItemActiveBackground">
       <Setter Property="Margin" Value="-13 -4" />
     </Style>