How does Visual Studio Achieve This Kind of MenuItem Drawing? - wpf

Question

I'm in the process of creating a dark ui for my application, and came across something interesting while using Visual Studio as a point of reference. I noticed they render their MenuItems almost as if they're Tabs in a Tabcontrol. Here's a picture:
And here's what mine looks like:
I know it's probably hard to see because everything is sort of the same color, so I went ahead and made another modified image to better highlight the area.
As you can hopefully see, Visual studio draws a border around the MenuItem, and then doesnt draw a border directly below it, for the drop down children. How does Visual Studio do it, though? How could I achieve it? Here's my template:
<Style x:Key="{x:Type Menu}" TargetType="Menu">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="#f1f1f1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Menu">
<Border x:Name="MainMenu" Background="#2d2d30">
<StackPanel
ClipToBounds="True"
IsItemsHost="True"
Orientation="Horizontal" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}">
<Border
x:Name="templateRoot"
Height="16"
Background="{TemplateBinding Background}"
BorderBrush="#535353"
SnapsToDevicePixels="True">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter
Grid.Column="1"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Header}"
ContentSource="Header"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<Popup
x:Name="PART_Popup"
AllowsTransparency="True"
Focusable="False"
IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Bottom"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
<Border
x:Name="SubMenuBorder"
Padding="2"
Background="#1b1b1c"
BorderBrush="#595959"
BorderThickness="1">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas
Width="0"
Height="0"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Rectangle
x:Name="OpaqueRect"
Width="{Binding ActualWidth, ElementName=SubMenuBorder}"
Height="{Binding ActualHeight, ElementName=SubMenuBorder}"
Fill="{Binding Background, ElementName=SubMenuBorder}" />
</Canvas>
<ItemsPresenter
x:Name="ItemsPresenter"
Grid.IsSharedSizeScope="True"
KeyboardNavigation.DirectionalNavigation="Cycle"
KeyboardNavigation.TabNavigation="Cycle"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter TargetName="PART_Popup" Property="PopupAnimation" Value="None" />
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="templateRoot" Property="Background" Value="#3e3e40" />
<Setter TargetName="templateRoot" Property="BorderBrush" Value="#2C2C2C" />
</Trigger>
<Trigger SourceName="SubMenuScrollViewer" Property="CanContentScroll" Value="False">
<Setter TargetName="OpaqueRect" Property="Canvas.Top" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}" />
<Setter TargetName="OpaqueRect" Property="Canvas.Left" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}" />
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="templateRoot" Property="Background" Value="#1b1b1c" />
<Setter Property="Header" Value="Test" />
<Setter Property="BorderBrush" Value="#2C2C2C" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="MenuItemControlTemplate2" TargetType="{x:Type MenuItem}">
<Border
x:Name="templateRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<Grid Margin="-1">
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="Auto"
MinWidth="22"
SharedSizeGroup="MenuItemIconColumnGroup" />
<ColumnDefinition Width="13" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<ContentPresenter
x:Name="Icon"
Width="16"
Height="16"
Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Icon}"
ContentSource="Icon"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<Border
x:Name="GlyphPanel"
Width="22"
Height="22"
Margin="-1,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="#3D26A0DA"
BorderBrush="#FF26A0DA"
BorderThickness="1"
ClipToBounds="False"
Visibility="Hidden">
<Path
x:Name="Glyph"
Width="10"
Height="11"
Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z"
Fill="#FF212121"
FlowDirection="LeftToRight" />
</Border>
<ContentPresenter
x:Name="menuHeaderContainer"
Grid.Column="2"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="{TemplateBinding Header}"
ContentSource="Header"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<TextBlock
x:Name="menuGestureText"
Grid.Column="4"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Center"
Opacity="0.7"
Text="{TemplateBinding InputGestureText}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="GlyphPanel" Property="Visibility" Value="Visible" />
<Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="templateRoot" Property="BorderBrush" Value="Orange" />
<Setter TargetName="templateRoot" Property="Background" Value="Yellow" />
<Setter TargetName="menuHeaderContainer" Property="TextBlock.Foreground" Value="Black" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="templateRoot" Property="TextElement.Foreground" Value="#FF707070" />
<Setter TargetName="Glyph" Property="Fill" Value="#FF707070" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted" Value="True" />
<Condition Property="IsEnabled" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="templateRoot" Property="Background" Value="#0A000000" />
<Setter TargetName="templateRoot" Property="BorderBrush" Value="#21000000" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Answer 1

