WPF C# - Change the brush of a menu's background

WPF C# - Change the brush of a menu's background - c#

Does anyone know how to change the brush for a menu's background? This sounds simple, but I don't see any obvious way to do this. You'd think that the Background property would change it, but it doesn't.
Here's what my menu looks like (notice the default white background):
Example Code:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<SolidColorBrush x:Key="menuItemBrush"
Color="#FF505050" />
</Window.Resources>
<Grid x:Name="mainGrid"
Background="#FF252525">
<Menu x:Name="mainMenu"
Background="{DynamicResource menuItemBrush}"
Grid.ColumnSpan="2"
VerticalAlignment="Top">
<MenuItem x:Name="fileMenu"
Background="{DynamicResource menuItemBrush}"
Foreground="White"
Header="File">
<MenuItem x:Name="fileOpenMenuItem"
Background="{DynamicResource menuItemBrush}"
Foreground="White"
Header="Open..." />
<MenuItem x:Name="fileSaveMenuItem"
Background="{DynamicResource menuItemBrush}"
Foreground="White"
Header="Save" />
<MenuItem x:Name="fileSaveAsMenuItem"
Background="{DynamicResource menuItemBrush}"
Foreground="White"
Header="Save As..." />
<Separator Style="{DynamicResource menuItemSeperator}" />
<MenuItem x:Name="fileExitMenuItem"
Background="{DynamicResource menuItemBrush}"
Foreground="White"
Header="Exit" />
</MenuItem>
</Menu>
</Grid>

