Skip to content

Commit 2d06d3a

Browse files
ElieTaillardElieTaillard
authored
Better control of menu height (#2657)
* add menu assist class * change int to double + test * working property * restructuring demo
1 parent 70d2336 commit 2d06d3a

File tree

3 files changed

+176
-70
lines changed

3 files changed

+176
-70
lines changed

‎MainDemo.Wpf/MenusAndToolBars.xaml

Lines changed: 151 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,16 @@
99
mc:Ignorable="d"
1010
d:DesignHeight="300"
1111
d:DesignWidth="300">
12-
<DockPanel>
12+
<StackPanel Margin="15">
13+
<TextBlock
14+
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
15+
Text="Default Menu"
16+
Margin="0 0 0 20"/>
17+
1318
<smtx:XamlDisplay
1419
UniqueKey="menus_1"
15-
DockPanel.Dock="Top"
16-
Margin="5 5 0 15">
17-
<Menu IsMainMenu="True" Height="48">
20+
HorizontalAlignment="Left">
21+
<Menu>
1822
<MenuItem Header="_File">
1923
<MenuItem
2024
Header="Save"
@@ -77,54 +81,128 @@
7781
</Menu>
7882
</smtx:XamlDisplay>
7983

84+
<Separator Margin="0 20" Style="{DynamicResource MaterialDesignSeparator}"/>
85+
86+
<TextBlock
87+
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
88+
Text="Menu with custom Height"
89+
Margin="0 0 0 20"/>
90+
8091
<smtx:XamlDisplay
81-
UniqueKey="bigMenu"
82-
DockPanel.Dock="Top"
83-
Margin="5 5 0 5">
84-
<materialDesign:Card Height="80">
85-
<Menu>
86-
<MenuItem Header="Big">
87-
<MenuItem Header="Test 1"/>
88-
<MenuItem Header="Test 1"/>
89-
<MenuItem Header="Test 1"/>
90-
</MenuItem>
91-
<MenuItem Header="Menu">
92-
<MenuItem Header="Test 1"/>
93-
<MenuItem Header="Test 1"/>
94-
<MenuItem Header="Test 1"/>
95-
</MenuItem>
96-
<MenuItem Header="In Color" Background="{DynamicResource PrimaryHueMidBrush}" Foreground="{DynamicResource PrimaryHueMidForegroundBrush}">
97-
<MenuItem Header="Test 1" Background="{DynamicResource SecondaryHueMidBrush}" Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"/>
98-
<MenuItem Header="Test 1" Background="{DynamicResource SecondaryHueMidBrush}" Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"/>
99-
<MenuItem Header="Test 1" Background="{DynamicResource SecondaryHueMidBrush}" Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"/>
100-
</MenuItem>
101-
</Menu>
102-
</materialDesign:Card>
92+
UniqueKey="customHeightMenu1"
93+
HorizontalAlignment="Left"
94+
Margin="0 0 0 15">
95+
<Menu materialDesign:MenuAssist.TopLevelMenuItemHeight="25">
96+
<MenuItem Header="Small">
97+
<MenuItem Header="Item 1"/>
98+
<MenuItem Header="Item 2"/>
99+
<MenuItem Header="Item 3"/>
100+
</MenuItem>
101+
<MenuItem Header="Menu">
102+
<MenuItem Header="Item 1"/>
103+
<MenuItem Header="Item 2"/>
104+
<MenuItem Header="Item 3"/>
105+
</MenuItem>
106+
</Menu>
103107
</smtx:XamlDisplay>
104108

105109
<smtx:XamlDisplay
106-
UniqueKey="smallMenu"
107-
DockPanel.Dock="Top"
108-
Margin="5 5 0 20">
109-
<materialDesign:Card Height="25">
110-
<Menu>
111-
<MenuItem Header="Small">
112-
<MenuItem Header="Test 1"/>
113-
<MenuItem Header="Test 1"/>
114-
<MenuItem Header="Test 1"/>
115-
</MenuItem>
116-
<MenuItem Header="Menu">
117-
<MenuItem Header="Test 1"/>
118-
<MenuItem Header="Test 1"/>
119-
<MenuItem Header="Test 1"/>
120-
</MenuItem>
121-
</Menu>
122-
</materialDesign:Card>
110+
UniqueKey="customHeightMenu2"
111+
HorizontalAlignment="Left">
112+
<Menu materialDesign:MenuAssist.TopLevelMenuItemHeight="80">
113+
<MenuItem Header="Big">
114+
<MenuItem Header="Item 1"/>
115+
<MenuItem Header="Item 2"/>
116+
<MenuItem Header="Item 3"/>
117+
</MenuItem>
118+
<MenuItem Header="Menu">
119+
<MenuItem Header="Item 1"/>
120+
<MenuItem Header="Item 2"/>
121+
<MenuItem Header="Item 3"/>
122+
</MenuItem>
123+
</Menu>
123124
</smtx:XamlDisplay>
124125

126+
<Separator Margin="0 20" Style="{DynamicResource MaterialDesignSeparator}"/>
127+
128+
<TextBlock
129+
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
130+
Text="Adaptive Menu"
131+
Margin="0 0 0 20"/>
132+
133+
<Grid>
134+
<Grid.RowDefinitions>
135+
<RowDefinition Height="Auto" MinHeight="25"/>
136+
<RowDefinition Height="Auto"/>
137+
<RowDefinition Height="Auto"/>
138+
</Grid.RowDefinitions>
139+
140+
<smtx:XamlDisplay
141+
UniqueKey="adaptiveMenu"
142+
Grid.Row="0"
143+
HorizontalAlignment="Left">
144+
<materialDesign:Card>
145+
<Menu materialDesign:MenuAssist.TopLevelMenuItemHeight="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type materialDesign:Card}},Path=ActualHeight}">
146+
<MenuItem Header="Adaptive">
147+
<MenuItem Header="Item 1"/>
148+
<MenuItem Header="Item 2"/>
149+
<MenuItem Header="Item 3"/>
150+
</MenuItem>
151+
<MenuItem Header="Menu">
152+
<MenuItem Header="Item 1"/>
153+
<MenuItem Header="Item 2"/>
154+
<MenuItem Header="Item 3"/>
155+
</MenuItem>
156+
</Menu>
157+
</materialDesign:Card>
158+
</smtx:XamlDisplay>
159+
<GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" Margin="0 10"/>
160+
<Grid Grid.Row="2">
161+
<StackPanel Orientation="Horizontal">
162+
<materialDesign:PackIcon Kind="Information" Margin="0 0 5 0"/>
163+
<TextBlock>The menu height matches with the parent panel height. Use the splitter to see the adaptive menu in action.</TextBlock>
164+
</StackPanel>
165+
</Grid>
166+
</Grid>
167+
168+
<Separator Margin="0 20" Style="{DynamicResource MaterialDesignSeparator}"/>
169+
170+
<TextBlock
171+
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
172+
Text="Menu with colored items"
173+
Margin="0 0 0 20"/>
174+
175+
<smtx:XamlDisplay
176+
UniqueKey="coloredMenu1"
177+
HorizontalAlignment="Left">
178+
<Menu>
179+
<MenuItem Header="Menu">
180+
<MenuItem Header="Item 1"/>
181+
<MenuItem Header="Item 2"/>
182+
<MenuItem Header="Item 3"/>
183+
</MenuItem>
184+
<MenuItem Header="In Color" Background="{DynamicResource PrimaryHueMidBrush}" Foreground="{DynamicResource PrimaryHueMidForegroundBrush}">
185+
<MenuItem Header="Item 1" Background="{DynamicResource SecondaryHueMidBrush}" Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"/>
186+
<MenuItem Header="Item 2" Background="{DynamicResource SecondaryHueMidBrush}" Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"/>
187+
<MenuItem Header="Item 3" Background="{DynamicResource SecondaryHueMidBrush}" Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"/>
188+
</MenuItem>
189+
<MenuItem Header="(1) Important" Foreground="Crimson">
190+
<MenuItem Header="Item 1" Foreground="{DynamicResource MaterialDesignLightForeground}"/>
191+
<MenuItem Header="(1) This is important" Foreground="Crimson"/>
192+
<MenuItem Header="Nothing here" Foreground="{DynamicResource MaterialDesignLightForeground}"/>
193+
</MenuItem>
194+
</Menu>
195+
</smtx:XamlDisplay>
196+
197+
<Separator Margin="0 20" Style="{DynamicResource MaterialDesignSeparator}"/>
198+
199+
<TextBlock
200+
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
201+
Text="Toolbars"
202+
Margin="0 0 0 20"/>
203+
125204
<smtx:XamlDisplay
126205
UniqueKey="menus_2"
127-
DockPanel.Dock="Top"
128206
Margin="5 0 0 0">
129207
<ToolBarTray>
130208
<ToolBar
@@ -263,7 +341,6 @@
263341

264342
<smtx:XamlDisplay
265343
UniqueKey="menus_3"
266-
DockPanel.Dock="Top"
267344
Margin="5 16 0 0">
268345
<ToolBarTray>
269346
<ToolBar
@@ -306,30 +383,35 @@
306383
</ToolBar>
307384
</ToolBarTray>
308385
</smtx:XamlDisplay>
309-
<smtx:XamlDisplay
310-
UniqueKey="menus_4"
311-
Margin="16"
312-
VerticalAlignment="Top"
313-
HorizontalAlignment="Left">
314-
<TextBox Text="With Default Context Menu"/>
315-
</smtx:XamlDisplay>
316386

317-
<smtx:XamlDisplay
318-
UniqueKey="menus_5"
319-
Margin="16"
320-
VerticalAlignment="Top"
321-
HorizontalAlignment="Left">
322-
<TextBox Text="With Custom Context Menu">
323-
<TextBox.ContextMenu>
324-
<ContextMenu>
325-
<MenuItem Header="Hello World"/>
326-
<MenuItem Header="Clickety Click">
327-
<MenuItem Header="Clackety Clack"/>
328-
</MenuItem>
329-
</ContextMenu>
330-
</TextBox.ContextMenu>
331-
</TextBox>
332-
</smtx:XamlDisplay>
333-
</DockPanel>
387+
<Separator Margin="0 20" Style="{DynamicResource MaterialDesignSeparator}"/>
388+
389+
<TextBlock
390+
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
391+
Text="Context Menus"
392+
Margin="0 0 0 20"/>
393+
394+
<StackPanel Orientation="Horizontal">
395+
<smtx:XamlDisplay
396+
UniqueKey="menus_4"
397+
Margin="0 0 20 0">
398+
<TextBox Text="With Default Context Menu"/>
399+
</smtx:XamlDisplay>
400+
401+
<smtx:XamlDisplay
402+
UniqueKey="menus_5">
403+
<TextBox Text="With Custom Context Menu">
404+
<TextBox.ContextMenu>
405+
<ContextMenu>
406+
<MenuItem Header="Hello World"/>
407+
<MenuItem Header="Clickety Click">
408+
<MenuItem Header="Clackety Clack"/>
409+
</MenuItem>
410+
</ContextMenu>
411+
</TextBox.ContextMenu>
412+
</TextBox>
413+
</smtx:XamlDisplay>
414+
</StackPanel>
415+
</StackPanel>
334416
</UserControl>
335417

‎MaterialDesignThemes.Wpf/MenuAssist.cs

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
using System.Windows;
7+
8+
namespace MaterialDesignThemes.Wpf
9+
{
10+
public static class MenuAssist
11+
{
12+
#region AttachedProperty : TopLevelMenuItemHeight
13+
public static readonly DependencyProperty TopLevelMenuItemHeightProperty
14+
= DependencyProperty.RegisterAttached(
15+
"TopLevelMenuItemHeight",
16+
typeof(double),
17+
typeof(MenuAssist));
18+
19+
public static double GetTopLevelMenuItemHeight(DependencyObject element) => (double)element.GetValue(TopLevelMenuItemHeightProperty);
20+
public static void SetTopLevelMenuItemHeight(DependencyObject element, double value) => element.SetValue(TopLevelMenuItemHeightProperty, value);
21+
#endregion
22+
}
23+
}

‎MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.Menu.xaml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -341,7 +341,7 @@
341341
Value="16 0" />
342342
<Setter
343343
Property="Height"
344-
Value="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" />
344+
Value="{Binding Path=(wpf:MenuAssist.TopLevelMenuItemHeight), RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=MenuBase}}" />
345345
<Setter
346346
TargetName="templateRoot"
347347
Property="CornerRadius"
@@ -494,6 +494,7 @@
494494
<Setter
495495
Property="UseLayoutRounding"
496496
Value="True" />
497+
<Setter Property="wpf:MenuAssist.TopLevelMenuItemHeight" Value="48"/>
497498
<Setter
498499
Property="Template">
499500
<Setter.Value>

0 commit comments

Comments
 (0)