Style ContextMenu / MenuItem to match dark theme
Some checks failed
CI / build-and-test (push) Failing after 29s

Right-click on a participant row in the DataGrid surfaces actions (Toggle ISO / Restart / Open preview / Record / Copy NDI source name) but rendered with WPF's default white-on-grey ContextMenu — looked like a Notepad popup on the dark canvas.

New ContextMenu + MenuItem styles match the rest of the theme: SurfaceElevated background, rounded corners, slim cyan-tinted hover (matches the button hover treatment from the previous pass), monospaced gesture text in Wd.Text.Tertiary, no chevrons on items without submenus.
This commit is contained in:
Zac Gaetano 2026-05-10 13:32:04 -04:00
parent 0e2927e42c
commit b56e2e12e1

View file

@ -823,6 +823,105 @@
<Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderThickness" Value="1"/>
</Style> </Style>
<!-- ════ ContextMenu (right-click) ════ -->
<!--
WPF's default ContextMenu renders white-on-grey with a 3D border —
looks like Notepad on the dark canvas. Match the rest of the theme:
SurfaceElevated background, slim cyan-muted highlight on hover, no
chevron arrows on items without submenus, rounded outer corner.
-->
<Style TargetType="ContextMenu">
<Setter Property="Background" Value="{StaticResource Wd.SurfaceElevated}"/>
<Setter Property="BorderBrush" Value="{StaticResource Wd.BorderStrong}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Padding" Value="4"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContextMenu">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{StaticResource Radius.M}"
Padding="{TemplateBinding Padding}">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Cycle"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="MenuItem">
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Primary}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="FontFamily" Value="{StaticResource Wd.Font.Sans}"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="Padding" Value="12,8"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuItem">
<Border x:Name="Bd"
Background="{TemplateBinding Background}"
CornerRadius="{StaticResource Radius.S}"
Margin="0,1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ContentPresenter Grid.Column="0"
ContentSource="Icon"
Margin="0,0,8,0"
VerticalAlignment="Center"/>
<ContentPresenter Grid.Column="1"
ContentSource="Header"
Margin="{TemplateBinding Padding}"
VerticalAlignment="Center"
RecognizesAccessKey="True"
TextBlock.Foreground="{TemplateBinding Foreground}"/>
<TextBlock Grid.Column="2"
Text="{TemplateBinding InputGestureText}"
Margin="16,0,12,0"
VerticalAlignment="Center"
FontFamily="{StaticResource Wd.Font.Mono}"
FontSize="11"
Foreground="{StaticResource Wd.Text.Tertiary}"/>
<Popup x:Name="PART_Popup"
Placement="Right"
IsOpen="{TemplateBinding IsSubmenuOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="None">
<Border Background="{StaticResource Wd.SurfaceElevated}"
BorderBrush="{StaticResource Wd.BorderStrong}"
BorderThickness="1"
CornerRadius="{StaticResource Radius.M}"
Padding="4"
Margin="2,0,0,0">
<StackPanel IsItemsHost="True"/>
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="True">
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Wd.Button.HoverBg}"/>
<Setter Property="Foreground" Value="{StaticResource Wd.Accent.Cyan}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource Wd.Text.Disabled}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ════ Status pill ════ --> <!-- ════ Status pill ════ -->
<Style x:Key="Wd.Pill" TargetType="Border"> <Style x:Key="Wd.Pill" TargetType="Border">
<Setter Property="Background" Value="{StaticResource Wd.SurfaceElevated}"/> <Setter Property="Background" Value="{StaticResource Wd.SurfaceElevated}"/>