I'd suggest using a tool called kaxaml for writing styles. It includes several code snippets, a color picker and a nice way to instantly see what changes in the xaml code does. Here is a full menu style for what you are trying to do. Just change the brush colors at the top to suit to your needs.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Page.Resources>
<!--**************************
* STYLE: MenuItem
************************** -->
<SolidColorBrush x:Key="HighlightedBackgroundBrush" Color="#FF797878" />
<SolidColorBrush x:Key="MenuBackgroundBrush" Color="#FF505050" />
<SolidColorBrush x:Key="NormalBorderBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="SolidMenuFontBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="HighlightedText" Color="#FFFFFFFF" />
<Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Foreground" Value="{StaticResource SolidMenuFontBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<Border
Background="{StaticResource MenuBackgroundBrush}"
BorderBrush="{StaticResource MenuBackgroundBrush}"
BorderThickness="1">
<StackPanel ClipToBounds="True" Orientation="Horizontal" IsItemsHost="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type MenuItem}" TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
<ColumnDefinition x:Name="Col3" Width="14"/>
</Grid.ColumnDefinitions>
<!-- ContentPresenter to show an Icon if needed -->
<ContentPresenter Grid.Column="0" Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
<!-- Glyph is a checkmark if needed for a checkable menu -->
<Grid Grid.Column="0" Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
<Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
</Grid>
<!-- Content for the menu text etc -->
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
x:Name="HeaderHost"
RecognizesAccessKey="True"
ContentSource="Header"/>
<!-- Content for the menu IGT -->
<ContentPresenter Grid.Column="2"
Margin="8,1,8,1"
x:Name="IGTHost"
ContentSource="InputGestureText"
VerticalAlignment="Center"/>
<!-- Arrow drawn path which points to the next level of the menu -->
<Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
</Grid>
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
<Border x:Name="SubMenuBorder" BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" BorderThickness="1" Padding="2,2,2,2">
<Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
<!-- StackPanel holds children of the menu. This is set by IsItemsHost=True -->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
</Grid>
</Border>
</Popup>
</Grid>
</Border>
<!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
<ControlTemplate.Triggers>
<!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
<Setter Property="MinWidth" Value="0" TargetName="Col0"/>
<Setter Property="Width" Value="Auto" TargetName="Col3"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = TopLevelItem : this is a child menu item from the top level without any child items-->
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
</Trigger>
<!-- Role = SubMenuItem : this is a child menu item which has children-->
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
</Trigger>
<!-- If no Icon is present the we collapse the Icon Content -->
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- The GlyphPanel contains the CheckMark -->
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- Using the system colors for the Menu Highlight and IsEnabled-->
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" Value="{StaticResource HighlightedBackgroundBrush}" TargetName="Border"/>
<Setter Property="Foreground" Value="{StaticResource HighlightedText}"/>
<Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="false">
<Setter Property="Background" Value="{StaticResource MenuBackgroundBrush}" TargetName="Border"/>
<Setter Property="Foreground" Value="{StaticResource SolidMenuFontBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource MenuBackgroundBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid x:Name="mainGrid"
Background="#FF252525">
<Menu x:Name="mainMenu"
Grid.ColumnSpan="2"
VerticalAlignment="Top">
<MenuItem x:Name="fileMenu"
Header="File">
<MenuItem x:Name="fileOpenMenuItem"
Header="Open..." />
<MenuItem x:Name="fileSaveMenuItem"
Header="Save" />
<MenuItem x:Name="fileSaveAsMenuItem"
Background="{DynamicResource menuItemBrush}"
Header="Save As..." />
</MenuItem>
</Menu>
</Grid>
</Page>

You can't do it without overriding the template for the menu item. Deep inside the template is a control called "Part_Popup". You need to change it's background color.

Related

How to remove ContextMenu highlight effect?

I have the following context menu attached to a rectangle:
<Rectangle x:Name="criteria1" IsHitTestVisible="True">
<Rectangle.ContextMenu>
<ContextMenu>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=".5*"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Amplitude percentage"/>
<TextBox Grid.Column="1" Grid.Row="0" mah:TextBoxHelper.ClearTextButton="True" mah:ControlsHelper.FocusBorderBrush="{DynamicResource AccentColorBrush}" Width="70" >
<TextBox.Text>
<Binding Path="Criteria1AmplitudePercentage" TargetNullValue="{x:Static sys:String.Empty}" UpdateSourceTrigger="LostFocus" ValidatesOnDataErrors="True" />
</TextBox.Text>
</TextBox>
<Label Grid.Column="0" Grid.Row="1" Content="Bandwidth percentage}" />
<TextBox Grid.Column="1" Grid.Row="1" mah:TextBoxHelper.ClearTextButton="True" mah:ControlsHelper.FocusBorderBrush="{DynamicResource AccentColorBrush}" Width="70" >
<TextBox.Text>
<Binding Path="Criteria1BandwidthPercentage" TargetNullValue="{x:Static sys:String.Empty}" UpdateSourceTrigger="LostFocus" ValidatesOnDataErrors="True" />
</TextBox.Text>
</TextBox>
</Grid>
</ContextMenu>
</Rectangle.ContextMenu>
On mouse hover I get this highlighting effect where the background turns dark grey:
How can I remove this highlighting effect?
UPDATE
The context menu appears only via right click. When setting ContextMenu Background="Red" and Grid Background="Red", the menu looks like this:
When the mouse enters or is inside the menu or even if I click inside the text boxes, it looks like this:
EDIT: This is the default ContextMenu style:
<Style x:Key="ContextMenuDefaultStyle" TargetType="{x:Type ContextMenu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Background" Value="{DynamicResource MenuPopupBackgroundBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{DynamicResource MenuPopupBorderBrush}"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="Grid.IsSharedSizeScope" Value="True"/>
<Setter Property="HasDropShadow" Value="{DynamicResource {x:Static SystemParameters.DropShadowKey}}"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="FontFamily" Value="{DynamicResource {x:Static SystemFonts.MessageFontFamilyKey}}"/>
<Setter Property="FontSize" Value="{DynamicResource {x:Static SystemFonts.MessageFontSizeKey}}"/>
<Setter Property="FontWeight" Value="{DynamicResource {x:Static SystemFonts.MessageFontWeightKey}}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<Border Uid="Border_93">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Setter Property="Tag" Value="{DynamicResource {x:Static SystemParameters.DropShadowKey}}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource Self}}" Value="True">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="0,0,5,5"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="4" Opacity="0.8" ShadowDepth="1"/>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Uid="Border_50">
<ScrollViewer CanContentScroll="True" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}" Uid="ScrollViewer_9">
<ItemsPresenter KeyboardNavigation.DirectionalNavigation="Cycle" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Uid="ItemsPresenter_5"/>
</ScrollViewer>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<ContextMenu Background="Transparent">
Isn't that all you need?

