(GH-3284) Fix Gap between menu items and hamburger icon

- add 2 new properties `PaneMargin` and `PaneHeaderMargin` to set the margin for Pane and PaneHeader (default is `0 0 0 8` for both properties)
MahApps · Sep 12, 2018 · df2f19d · df2f19d
1 parent 15f3403
commit df2f19d
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 22 deletions.
diff --git a/src/MahApps.Metro/Controls/HamburgerMenu/HamburgerMenu.Properties.cs b/src/MahApps.Metro/Controls/HamburgerMenu/HamburgerMenu.Properties.cs
@@ -49,6 +49,16 @@ private static void CompactPaneLengthPropertyChangedCallback(DependencyObject de
             }
         }
 
+        /// <summary>
+        /// Identifies the <see cref="PaneMargin"/> dependency property.
+        /// </summary>
+        public static readonly DependencyProperty PaneMarginProperty = DependencyProperty.Register(nameof(PaneMargin), typeof(Thickness), typeof(HamburgerMenu), new PropertyMetadata(null));
+
+        /// <summary>
+        /// Identifies the <see cref="PaneHeaderMargin"/> dependency property.
+        /// </summary>
+        public static readonly DependencyProperty PaneHeaderMarginProperty = DependencyProperty.Register(nameof(PaneHeaderMargin), typeof(Thickness), typeof(HamburgerMenu), new PropertyMetadata(null));
+
         /// <summary>
         /// Identifies the <see cref="PaneBackground"/> dependency property.
         /// </summary>
@@ -170,6 +180,24 @@ public double CompactPaneLength
             set { SetValue(CompactPaneLengthProperty, value); }
         }
 
+        /// <summary>
+        /// Gets or sets the margin for the pane.
+        /// </summary>
+        public Thickness PaneMargin
+        {
+            get { return (Thickness)GetValue(PaneMarginProperty); }
+            set { SetValue(PaneMarginProperty, value); }
+        }
+
+        /// <summary>
+        /// Gets or sets the margin for the pane header.
+        /// </summary>
+        public Thickness PaneHeaderMargin
+        {
+            get { return (Thickness)GetValue(PaneHeaderMarginProperty); }
+            set { SetValue(PaneHeaderMarginProperty, value); }
+        }
+
         /// <summary>
         /// Gets or sets the Brush to apply to the background of the Pane area of the control.
         /// </summary>

diff --git a/src/MahApps.Metro/Themes/HamburgerMenu.xaml b/src/MahApps.Metro/Themes/HamburgerMenu.xaml
@@ -28,6 +28,8 @@
         <Setter Property="OptionsItemContainerStyle" Value="{StaticResource HamburgerMenuItemStyle}" />
         <Setter Property="PaneBackground" Value="{DynamicResource MahApps.Metro.HamburgerMenu.PaneBackgroundBrush}" />
         <Setter Property="PaneForeground" Value="{DynamicResource MahApps.Metro.HamburgerMenu.PaneForegroundBrush}" />
+        <Setter Property="PaneMargin" Value="0 0 0 8" />
+        <Setter Property="PaneHeaderMargin" Value="0 0 0 8" />
         <Setter Property="Template" Value="{StaticResource HamburgerMenuTemplate}" />
         <Setter Property="VerticalContentAlignment" Value="Stretch" />
     </Style>

diff --git a/src/MahApps.Metro/Themes/HamburgerMenuTemplate.xaml b/src/MahApps.Metro/Themes/HamburgerMenuTemplate.xaml
@@ -326,7 +326,7 @@
                                 PaneForeground="{TemplateBinding PaneForeground}"
                                 PanePlacement="{TemplateBinding PanePlacement}">
                 <Controls:SplitView.Pane>
-                    <Grid x:Name="PaneGrid">
+                    <Grid x:Name="PaneGrid" Margin="{TemplateBinding PaneMargin}">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                             <RowDefinition Height="*" />
@@ -335,11 +335,20 @@
                         <DockPanel x:Name="PaneHeader"
                                    Grid.Row="0"
                                    Height="{TemplateBinding HamburgerHeight}"
-                                   Margin="0 0 0 8"
+                                   Margin="{TemplateBinding PaneHeaderMargin}"
                                    LastChildFill="True">
-                            <Grid x:Name="PaneHeaderGap"
-                                  Width="{TemplateBinding HamburgerWidth}"
-                                  DockPanel.Dock="Left" />
+                            <Button x:Name="HamburgerButton"
+                                    Width="{TemplateBinding HamburgerWidth}"
+                                    Height="{TemplateBinding HamburgerHeight}"
+                                    DockPanel.Dock="Left"
+                                    Padding="{TemplateBinding HamburgerMargin}"
+                                    AutomationProperties.Name="Main button"
+                                    ContentTemplate="{TemplateBinding HamburgerMenuTemplate}"
+                                    Foreground="{TemplateBinding PaneForeground}"
+                                    IsTabStop="{TemplateBinding IsTabStop}"
+                                    Style="{StaticResource HamburgerButtonStyle}"
+                                    TabIndex="0"
+                                    Visibility="{TemplateBinding HamburgerVisibility}" />
                             <ContentControl x:Name="PaneHeaderContent"
                                             ContentTemplate="{TemplateBinding HamburgerMenuHeaderTemplate}"
                                             IsTabStop="False" />
@@ -363,7 +372,7 @@
                         <ListBox Name="OptionsListView"
                                  Grid.Row="2"
                                  Width="{TemplateBinding OpenPaneLength}"
-                                 Margin="0 20 0 8"
+                                 Margin="0 20 0 0"
                                  VerticalAlignment="Bottom"
                                  AutomationProperties.Name="Option items"
                                  Foreground="{TemplateBinding PaneForeground}"
@@ -392,25 +401,10 @@
                                                       SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                                       Transition="{TemplateBinding ContentTransition}" />
             </Controls:SplitView>
-            <Button x:Name="HamburgerButton"
-                    Width="{TemplateBinding HamburgerWidth}"
-                    Height="{TemplateBinding HamburgerHeight}"
-                    Margin="0 0 0 8"
-                    Padding="{TemplateBinding HamburgerMargin}"
-                    HorizontalAlignment="Left"
-                    VerticalAlignment="Top"
-                    AutomationProperties.Name="Main button"
-                    ContentTemplate="{TemplateBinding HamburgerMenuTemplate}"
-                    Foreground="{TemplateBinding PaneForeground}"
-                    IsTabStop="{TemplateBinding IsTabStop}"
-                    Style="{StaticResource HamburgerButtonStyle}"
-                    TabIndex="0"
-                    Visibility="{TemplateBinding HamburgerVisibility}" />
         </Grid>
         <ControlTemplate.Triggers>
             <Trigger Property="PanePlacement" Value="Right">
-                <Setter TargetName="HamburgerButton" Property="HorizontalAlignment" Value="Right" />
-                <Setter TargetName="PaneHeaderGap" Property="DockPanel.Dock" Value="Right" />
+                <Setter TargetName="HamburgerButton" Property="DockPanel.Dock" Value="Right" />
             </Trigger>
         </ControlTemplate.Triggers>
     </ControlTemplate>