Skip to content

Commit 64a7f21

Browse files
authored
Add pointerover behaviours to main MenuItems (#111)
1 parent b4e0713 commit 64a7f21

File tree

5 files changed

+90
-60
lines changed

5 files changed

+90
-60
lines changed

samples/SampleApp/App.axaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44

55
<Application.Styles>
66
<!-- <FluentTheme /> -->
7-
<!-- <StyleInclude Source="avares://Devolutions.AvaloniaTheme.MacOS/MacOSTheme.axaml" /> -->
8-
<StyleInclude Source="avares://Devolutions.AvaloniaTheme.DevExpress/DevExpressTheme.axaml" />
7+
<StyleInclude Source="avares://Devolutions.AvaloniaTheme.MacOS/MacOSTheme.axaml" />
8+
<!-- <StyleInclude Source="avares://Devolutions.AvaloniaTheme.DevExpress/DevExpressTheme.axaml" /> -->
99
<StyleInclude Source="/Styles.axaml" />
1010
</Application.Styles>
1111
</Application>

samples/SampleApp/DemoPages/MenuDemo.axaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</Style>
1515

1616
<Style Selector="Menu.Icons25 > MenuItem">
17-
<Style Selector="^ > ContentPresenter#PART_HeaderPresenter">
17+
<Style Selector="^ ContentPresenter#PART_HeaderPresenter">
1818
<Setter Property="MinWidth" Value="56" />
1919
<Setter Property="MaxWidth" Value="56" />
2020
</Style>
@@ -28,7 +28,7 @@
2828
</Style>
2929

3030
<Style Selector="Menu.Icons15 > MenuItem">
31-
<Style Selector="^ > ContentPresenter#PART_HeaderPresenter">
31+
<Style Selector="^ ContentPresenter#PART_HeaderPresenter">
3232
<Setter Property="MinWidth" Value="44" />
3333
<Setter Property="MaxWidth" Value="66" />
3434
</Style>

samples/SampleApp/MainWindow.axaml

+2-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
</demoPages:DataGridDemo.DataContext>
3838
</demoPages:DataGridDemo>
3939
</TabItem>
40-
<TabItem Header="Menu">
40+
<TabItem Header="Menu" IsSelected="True">
4141
<demoPages:MenuDemo />
4242
</TabItem>
4343
<TabItem Header="GridSplitter">
@@ -46,7 +46,7 @@
4646
<TabItem Header="MenuFlyout">
4747
<demoPages:MenuFlyoutDemo />
4848
</TabItem>
49-
<TabItem Header="NumericUpDown" IsSelected="True">
49+
<TabItem Header="NumericUpDown">
5050
<demoPages:NumericUpDownDemo />
5151
</TabItem>
5252
<TabItem Header="ScrollViewer">

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

+5-3
Original file line numberDiff line numberDiff line change
@@ -372,17 +372,19 @@
372372
<x:Double x:Key="MenuFlyoutSubItemPopupHorizontalOffset">-14</x:Double>
373373
<x:Double x:Key="MenuFlyoutSubItemPopupVerticalOffset">-7</x:Double>
374374
<x:Double x:Key="MenuPopupHorizontalOffset">-12</x:Double>
375-
<x:Double x:Key="MenuPopupBelowVerticalOffset">6</x:Double>
375+
<x:Double x:Key="MenuPopupBelowVerticalOffset">-10</x:Double>
376376
<x:Double x:Key="MenuPopupAboveVerticalOffset">-5</x:Double>
377377
<Thickness x:Key="MenuPopupAboveMargin">12 1 12 2</Thickness>
378378
<Thickness x:Key="MenuBarPadding">6</Thickness>
379379
<Thickness x:Key="MenuFlyoutPadding">5 2 5 2</Thickness>
380380
<Thickness x:Key="MenuFlyoutSeparatorThemePadding">8,5,8,5</Thickness>
381381
<Thickness x:Key="MenuIconPresenterMargin">0,0,4,0</Thickness>
382382
<Thickness x:Key="MenuInputGestureTextMargin">24,0,0,0</Thickness>
383-
<Thickness x:Key="MenuTextBelowIconMargin">0 4 0 0</Thickness>
384383
<Thickness x:Key="MenuItemPadding">9 4 7 2</Thickness>
385-
<Thickness x:Key="MenuToolBarItemPadding">4</Thickness>
384+
<Thickness x:Key="MenuToolBarItemPadding">4 0 4 4</Thickness>
385+
<Thickness x:Key="MenuToolBarItemIconPadding">10 5 8 5</Thickness>
386+
<Thickness x:Key="MenuToolBarItemActiveBackgroundMargin">-10 -3 -8 -3</Thickness>
387+
<Thickness x:Key="MenuItemIconPadding">0</Thickness>
386388
<SolidColorBrush x:Key="SeparatorBrush" Color="{DynamicResource ForegroundColor}" Opacity="0.2" />
387389
<SolidColorBrush x:Key="SvgIconDisabledColorBrush" Color="{DynamicResource SvgIconDisabledColor}" />
388390
<Thickness x:Key="MenuFlyoutScrollerMargin">0,4,0,4</Thickness>

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

+79-51
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@
9090
Background="{TemplateBinding Background}"
9191
BorderBrush="{TemplateBinding BorderBrush}"
9292
BorderThickness="{TemplateBinding BorderThickness}"
93-
CornerRadius="{StaticResource SelectionCornerRadius}"
9493
VerticalAlignment="Top">
9594
<Panel>
9695
<StackPanel>
@@ -102,49 +101,75 @@
102101
<Binding Source="{x:Static Orientation.Horizontal}" />
103102
</MultiBinding>
104103
</StackPanel.Orientation>
105-
<StackPanel
106-
Orientation="Horizontal"
107-
VerticalAlignment="Center"
108-
HorizontalAlignment="Center"
109-
ToolTip.Tip="{TemplateBinding Header}">
110-
<ContentPresenter Name="PART_IconPresenter"
111-
Content="{TemplateBinding Icon}">
112-
<ToolTip.ServiceEnabled>
113-
<MultiBinding Converter="{StaticResource ClassToChoiceConverter}"
114-
ConverterParameter="MacOS_Theme_MenuItemIconOnly">
115-
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Menu}" Path="Classes" />
116-
<Binding Source="{x:True}" />
117-
<Binding Source="{x:False}" />
118-
</MultiBinding>
119-
</ToolTip.ServiceEnabled>
120-
</ContentPresenter>
121-
<Panel Name="PART_ChevronPanel">
122-
<Border Name="PART_ChevronBorder" Margin="3 0 0 0 ">
123-
<Path Name="PART_ChevronPath"
124-
Data="{StaticResource ChevronPath}"
125-
Width="{StaticResource TreeViewItemChevronSize}"
126-
Height="{StaticResource TreeViewItemChevronSize}"
127-
Fill="{TemplateBinding Foreground}"
128-
Stretch="Uniform"
129-
HorizontalAlignment="Center"
130-
VerticalAlignment="Center">
131-
<Path.RenderTransform>
132-
<TransformGroup>
133-
<RotateTransform Angle="180" />
134-
</TransformGroup>
135-
</Path.RenderTransform>
136-
<Path.IsVisible>
137-
<MultiBinding Converter="{StaticResource ClassToChoiceConverter}"
138-
ConverterParameter="MacOS_Theme_MenuLabelBelowIcon">
139-
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Menu}" Path="Classes" />
140-
<Binding Source="{x:True}" />
141-
<Binding Source="{x:False}" />
142-
</MultiBinding>
143-
</Path.IsVisible>
144-
</Path>
104+
<Border Name="FlexiblePaddingIconBorder"
105+
HorizontalAlignment="Center"
106+
Background="Transparent">
107+
<Border.Padding>
108+
<MultiBinding Converter="{StaticResource ClassToChoiceConverter}"
109+
ConverterParameter="MacOS_Theme_MenuLabelBelowIcon">
110+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Menu}" Path="Classes" />
111+
<Binding Source="{StaticResource MenuToolBarItemIconPadding}" />
112+
<Binding Source="{StaticResource MenuItemIconPadding}" />
113+
</MultiBinding>
114+
</Border.Padding>
115+
<Panel>
116+
<Border Name="ItemActiveBackground"
117+
Background="Transparent"
118+
CornerRadius="{StaticResource SelectionCornerRadius}"
119+
Margin="{DynamicResource MenuToolBarItemActiveBackgroundMargin}">
120+
<Border.IsVisible>
121+
<MultiBinding Converter="{StaticResource ClassToChoiceConverter}"
122+
ConverterParameter="MacOS_Theme_MenuLabelBelowIcon">
123+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Menu}" Path="Classes" />
124+
<Binding Source="{x:True}" />
125+
<Binding Source="{x:False}" />
126+
</MultiBinding>
127+
</Border.IsVisible>
145128
</Border>
129+
<StackPanel
130+
Orientation="Horizontal"
131+
VerticalAlignment="Center"
132+
HorizontalAlignment="Center"
133+
ToolTip.Tip="{TemplateBinding Header}">
134+
<ToolTip.ServiceEnabled>
135+
<MultiBinding Converter="{StaticResource ClassToChoiceConverter}"
136+
ConverterParameter="MacOS_Theme_MenuItemIconOnly">
137+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Menu}" Path="Classes" />
138+
<Binding Source="{x:True}" />
139+
<Binding Source="{x:False}" />
140+
</MultiBinding>
141+
</ToolTip.ServiceEnabled>
142+
<ContentPresenter Name="PART_IconPresenter"
143+
Content="{TemplateBinding Icon}" />
144+
<Panel Name="PART_ChevronPanel">
145+
<Border Name="PART_ChevronBorder" Margin="3 0 0 0 ">
146+
<Path Name="PART_ChevronPath"
147+
Data="{StaticResource ChevronPath}"
148+
Width="{StaticResource TreeViewItemChevronSize}"
149+
Height="{StaticResource TreeViewItemChevronSize}"
150+
Fill="{TemplateBinding Foreground}"
151+
Stretch="Uniform"
152+
HorizontalAlignment="Center"
153+
VerticalAlignment="Center">
154+
<Path.RenderTransform>
155+
<TransformGroup>
156+
<RotateTransform Angle="180" />
157+
</TransformGroup>
158+
</Path.RenderTransform>
159+
<Path.IsVisible>
160+
<MultiBinding Converter="{StaticResource ClassToChoiceConverter}"
161+
ConverterParameter="MacOS_Theme_MenuLabelBelowIcon">
162+
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Menu}" Path="Classes" />
163+
<Binding Source="{x:True}" />
164+
<Binding Source="{x:False}" />
165+
</MultiBinding>
166+
</Path.IsVisible>
167+
</Path>
168+
</Border>
169+
</Panel>
170+
</StackPanel>
146171
</Panel>
147-
</StackPanel>
172+
</Border>
148173
<ContentPresenter Name="PART_HeaderPresenter"
149174
Content="{TemplateBinding Header}"
150175
ContentTemplate="{TemplateBinding HeaderTemplate}"
@@ -164,13 +189,6 @@
164189
<Binding Source="{x:True}" />
165190
</MultiBinding>
166191
</ContentPresenter.IsVisible>
167-
<ContentPresenter.Margin>
168-
<MultiBinding Converter="{StaticResource ClassToChoiceConverter}"
169-
ConverterParameter="MacOS_Theme_MenuLabelBelowIcon">
170-
<Binding RelativeSource="{RelativeSource FindAncestor, AncestorType=Menu}" Path="Classes" />
171-
<Binding Source="{StaticResource MenuTextBelowIconMargin }" />
172-
</MultiBinding>
173-
</ContentPresenter.Margin>
174192
</ContentPresenter>
175193

176194
</StackPanel>
@@ -229,12 +247,22 @@
229247
</Setter>
230248
</Style>
231249

232-
<Style Selector="^:open">
233-
<Style Selector="^ /template/ Border#PART_LayoutRoot">
250+
<Style Selector="^:open, ^:pointerover">
251+
<Style Selector="^ /template/ Border#ItemActiveBackground">
234252
<Setter Property="Background" Value="{DynamicResource LayoutBackgroundMidBrush}" />
235253
</Style>
236254
</Style>
237255

256+
<Style Selector="^:pressed">
257+
<Style Selector="^ /template/ Border#ItemActiveBackground">
258+
<Setter Property="Background" Value="{DynamicResource LayoutBackgroundHighBrush}" />
259+
</Style>
260+
</Style>
261+
262+
<Style Selector="^:empty /template/ Border#ItemActiveBackground">
263+
<Setter Property="Margin" Value="-13 -4" />
264+
</Style>
265+
238266
<Style Selector="^:empty /template/ Panel#PART_ChevronPanel">
239267
<Setter Property="IsVisible" Value="False" />
240268
</Style>

0 commit comments

Comments
 (0)