WPF ComboBox Dropdropdown SelectedItem Background

I use a FlatComboBox Style. Everything is working just like I want it to. I just to change one thing, the Background of the Selected Item in the DropDown. How can I change the color? I'm using Windows 8 and .Net 4. But the solution should also run with older Windows Versions. I save this Style in a ResourceDictionary.
My Code for the Style:
<!-- Flat ComboBox -->
<SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="#e3e9ef" />
<SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" Color="#fff" />
<SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" Color="#eee" />
<SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" Color="#888" />
<ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Name="Border" BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" CornerRadius="0" BorderThickness="1, 1, 1, 1" Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
<Border Grid.Column="1" Margin="1, 1, 1, 1" BorderBrush="#444" Name="ButtonBorder" CornerRadius="0, 0, 0, 0" BorderThickness="0, 0, 0, 0" Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
<Path Name="Arrow" Grid.Column="1" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" HorizontalAlignment="Center" Fill="#444" VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
<Setter Property="Shape.Fill" TargetName="Arrow" Value="#FF8D979E"/>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
<Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
<Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>
<Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
<Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}">
<Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
<Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="TextElement.Foreground" Value="Black"/>
<Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton Name="ToggleButton" Grid.Column="2" ClickMode="Press" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Template="{StaticResource ComboBoxToggleButtonTemplate}"/>
<ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False" HorizontalAlignment="Left" VerticalAlignment="Center" Content="{TemplateBinding ComboBox.SelectionBoxItem}"
ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
<TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3" IsReadOnly="{TemplateBinding IsReadOnly}" Visibility="Hidden" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Center"
Focusable="True" >
<TextBox.Template>
<ControlTemplate TargetType="TextBox" >
<Border Name="PART_ContentHost" Focusable="False" />
</ControlTemplate>
</TextBox.Template>
</TextBox>
<!-- Popup showing items -->
<Popup Name="Popup" Placement="Bottom" Focusable="False" AllowsTransparency="True" IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}" PopupAnimation="Slide">
<Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding FrameworkElement.ActualWidth}" MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
<Border Name="DropDownBorder" Background="White" Margin="0, 1, 0, 0" CornerRadius="0" BorderThickness="1,1,1,1" BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"/>
<ScrollViewer Margin="4" SnapsToDevicePixels="True">
<ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.HasItems" Value="False">
<Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="ItemsControl.IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
</Trigger>
<Trigger Property="ComboBox.IsEditable" Value="True">
<Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
<Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
<Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- End of Flat ComboBox -->
Working Solution
I had to replace the TextBlock with a ContentPresenter to get it working, when the ItemsSource is a DataTable.
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ComboBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border Background="{TemplateBinding Background}" BorderThickness="0" Margin="2">
<!--<TextBlock Text="{TemplateBinding Content}" Margin="2" />-->
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="AliceBlue" />
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>