In order to figure out what's going on inside Visual Studio, I started two instances of Visual Studio 2017 and attached one to the other's process which allowed me to use the Live Visual Tree tool to inspect the controls (presumably you could use Snoop for this as well).
It turns out that the menu popup in Visual Studio appears to be offset so that it overlays the menu bar and a small box of some sort is drawn to achieve the continuous tab look. This is especially noticeable if you use the Properties window to tweak the VerticalOffset property of the popup so that it is separated from the main menu.
Finding the Popup in the Visual Tree:
Changing the VerticalOffset from its original -2 to a positive number:
And the resulting popup:
If you look at the top left of the now separated menu popup you should be able to see a small extension of the popup that, when the VerticalOffset was -2 originally, overlapped the parent MenuItem border creating the illusion of a single tab-like control.
Knowing this, creating a rudimentary version of Visual Studio's solution is fairly straightforward:
<Window x:Class="MenuItemTest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MenuItemTest"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="525"
Height="350"
mc:Ignorable="d">
<Window.Resources>
<local:SubtractingConverter x:Key="SubtractingConverter" />
<Style x:Key="{x:Type Menu}" TargetType="Menu">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Foreground" Value="#f1f1f1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Menu">
<Border x:Name="MainMenu" Background="#2d2d30">
<StackPanel ClipToBounds="True"
IsItemsHost="True"
Orientation="Horizontal" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="MenuItemControlTemplate1" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot"
Height="16"
Background="{TemplateBinding Background}"
BorderBrush="#535353"
SnapsToDevicePixels="True">
<Grid VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Header}"
ContentSource="Header"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<Popup x:Name="PART_Popup"
AllowsTransparency="True"
Focusable="False"
IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
Placement="Bottom"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
<Grid>
<Border x:Name="SubMenuBorder"
Padding="2"
Background="#1b1b1c"
BorderBrush="#595959"
BorderThickness="1">
<ScrollViewer x:Name="SubMenuScrollViewer" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<Canvas Width="0"
Height="0"
HorizontalAlignment="Left"
VerticalAlignment="Top">
<Rectangle x:Name="OpaqueRect"
Width="{Binding ActualWidth, ElementName=SubMenuBorder}"
Height="{Binding ActualHeight, ElementName=SubMenuBorder}"
Fill="{Binding Background, ElementName=SubMenuBorder}" />
</Canvas>
<ItemsPresenter x:Name="ItemsPresenter"
Grid.IsSharedSizeScope="True"
KeyboardNavigation.DirectionalNavigation="Cycle"
KeyboardNavigation.TabNavigation="Cycle"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Grid>
</ScrollViewer>
</Border>
<Rectangle Width="{TemplateBinding ActualWidth,
Converter={StaticResource SubtractingConverter},
ConverterParameter=1}"
Height="2"
Margin="1,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Fill="{Binding Background, ElementName=SubMenuBorder}" />
</Grid>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="True">
<Setter TargetName="PART_Popup" Property="PopupAnimation" Value="None" />
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="templateRoot" Property="Background" Value="#3e3e40" />
<Setter TargetName="templateRoot" Property="BorderBrush" Value="#2C2C2C" />
</Trigger>
<Trigger SourceName="SubMenuScrollViewer" Property="CanContentScroll" Value="False">
<Setter TargetName="OpaqueRect" Property="Canvas.Top" Value="{Binding VerticalOffset, ElementName=SubMenuScrollViewer}" />
<Setter TargetName="OpaqueRect" Property="Canvas.Left" Value="{Binding HorizontalOffset, ElementName=SubMenuScrollViewer}" />
</Trigger>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter TargetName="templateRoot" Property="Background" Value="#1b1b1c" />
<Setter Property="Header" Value="Test" />
<Setter Property="BorderBrush" Value="#2C2C2C" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="MenuItemControlTemplate2" TargetType="{x:Type MenuItem}">
<Border x:Name="templateRoot"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True">
<Grid Margin="-1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="22"
SharedSizeGroup="MenuItemIconColumnGroup" />
<ColumnDefinition Width="13" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<ContentPresenter x:Name="Icon"
Width="16"
Height="16"
Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Icon}"
ContentSource="Icon"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<Border x:Name="GlyphPanel"
Width="22"
Height="22"
Margin="-1,0,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="#3D26A0DA"
BorderBrush="#FF26A0DA"
BorderThickness="1"
ClipToBounds="False"
Visibility="Hidden">
<Path x:Name="Glyph"
Width="10"
Height="11"
Data="F1M10,1.2L4.7,9.1 4.5,9.1 0,5.2 1.3,3.5 4.3,6.1 8.3,0 10,1.2z"
Fill="#FF212121"
FlowDirection="LeftToRight" />
</Border>
<ContentPresenter x:Name="menuHeaderContainer"
Grid.Column="2"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="{TemplateBinding Header}"
ContentSource="Header"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<TextBlock x:Name="menuGestureText"
Grid.Column="4"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Center"
Opacity="0.7"
Text="{TemplateBinding InputGestureText}" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Icon" Value="{x:Null}">
<Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="GlyphPanel" Property="Visibility" Value="Visible" />
<Setter TargetName="Icon" Property="Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="templateRoot" Property="BorderBrush" Value="Orange" />
<Setter TargetName="templateRoot" Property="Background" Value="Yellow" />
<Setter TargetName="menuHeaderContainer" Property="TextBlock.Foreground" Value="Black" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="templateRoot" Property="TextElement.Foreground" Value="#FF707070" />
<Setter TargetName="Glyph" Property="Fill" Value="#FF707070" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsHighlighted" Value="True" />
<Condition Property="IsEnabled" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="templateRoot" Property="Background" Value="#0A000000" />
<Setter TargetName="templateRoot" Property="BorderBrush" Value="#21000000" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Menu Background="#2d2d30">
<MenuItem Header="Tools" Template="{StaticResource MenuItemControlTemplate1}">
<MenuItem Padding="0"
Background="#2d2d30"
Header="Test"
Template="{StaticResource MenuItemControlTemplate2}" />
</MenuItem>
<MenuItem Header="Whatever" Template="{StaticResource MenuItemControlTemplate1}">
<MenuItem Padding="0"
Background="#2d2d30"
Header="Test"
Template="{StaticResource MenuItemControlTemplate2}" />
</MenuItem>
</Menu>
</Grid>
</Window>
This is basically the same style and templates that you gave above with the addition of a Rectangle within the MenuItemControlTemplate1 ControlTemplate and a Grid so that both it and the existing Border can be contained within the popup. The SubtractingConverter is just a simple IValueConverter that subtracts the ConverterParameter from the Value... nothing fancy. I've also gone ahead and thrown it in a window for testing. When I run this test program I now get this:
Since I don't have all of your styles obviously not all of the colors are going to be correct, but you'll notice that the menu you were concerned about now appears to be one continuous tab like in Visual Studio.
Now this is not a full solution. There are obvious minor details such as a missing border around the parent "Tools" and "Whatever" menus, but more critically you still need to account for the Popup changing its position due to overlap with the monitor edges when placing the Rectangle.
If you move the application window to the bottom of the screen, the Popup class will open the menu instance above the "Tools" menu rather than below, which will obviously result in the Rectangle being misplaced. Similarly, opening the menu when the window is again the right edge of the screen will once again cause the Rectangle to be misplaced due to the change in popup position. Even Visual Studio 2017 doesn't properly account for this case as you can see below:
Now, maybe handling the basic use case is enough for you in which case, great! If you want to go further and handle repositioning, resizing, and/or hiding/showing the rectangle so that it looks perfect no matter what weird position the user opens a menu in, then I really see no way to do this cleanly without some actual C# code. I suspect this is at least one of the things that the VSMenuItem class in the Live Visual Tree of Visual Studio shown previously does over and above the bog standard MenuItem class. Implementing that functionality is really outside the scope of the original question, but hopefully this at least made clear how they pulled it off.

Answer 2

Set the background colour of that menu item to the colour that you want, and the foreground colour to white.