Skip to content

Commit aca6b24

Browse files
nicolaihenriksennicolaihenriksen
authored
Add opt-in AP to control margins in menu variants (#3760)
* Add new AP to control "ItemsPresenter margin" in the menu variants Defaults to the original value of "0, 16" and as such is an opt-in feature. * Align demo apps and showcase usage of new AP
1 parent 3cb7dc9 commit aca6b24

File tree

5 files changed

+306
-23
lines changed

5 files changed

+306
-23
lines changed

‎src/MainDemo.Wpf/MenusAndToolBars.xaml

Lines changed: 69 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<UserControl x:Class="MaterialDesignDemo.MenusAndToolBars"
1+
<UserControl x:Class="MaterialDesignDemo.MenusAndToolBars"
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
44
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -62,6 +62,59 @@
6262
</Menu>
6363
</smtx:XamlDisplay>
6464

65+
<Rectangle Style="{StaticResource PageSectionSeparator}" />
66+
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Menu with custom item margin" />
67+
68+
<smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="menus_1_1">
69+
<Menu materialDesign:MenuAssist.MenuItemsPresenterMargin="0">
70+
<MenuItem Header="_File">
71+
<!--
72+
You can set the highlighted color with:
73+
materialDesign:MenuItemAssist.HighlightedBackground="Fuchsia"
74+
-->
75+
<MenuItem Header="Save" Icon="{materialDesign:PackIcon Kind=ContentSave}" />
76+
77+
<MenuItem Header="Save As.." />
78+
79+
<MenuItem Header="Exit"
80+
Icon="{materialDesign:PackIcon Kind=ExitToApp}"
81+
InputGestureText="Ctrl+E" />
82+
83+
<Separator />
84+
85+
<MenuItem Header="Excellent"
86+
IsCheckable="True"
87+
IsChecked="True" />
88+
89+
<MenuItem Header="Rubbish" IsCheckable="True" />
90+
91+
<MenuItem Header="Dig Deeper" InputGestureText="Ctrl+D">
92+
<MenuItem Header="Enlightenment?" IsCheckable="True" />
93+
<MenuItem Header="Disappointment" IsCheckable="True" />
94+
</MenuItem>
95+
96+
<MenuItem Header="Look Deeper" InputGestureText="Ctrl+D">
97+
<MenuItem Header="Plain" />
98+
<MenuItem Header="Ice Cream" />
99+
</MenuItem>
100+
</MenuItem>
101+
102+
<MenuItem Header="_Edit">
103+
<MenuItem Command="Cut"
104+
Header="_Cut"
105+
Icon="{materialDesign:PackIcon Kind=ContentCut}" />
106+
107+
<MenuItem Command="Copy"
108+
Header="_Copy"
109+
Icon="{materialDesign:PackIcon Kind=ContentCopy}" />
110+
111+
<MenuItem Command="Paste"
112+
Header="_Paste"
113+
Icon="{materialDesign:PackIcon Kind=ContentPaste}" />
114+
</MenuItem>
115+
</Menu>
116+
</smtx:XamlDisplay>
117+
65118
<Rectangle Style="{StaticResource PageSectionSeparator}" />
66119
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Menu with custom Height" />
67120

@@ -345,6 +398,21 @@
345398
</TextBox.ContextMenu>
346399
</TextBox>
347400
</smtx:XamlDisplay>
401+
402+
<smtx:XamlDisplay UniqueKey="menus_6" Margin="0,0,16,16">
403+
<TextBox Text="With Custom Item Margin">
404+
<TextBox.ContextMenu>
405+
<ContextMenu materialDesign:MenuAssist.MenuItemsPresenterMargin="0">
406+
<MenuItem Header="Hello World" />
407+
<MenuItem Header="Clickety Click">
408+
<MenuItem Header="Clackety Clack 1" />
409+
<MenuItem Header="Clackety Clack 2" />
410+
<MenuItem Header="Clackety Clack 3" />
411+
</MenuItem>
412+
</ContextMenu>
413+
</TextBox.ContextMenu>
414+
</TextBox>
415+
</smtx:XamlDisplay>
348416
</WrapPanel>
349417
</StackPanel>
350418
</UserControl>

‎src/MaterialDesign3.Demo.Wpf/App.xaml

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,21 @@
124124
<Setter Property="VerticalContentAlignment" Value="Bottom" />
125125
<Setter Property="materialDesignDemo:XamlDisplayEx.ButtonDock" Value="Right" />
126126
</Style>
127+
128+
<Style TargetType="TextBlock" BasedOn="{StaticResource MaterialDesignHeadline5TextBlock}" x:Key="PageTitleTextBlock">
129+
<Setter Property="Margin" Value="0 0 0 24"/>
130+
</Style>
131+
132+
<Style TargetType="TextBlock" BasedOn="{StaticResource MaterialDesignHeadline6TextBlock}" x:Key="PageSectionTitleTextBlock">
133+
<Setter Property="Margin" Value="0 0 0 16"/>
134+
</Style>
135+
136+
<Style TargetType="Rectangle" x:Key="PageSectionSeparator">
137+
<Setter Property="Margin" Value="0,24" />
138+
<Setter Property="Height" Value="1" />
139+
<Setter Property="Fill" Value="{DynamicResource MaterialDesignDivider}" />
140+
</Style>
141+
127142
</ResourceDictionary>
128143
</Application.Resources>
129144
</Application>

‎src/MaterialDesign3.Demo.Wpf/MenusAndToolBars.xaml

Lines changed: 208 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
d:DesignHeight="300"
99
d:DesignWidth="300"
1010
mc:Ignorable="d">
11-
<DockPanel>
11+
<StackPanel>
12+
<TextBlock Style="{StaticResource PageTitleTextBlock}" Text="Menus and Toolbars" />
13+
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Default Menu" />
14+
1215
<smtx:XamlDisplay Margin="5,5,0,5"
1316
DockPanel.Dock="Top"
1417
UniqueKey="menus_1">
@@ -57,6 +60,171 @@
5760
</Menu>
5861
</smtx:XamlDisplay>
5962

63+
<Rectangle Style="{StaticResource PageSectionSeparator}" />
64+
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Menu with custom item margin" />
65+
66+
<smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="menus_1_1">
67+
<Menu materialDesign:MenuAssist.MenuItemsPresenterMargin="0">
68+
<MenuItem Header="_File">
69+
<!--
70+
You can set the highlighted color with:
71+
materialDesign:MenuItemAssist.HighlightedBackground="Fuchsia"
72+
-->
73+
<MenuItem Header="Save" Icon="{materialDesign:PackIcon Kind=ContentSave}" />
74+
75+
<MenuItem Header="Save As.." />
76+
77+
<MenuItem Header="Exit"
78+
Icon="{materialDesign:PackIcon Kind=ExitToApp}"
79+
InputGestureText="Ctrl+E" />
80+
81+
<Separator />
82+
83+
<MenuItem Header="Excellent"
84+
IsCheckable="True"
85+
IsChecked="True" />
86+
87+
<MenuItem Header="Rubbish" IsCheckable="True" />
88+
89+
<MenuItem Header="Dig Deeper" InputGestureText="Ctrl+D">
90+
<MenuItem Header="Enlightenment?" IsCheckable="True" />
91+
<MenuItem Header="Disappointment" IsCheckable="True" />
92+
</MenuItem>
93+
94+
<MenuItem Header="Look Deeper" InputGestureText="Ctrl+D">
95+
<MenuItem Header="Plain" />
96+
<MenuItem Header="Ice Cream" />
97+
</MenuItem>
98+
</MenuItem>
99+
100+
<MenuItem Header="_Edit">
101+
<MenuItem Command="Cut"
102+
Header="_Cut"
103+
Icon="{materialDesign:PackIcon Kind=ContentCut}" />
104+
105+
<MenuItem Command="Copy"
106+
Header="_Copy"
107+
Icon="{materialDesign:PackIcon Kind=ContentCopy}" />
108+
109+
<MenuItem Command="Paste"
110+
Header="_Paste"
111+
Icon="{materialDesign:PackIcon Kind=ContentPaste}" />
112+
</MenuItem>
113+
</Menu>
114+
</smtx:XamlDisplay>
115+
116+
<Rectangle Style="{StaticResource PageSectionSeparator}" />
117+
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Menu with custom Height" />
118+
119+
<smtx:XamlDisplay Margin="0,0,0,16"
120+
HorizontalAlignment="Left"
121+
UniqueKey="customHeightMenu1">
122+
<Menu materialDesign:MenuAssist.TopLevelMenuItemHeight="25">
123+
<MenuItem Header="Very">
124+
<MenuItem Header="Item 1" />
125+
<MenuItem Header="Item 2" />
126+
<MenuItem Header="Item 3" />
127+
</MenuItem>
128+
<MenuItem Header="Small">
129+
<MenuItem Header="Item 1" />
130+
<MenuItem Header="Item 2" />
131+
<MenuItem Header="Item 3" />
132+
</MenuItem>
133+
<MenuItem Header="Menu" />
134+
</Menu>
135+
</smtx:XamlDisplay>
136+
137+
<smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="customHeightMenu2">
138+
<Menu materialDesign:MenuAssist.TopLevelMenuItemHeight="80">
139+
<MenuItem Header="Very">
140+
<MenuItem Header="Item 1" />
141+
<MenuItem Header="Item 2" />
142+
<MenuItem Header="Item 3" />
143+
</MenuItem>
144+
<MenuItem Header="Big">
145+
<MenuItem Header="Item 1" />
146+
<MenuItem Header="Item 2" />
147+
<MenuItem Header="Item 3" />
148+
</MenuItem>
149+
<MenuItem Header="Menu" />
150+
</Menu>
151+
</smtx:XamlDisplay>
152+
153+
<Rectangle Style="{StaticResource PageSectionSeparator}" />
154+
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Adaptive Menu" />
155+
156+
<Grid>
157+
<Grid.RowDefinitions>
158+
<RowDefinition Height="Auto" MinHeight="25" />
159+
<RowDefinition Height="Auto" />
160+
<RowDefinition Height="Auto" />
161+
</Grid.RowDefinitions>
162+
163+
<smtx:XamlDisplay Grid.Row="0"
164+
HorizontalAlignment="Left"
165+
UniqueKey="adaptiveMenu">
166+
<materialDesign:Card>
167+
<Menu materialDesign:MenuAssist.TopLevelMenuItemHeight="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type materialDesign:Card}}, Path=ActualHeight}">
168+
<MenuItem Header="File">
169+
<MenuItem Header="Item 1" />
170+
<MenuItem Header="Item 2" />
171+
<MenuItem Header="Item 3" />
172+
</MenuItem>
173+
<MenuItem Header="Edit">
174+
<MenuItem Header="Item 1" />
175+
<MenuItem Header="Item 2" />
176+
<MenuItem Header="Item 3" />
177+
</MenuItem>
178+
<MenuItem Header="About" />
179+
</Menu>
180+
</materialDesign:Card>
181+
</smtx:XamlDisplay>
182+
<GridSplitter Grid.Row="1"
183+
Height="5"
184+
Margin="0,10"
185+
HorizontalAlignment="Stretch" />
186+
<Grid Grid.Row="2">
187+
<StackPanel Orientation="Horizontal">
188+
<materialDesign:PackIcon Margin="0,0,5,0" Kind="Information" />
189+
<TextBlock>The menu height matches with the parent panel height. Use the splitter to see the adaptive menu in action.</TextBlock>
190+
</StackPanel>
191+
</Grid>
192+
</Grid>
193+
194+
<Rectangle Style="{StaticResource PageSectionSeparator}" />
195+
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Menu with colored items" />
196+
197+
<smtx:XamlDisplay HorizontalAlignment="Left" UniqueKey="coloredMenu1">
198+
<Menu>
199+
<MenuItem Header="Menu">
200+
<MenuItem Header="Item 1" />
201+
<MenuItem Header="Item 2" />
202+
<MenuItem Header="Item 3" />
203+
</MenuItem>
204+
<MenuItem Background="{DynamicResource PrimaryHueMidBrush}"
205+
Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"
206+
Header="In Color">
207+
<MenuItem Background="{DynamicResource SecondaryHueMidBrush}"
208+
Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"
209+
Header="Item 1" />
210+
<MenuItem Background="{DynamicResource SecondaryHueMidBrush}"
211+
Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"
212+
Header="Item 2" />
213+
<MenuItem Background="{DynamicResource SecondaryHueMidBrush}"
214+
Foreground="{DynamicResource SecondaryHueMidForegroundBrush}"
215+
Header="Item 3" />
216+
</MenuItem>
217+
<MenuItem Foreground="Crimson" Header="(1) Important">
218+
<MenuItem Foreground="{DynamicResource MaterialDesign.Brush.Foreground}" Header="Item 1" />
219+
<MenuItem Foreground="Crimson" Header="(1) This is important" />
220+
<MenuItem Foreground="{DynamicResource MaterialDesign.Brush.Foreground}" Header="Nothing here" />
221+
</MenuItem>
222+
</Menu>
223+
</smtx:XamlDisplay>
224+
225+
<Rectangle Style="{StaticResource PageSectionSeparator}" />
226+
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Toolbars" />
227+
60228
<smtx:XamlDisplay Margin="5,0,0,0"
61229
DockPanel.Dock="Top"
62230
UniqueKey="menus_2">
@@ -178,28 +346,51 @@
178346
</ToolBarTray>
179347
</smtx:XamlDisplay>
180348

181-
<smtx:XamlDisplay Margin="16"
349+
<Rectangle Style="{StaticResource PageSectionSeparator}" />
350+
<TextBlock Style="{StaticResource PageSectionTitleTextBlock}" Text="Context Menus" />
351+
352+
<WrapPanel>
353+
<smtx:XamlDisplay Margin="16"
182354
HorizontalAlignment="Left"
183355
VerticalAlignment="Top"
184356
UniqueKey="menus_3">
185-
<TextBox Text="With Default Context Menu" />
186-
</smtx:XamlDisplay>
357+
<TextBox Text="With Default Context Menu" />
358+
</smtx:XamlDisplay>
187359

188-
<smtx:XamlDisplay Margin="16"
360+
<smtx:XamlDisplay Margin="16"
189361
HorizontalAlignment="Left"
190362
VerticalAlignment="Top"
191363
UniqueKey="menus_4">
192-
<TextBox Text="With Custom Context Menu">
193-
<TextBox.ContextMenu>
194-
<ContextMenu>
195-
<MenuItem Header="Hello World" />
196-
<MenuItem Header="Clickety Click">
197-
<MenuItem Header="Clackety Clack" />
198-
</MenuItem>
199-
</ContextMenu>
200-
</TextBox.ContextMenu>
201-
</TextBox>
202-
</smtx:XamlDisplay>
203-
</DockPanel>
364+
<TextBox Text="With Custom Context Menu">
365+
<TextBox.ContextMenu>
366+
<ContextMenu>
367+
<MenuItem Header="Hello World" />
368+
<MenuItem Header="Clickety Click">
369+
<MenuItem Header="Clackety Clack" />
370+
</MenuItem>
371+
</ContextMenu>
372+
</TextBox.ContextMenu>
373+
</TextBox>
374+
</smtx:XamlDisplay>
375+
376+
<smtx:XamlDisplay UniqueKey="menus_6"
377+
Margin="16"
378+
HorizontalAlignment="Left"
379+
VerticalAlignment="Top">
380+
<TextBox Text="With Custom Item Margin">
381+
<TextBox.ContextMenu>
382+
<ContextMenu materialDesign:MenuAssist.MenuItemsPresenterMargin="0">
383+
<MenuItem Header="Hello World" />
384+
<MenuItem Header="Clickety Click">
385+
<MenuItem Header="Clackety Clack 1" />
386+
<MenuItem Header="Clackety Clack 2" />
387+
<MenuItem Header="Clackety Clack 3" />
388+
</MenuItem>
389+
</ContextMenu>
390+
</TextBox.ContextMenu>
391+
</TextBox>
392+
</smtx:XamlDisplay>
393+
</WrapPanel>
394+
</StackPanel>
204395
</UserControl>
205396

‎src/MaterialDesignThemes.Wpf/MenuAssist.cs

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
using System.Windows.Media;
2-
31
namespace MaterialDesignThemes.Wpf;
42

53
public static class MenuAssist
@@ -14,4 +12,15 @@ public static readonly DependencyProperty TopLevelMenuItemHeightProperty
1412
public static double GetTopLevelMenuItemHeight(DependencyObject element) => (double)element.GetValue(TopLevelMenuItemHeightProperty);
1513
public static void SetTopLevelMenuItemHeight(DependencyObject element, double value) => element.SetValue(TopLevelMenuItemHeightProperty, value);
1614
#endregion
15+
16+
public static readonly DependencyProperty MenuItemsPresenterMarginProperty =
17+
DependencyProperty.RegisterAttached(
18+
"MenuItemsPresenterMargin",
19+
typeof(Thickness),
20+
typeof(MenuAssist),
21+
new FrameworkPropertyMetadata(new Thickness(0, 16, 0, 16), FrameworkPropertyMetadataOptions.Inherits));
22+
public static Thickness GetMenuItemsPresenterMargin(DependencyObject obj)
23+
=> (Thickness)obj.GetValue(MenuItemsPresenterMarginProperty);
24+
public static void SetMenuItemsPresenterMargin(DependencyObject obj, Thickness value)
25+
=> obj.SetValue(MenuItemsPresenterMarginProperty, value);
1726
}

0 commit comments

Comments
 (0)