You can define a style (with a trigger) for the ItemContainerStyle of your ComboBox.
<Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}">
<Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
<!-- .... -->
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ComboBoxItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
</Style>
<!-- End of Flat ComboBox -->
EDIT
I post my Whole Window XAML:
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="Window1" Height="300" Width="300">
<Window.Resources>
<!-- Flat ComboBox -->
<SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="#e3e9ef" />
<SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" Color="#fff" />
<SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" Color="#eee" />
<SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" Color="#888" />
<ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="2" Name="Border" BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" CornerRadius="0" BorderThickness="1, 1, 1, 1" Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
<Border Grid.Column="1" Margin="1, 1, 1, 1" BorderBrush="#444" Name="ButtonBorder" CornerRadius="0, 0, 0, 0" BorderThickness="0, 0, 0, 0" Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
<Path Name="Arrow" Grid.Column="1" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" HorizontalAlignment="Center" Fill="#444" VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
<Setter Property="Shape.Fill" TargetName="Arrow" Value="#FF8D979E"/>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
<Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
<Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>
<Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
<Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}">
<Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
<Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="TextElement.Foreground" Value="Black"/>
<Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton Name="ToggleButton" Grid.Column="2" ClickMode="Press" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Template="{StaticResource ComboBoxToggleButtonTemplate}"/>
<ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False" HorizontalAlignment="Left" VerticalAlignment="Center" Content="{TemplateBinding ComboBox.SelectionBoxItem}"
ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
<TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3" IsReadOnly="{TemplateBinding IsReadOnly}" Visibility="Hidden" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Center"
Focusable="True" >
<TextBox.Template>
<ControlTemplate TargetType="TextBox" >
<Border Name="PART_ContentHost" Focusable="False" />
</ControlTemplate>
</TextBox.Template>
</TextBox>
<!-- Popup showing items -->
<Popup Name="Popup" Placement="Bottom" Focusable="False" AllowsTransparency="True" IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}" PopupAnimation="Slide">
<Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding FrameworkElement.ActualWidth}" MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
<Border Name="DropDownBorder" Background="White" Margin="0, 1, 0, 0" CornerRadius="0" BorderThickness="1,1,1,1" BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"/>
<ScrollViewer Margin="4" SnapsToDevicePixels="True">
<ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.HasItems" Value="False">
<Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
</Trigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="ItemsControl.IsGrouping" Value="True">
<Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
</Trigger>
<Trigger Property="ComboBox.IsEditable" Value="True">
<Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
<Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
<Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ComboBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border Background="{TemplateBinding Background}" BorderThickness="0" Margin="2">
<TextBlock Text="{TemplateBinding Content}" Margin="2" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="AliceBlue" />
</Trigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
</Style>
<!-- End of Flat ComboBox -->
</Window.Resources>
<DockPanel>
<ComboBox Height="24" Width="190" Style="{StaticResource ComboBoxFlatStyle}">
<ComboBox.Items>
<sys:String>One</sys:String>
<sys:String>Two</sys:String>
<sys:String>Three</sys:String>
<sys:String>Four</sys:String>
<sys:String>Five</sys:String>
</ComboBox.Items>
</ComboBox>
</DockPanel>
</Window>
And this is the result:

Add the following to your ComboBox-Style:
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green" />
</Style.Resources>
In an application where I have a ComboBox with changed background-brush of the selected item I use the following style-definition:
<Style TargetType="{x:Type ComboBox}">
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="IsEditable" Value="False" />
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="Black" />
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource fokusBrush}" />
<Setter Property="BorderThickness" Value="1.3" />
<Setter Property="Margin" Value="2.5" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#C2E58F" />
</Style.Resources>
</Style>
Maybe that works for you.
I've created a new WPF-Project with your style in the App.xaml. When I add the following to <Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}"> the background of the selected item in the drop-down is red:
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"></SolidColorBrush>
</Style.Resources>
My dummy-ComboBox looks like:
<ComboBox HorizontalAlignment="Left" Margin="101,64,0,0" VerticalAlignment="Top" Width="120"
Style="{StaticResource ComboBoxFlatStyle}" >
<ComboBox.Items>
<ComboBoxItem Content="Blub1"></ComboBoxItem>
<ComboBoxItem Content="Blub1"></ComboBoxItem>
<ComboBoxItem Content="Blub1"></ComboBoxItem>
</ComboBox.Items>
</ComboBox>
Now if you open the drop down and move the cursor over an item -> the background of this item is red.

Bug in WPF user control

I created a user control with a menu in WPF. It was working just fine and now I'm seeing a format issue with the MenuItem.Header. Basically if I add a header where the name has a "_" character it deletes it. For instance, if I add this to the header: "Test_Header_Name," it shows as: "TestHeader_Name." So basically it formats/manipulates the string and deletes the first "_" character. I know things don't just happened out of the blue. I am sure, I must have done something at some point to change the format... but I cannot figure out what it was.
Here is the C# to test the menu:
public partial class MenuControl : UserControl
{
public MenuControl()
{
InitializeComponent();
MenuItem main = new MenuItem();
main.Header = "Sum(Test_Header_Name)";
for (int i = 0; i < 10; i++)
{
main.Items.Add("Test_" + i);
}
main.Items.Add(new Separator());
main.Items.Add("Remove");
this.PrincipalMenu.Items.Add(main);
}
}
And this is the XAML (which is where I think it is happening):
<UserControl x:Class="WindowsFormsApplication1.MenuControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="41" d:DesignWidth="380">
<UserControl.Resources>
<!--**************************
* STYLE: MenuItem
************************** -->
<SolidColorBrush x:Key="HighlightedBackgroundBrush" Color="#FFDEDEDE" />
<SolidColorBrush x:Key="MenuBackgroundBrush" Color="White" />
<SolidColorBrush x:Key="NormalBorderBrush" Color="#FFE5DFDF" />
<SolidColorBrush x:Key="SolidMenuFontBrush" Color="Black" />
<SolidColorBrush x:Key="HighlightedText" Color="White" />
<SolidColorBrush x:Key="menuItemBrush" Color="#FFB7B7B7" />
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Foreground" Value="{StaticResource SolidMenuFontBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<Border
Background="{StaticResource MenuBackgroundBrush}"
BorderBrush="{StaticResource MenuBackgroundBrush}"
BorderThickness="1">
<StackPanel ClipToBounds="True" Orientation="Horizontal" IsItemsHost="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type MenuItem}" TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Border" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
<ColumnDefinition x:Name="Col3" Width="14"/>
</Grid.ColumnDefinitions>
<!-- ContentPresenter to show an Icon if needed -->
<ContentPresenter Grid.Column="0" Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
<!-- Glyph is a checkmark if needed for a checkable menu -->
<Grid Grid.Column="0" Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
<Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
</Grid>
<!-- Content for the menu text etc -->
<ContentPresenter Grid.Column="1" Margin="{TemplateBinding Padding}" x:Name="HeaderHost" RecognizesAccessKey="True" ContentSource="Header"/>
<!-- Content for the menu IGT -->
<ContentPresenter Grid.Column="2" Margin="8,1,8,1" x:Name="IGTHost" ContentSource="InputGestureText" VerticalAlignment="Center"/>
<!-- Arrow drawn path which points to the next level of the menu -->
<Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
</Grid>
<!--IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
-->
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup Placement="Right" IsOpen="{TemplateBinding IsSubmenuOpen}" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="Fade">
<Border x:Name="SubMenuBorder" SnapsToDevicePixels="True" Background="{StaticResource WindowBackgroundBrush}" BorderBrush="{StaticResource SolidBorderBrush}" BorderThickness="1" Padding="2,2,2,2">
<Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
<!--StackPanel holds children of the menu. This is set by IsItemsHost=True-->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
<!--<ScrollViewer CanContentScroll="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</ScrollViewer>-->
</Grid>
</Border>
</Popup>
</Grid>
</Border>
<!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
<ControlTemplate.Triggers>
<!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down
2/6/2013 Luis Garcia
-->
<!--<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
<Setter Property="MinWidth" Value="0" TargetName="Col0"/>
<Setter Property="Width" Value="Auto" TargetName="Col3"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>-->
<!-- Role = TopLevelItem : this is a child menu item from the top level without any child items-->
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
</Trigger>
<!-- Role = SubMenuItem : this is a child menu item which has children-->
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
</Trigger>
<!-- If no Icon is present the we collapse the Icon Content -->
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- The GlyphPanel contains the CheckMark -->
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- Using the system colors for the Menu Highlight and IsEnabled-->
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" Value="{StaticResource HighlightedBackgroundBrush}" TargetName="Border"/>
<Setter Property="Foreground" Value="{StaticResource HighlightedText}"/>
<Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="false">
<Setter Property="Background" Value="{StaticResource MenuBackgroundBrush}" TargetName="Border"/>
<Setter Property="Foreground" Value="{StaticResource SolidMenuFontBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource MenuBackgroundBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<UserControl.Foreground>
<SolidColorBrush />
</UserControl.Foreground>
<Grid Height="24" Width="250" HorizontalAlignment="Left">
<Grid.Background>
<SolidColorBrush />
</Grid.Background>
<Menu Name="PrincipalMenu" Margin="0,0,-100,0">
</Menu>
</Grid>
Any help is greatly appreciated!

Underscores are used in WPF Content controls as accelerator keys.
So adding "E_dit" to a content control causes the "d" to be underlined at runtime.
The user can press ALT-D to move focus to the control.
In your case "Test_Header_Name" it's the "H" is prefixed by the underscore, so it is the accelerator key.
The solution is to use two underscores "__" to stop the accelerator key addition.

My guess is that the first underscore is being turned into an AccessKey for the MenuItem since you are using it in the Header. So in the example above, you probably have an AccessKey of 'h' for your MenuItem. See this answer for more on the subject.
I'm not sure if there's a way to override the behavior, perhaps if you use the ascii code for the underscore or something.

"System.Windows.Data Error: 4" in a dynamic MenuItem

I have a WPF MenuControl to which I add several menu items at run-time. If you are interested in knowing, the reason is that we read the data from a database and need to create the MenuItems based on the data returned. We have what I'd say is a complex menu style (at least complex to read :) ). Now, when I add my menu items I keep getting this error in the Debug window of Visual Studio:
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=HorizontalContentAlignment; DataItem=null; target element is 'MenuItem' (Name=''); target property is 'HorizontalContentAlignment' (type 'HorizontalAlignment')
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='System.Windows.Controls.ItemsControl', AncestorLevel='1''. BindingExpression:Path=VerticalContentAlignment; DataItem=null; target element is 'MenuItem' (Name=''); target property is 'VerticalContentAlignment' (type 'VerticalAlignment')
Those two repeat several times I guess based on the number of MenuItems added. The other odd behavior I have noticed is that, after these errors come up in the debug window, the MenuControl drops down (opens) on its own, just by moving the mouse over it (not clicking on it as normally done). So, I guess one has to do with the other.
Any ideas what is going on?? The MenuControlCode is rather long but if needed, I can post it as well.
Here is the XAML code of the MenuControl. After that, in the code I just use the "PrincipalMenu" and add MenuItems to it as needed:
<UserControl x:Class="EOGMapControl.MainPropertyGUI.MenuControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="41" d:DesignWidth="380">
<UserControl.Resources>
<SolidColorBrush x:Key="HighlightedBackgroundBrush" Color="#FFDEDEDE" />
<SolidColorBrush x:Key="MenuBackgroundBrush" Color="White" />
<SolidColorBrush x:Key="NormalBorderBrush" Color="#FFE5DFDF" />
<SolidColorBrush x:Key="SolidMenuFontBrush" Color="Black" />
<SolidColorBrush x:Key="HighlightedText" Color="White" />
<SolidColorBrush x:Key="menuItemBrush" Color="#FFB7B7B7" />
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Foreground" Value="{StaticResource SolidMenuFontBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<Border
Background="{StaticResource MenuBackgroundBrush}"
BorderBrush="{StaticResource MenuBackgroundBrush}"
BorderThickness="1">
<StackPanel ClipToBounds="True" Orientation="Horizontal" IsItemsHost="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type MenuItem}" TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
<ColumnDefinition x:Name="Col3" Width="14"/>
</Grid.ColumnDefinitions>
<!-- ContentPresenter to show an Icon if needed -->
<ContentPresenter Grid.Column="0" Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
<!-- Glyph is a checkmark if needed for a checkable menu -->
<Grid Grid.Column="0" Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
<Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
</Grid>
<!-- Content for the menu text etc -->
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
x:Name="HeaderHost"
RecognizesAccessKey="True"
ContentSource="Header"/>
<!-- Content for the menu IGT -->
<ContentPresenter Grid.Column="2"
Margin="8,1,8,1"
x:Name="IGTHost"
ContentSource="InputGestureText"
VerticalAlignment="Center"/>
<!-- Arrow drawn path which points to the next level of the menu -->
<Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
</Grid>
<!--IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}"
PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}"
-->
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup Placement="Right" IsOpen="{TemplateBinding IsSubmenuOpen}" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="Fade">
<Border x:Name="SubMenuBorder" SnapsToDevicePixels="True" Background="{StaticResource WindowBackgroundBrush}" BorderBrush="{StaticResource SolidBorderBrush}" BorderThickness="1" Padding="2,2,2,2">
<Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
<!--StackPanel holds children of the menu. This is set by IsItemsHost=True-->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
<!--<ScrollViewer CanContentScroll="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</ScrollViewer>-->
</Grid>
</Border>
</Popup>
</Grid>
</Border>
<!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
<ControlTemplate.Triggers>
<!-- Role = TopLevelItem : this is a child menu item from the top level without any child items-->
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
</Trigger>
<!-- Role = SubMenuItem : this is a child menu item which has children-->
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
</Trigger>
<!-- If no Icon is present the we collapse the Icon Content -->
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- The GlyphPanel contains the CheckMark -->
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- Using the system colors for the Menu Highlight and IsEnabled-->
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" Value="{StaticResource HighlightedBackgroundBrush}" TargetName="Border"/>
<Setter Property="Foreground" Value="{StaticResource HighlightedText}"/>
<Setter Property="BorderBrush" Value="{StaticResource NormalBorderBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="false">
<Setter Property="Background" Value="{StaticResource MenuBackgroundBrush}" TargetName="Border"/>
<Setter Property="Foreground" Value="{StaticResource SolidMenuFontBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource MenuBackgroundBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<UserControl.Foreground>
<SolidColorBrush />
</UserControl.Foreground>
<Grid Height="24" Width="250" HorizontalAlignment="Left">
<Grid.Background>
<SolidColorBrush />
</Grid.Background>
<Menu Name="PrincipalMenu" Margin="0,0,-100,0">
</Menu>
</Grid>

Kindly refer the below link:
http://www.codeproject.com/Tips/124556/How-to-suppress-the-System-Windows-Data-Error-warn
The solution is, set data binding source switch level as critical in constructor of the class.
public TestSample() //constructor of the class
{
InitializeComponent();
System.Diagnostics.PresentationTraceSources.DataBindingSource.Switch.Level = System.Diagnostics.SourceLevels.Critical;
}

Removing thin border around the menuitems

I based a custom menu on some code I once received. It looks OK, but I'm going crazy over how to remove the thin black border around the entire section of menuitems?! Where is this border/padding defined?
Thanks to any WPF guru that might help me with this :)
Valid XHTML http://img843.imageshack.us/img843/8813/testn.png
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="HighlightedBackgroundBrush" Color="#003466" />
<SolidColorBrush x:Key="MenuBackgroundBrush" Color="#003466" />
<SolidColorBrush x:Key="NormalBorderBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="SolidMenuFontBrush" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="HighlightedText" Color="#FFFFFFFF" />
<Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<Border Background="{DynamicResource AppBackground}"
BorderBrush="{DynamicResource AppBackground}"
BorderThickness="1">
<StackPanel ClipToBounds="True" Orientation="Vertical" IsItemsHost="True"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type MenuItem}" TargetType="{x:Type MenuItem}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border x:Name="Border" BorderThickness="1">
<Grid Background="{DynamicResource AppBackground}">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Col0" MinWidth="17" Width="Auto" SharedSizeGroup="MenuItemIconColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuTextColumnGroup"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="MenuItemIGTColumnGroup"/>
<ColumnDefinition x:Name="Col3" />
</Grid.ColumnDefinitions>
<!-- ContentPresenter to show an Icon if needed -->
<ContentPresenter Grid.Column="0" Margin="4,0,6,0" x:Name="Icon" VerticalAlignment="Center" ContentSource="Icon"/>
<!-- Glyph is a checkmark if needed for a checkable menu -->
<Grid Grid.Column="0" Visibility="Hidden" Margin="4,0,6,0" x:Name="GlyphPanel" VerticalAlignment="Center">
<Path x:Name="GlyphPanelpath" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,2 L0,4.8 L2.5,7.4 L7.1,2.8 L7.1,0 L2.5,4.6 z" FlowDirection="LeftToRight"/>
</Grid>
<!-- Content for the menu text etc -->
<ContentPresenter Grid.Column="1"
Margin="{TemplateBinding Padding}"
x:Name="HeaderHost"
RecognizesAccessKey="True"
ContentSource="Header"/>
<!-- Content for the menu IGT -->
<ContentPresenter Grid.Column="2"
Margin="8,1,8,1"
x:Name="IGTHost"
ContentSource="InputGestureText"
VerticalAlignment="Center"/>
<!-- Arrow drawn path which points to the next level of the menu -->
<Grid Grid.Column="3" Margin="4,0,6,0" x:Name="ArrowPanel" VerticalAlignment="Center">
<Path x:Name="ArrowPanelPath" HorizontalAlignment="Right" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" Data="M0,0 L0,8 L4,4 z"/>
</Grid>
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" x:Name="SubMenuPopup" Focusable="false" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}">
<Border x:Name="SubMenuBorder" BorderBrush="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}" BorderThickness="1" Padding="2,2,2,2">
<Grid x:Name="SubMenu" Grid.IsSharedSizeScope="True">
<!-- StackPanel holds children of the menu. This is set by IsItemsHost=True -->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"/>
</Grid>
</Border>
</Popup>
</Grid>
</Border>
<!-- These triggers re-configure the four arrangements of MenuItem to show different levels of menu via Role -->
<ControlTemplate.Triggers>
<!-- Role = TopLevelHeader : this is the root menu item in a menu; the Popup expands down -->
<Trigger Property="Role" Value="TopLevelHeader">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Placement" Value="Bottom" TargetName="SubMenuPopup"/>
<Setter Property="MinWidth" Value="2" TargetName="Col0"/>
<Setter Property="Width" Value="Auto" TargetName="Col3"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="IGTHost"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = TopLevelItem : this is a child menu item from the top level without any child items-->
<Trigger Property="Role" Value="TopLevelItem">
<Setter Property="Padding" Value="6,1,6,1"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<!-- Role = SubMenuHeader : this is a child menu item which does not have children -->
<Trigger Property="Role" Value="SubmenuHeader">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
</Trigger>
<!-- Role = SubMenuItem : this is a child menu item which has children-->
<Trigger Property="Role" Value="SubmenuItem">
<Setter Property="DockPanel.Dock" Value="Top"/>
<Setter Property="Padding" Value="0,2,0,2"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="ArrowPanel"/>
</Trigger>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter Property="PopupAnimation" Value="None" TargetName="SubMenuPopup"/>
</Trigger>
<!-- If no Icon is present the we collapse the Icon Content -->
<Trigger Property="Icon" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- The GlyphPanel contains the CheckMark -->
<Trigger Property="IsChecked" Value="true">
<Setter Property="Visibility" Value="Visible" TargetName="GlyphPanel"/>
<Setter Property="Visibility" Value="Collapsed" TargetName="Icon"/>
</Trigger>
<!-- Using the system colors for the Menu Highlight and IsEnabled-->
<Trigger Property="IsHighlighted" Value="true">
<Setter Property="Background" Value="{DynamicResource HighlightedBackgroundBrush}" TargetName="Border"/>
<Setter Property="Foreground" Value="{DynamicResource HighlightedText}"/>
<Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="false">
<Setter Property="Background" Value="{DynamicResource AppBackground}" TargetName="Border"/>
<Setter Property="Foreground" Value="{DynamicResource SolidMenuFontBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AppBackground}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

...
<!-- The Popup is the body of the menu which expands down or across depending on the level of the item -->
<Popup ...>
<Border x:Name="SubMenuBorder" ... Padding="0">...</Border>...</Popup>

Develop Reference

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

WPF C# - Change the brush of a menu's background - c#

You can't do it without overriding the template for the menu item. Deep inside the template is a control called "Part_Popup". You need to change it's background color.

Related

How to remove ContextMenu highlight effect?

WPF ComboBox Dropdropdown SelectedItem Background

Bug in WPF user control

"System.Windows.Data Error: 4" in a dynamic MenuItem

Removing thin border around the menuitems

Categories

Resources