How to set Background in WPF MenuItem?

Question

I create popup menu like this.

<DockPanel.ContextMenu>      <ContextMenu Background="#CD252220" Opacity="0.95" Foreground="LightGray" BorderBrush="DarkGray">         <MenuItem Header="_Save Image..." x:Name="btSave" IsEnabled="False" Click="btSave_Click" Style="{StaticResource MyStyle}">             <MenuItem.Icon>                 <Image Source="icons/save.png" Width="16" Height="16" Style="{StaticResource IconStyle}"/>             </MenuItem.Icon>         </MenuItem>     </ContextMenu> </DockPanel.ContextMenu>

Why left-side part of this menu is WHITE?????

http://itrash.ru/idb/40e872e71346dcf9bd58ba8aec0b2a17/omenu.png.html - menu screenshot

P.S. In XP it's OK. Menu is White only on Vista (don't have W7)

Answer 1

I noticed the same thing in my application, have not worked on it yet.  I am sure we will have to modify the control template.  The Control Template for the context menu is probably using system colors or something that is specific to the OS.  I will post a solution If I get some time to work on it and figure it out.


Got this from Style Snooper.

<Style TargetType="{x:Type ContextMenu}" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    <Style.Resources>
        <ResourceDictionary />
        </Style.Resources>
    <Setter Property="Panel.Background">
        <Setter.Value>
            <SolidColorBrush>
                #FFF5F5F5</SolidColorBrush>
            </Setter.Value>
        </Setter>
    <Setter Property="TextElement.FontFamily">
        <Setter.Value>
            <DynamicResource ResourceKey="{x:Static SystemFonts.MenuFontFamilyKey}" />
            </Setter.Value>
        </Setter>
    <Setter Property="TextElement.FontSize">
        <Setter.Value>
            <DynamicResource ResourceKey="{x:Static SystemFonts.MenuFontSizeKey}" />
            </Setter.Value>
        </Setter>
    <Setter Property="TextElement.FontStyle">
        <Setter.Value>
            <DynamicResource ResourceKey="{x:Static SystemFonts.MenuFontStyleKey}" />
            </Setter.Value>
        </Setter>
    <Setter Property="TextElement.FontWeight">
        <Setter.Value>
            <DynamicResource ResourceKey="{x:Static SystemFonts.MenuFontWeightKey}" />
            </Setter.Value>
        </Setter>
    <Setter Property="TextElement.Foreground">
        <Setter.Value>
            <DynamicResource ResourceKey="{x:Static SystemColors.MenuTextBrushKey}" />
            </Setter.Value>
        </Setter>
    <Setter Property="Control.VerticalContentAlignment">
        <Setter.Value>
            <x:Static Member="VerticalAlignment.Center" />
            </Setter.Value>
        </Setter>
    <Setter Property="Border.BorderThickness">
        <Setter.Value>
            <Thickness>
                1,1,1,1</Thickness>
            </Setter.Value>
        </Setter>
    <Setter Property="Border.BorderBrush">
        <Setter.Value>
            <SolidColorBrush>
                #FF959595</SolidColorBrush>
            </Setter.Value>
        </Setter>
    <Setter Property="Control.Padding">
        <Setter.Value>
            <Thickness>
                2,2,2,2</Thickness>
            </Setter.Value>
        </Setter>
    <Setter Property="Grid.IsSharedSizeScope">
        <Setter.Value>
            <s:Boolean>
                True</s:Boolean>
            </Setter.Value>
        </Setter>
    <Setter Property="ContextMenuService.HasDropShadow">
        <Setter.Value>
            <DynamicResource ResourceKey="{x:Static SystemParameters.DropShadowKey}" />
            </Setter.Value>
        </Setter>
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ContextMenu}">
                <mwt:SystemDropShadowChrome Color="#00FFFFFF" Name="Shdw" SnapsToDevicePixels="True">
                    <Border BorderThickness="{TemplateBinding Border.BorderThickness}" BorderBrush="{TemplateBinding Border.BorderBrush}" Background="{TemplateBinding Panel.Background}">
                        <Grid>
                            <Rectangle RadiusX="2" RadiusY="2" Fill="#FFF1F1F1" Width="28" Margin="2,2,2,2" HorizontalAlignment="Left" />
                            <Rectangle Fill="#FFE2E3E3" Width="1" Margin="30,2,0,2" HorizontalAlignment="Left" />
                            <Rectangle Fill="#FFFFFFFF" Width="1" Margin="31,2,0,2" HorizontalAlignment="Left" />
                            <ScrollViewer CanContentScroll="True" Style="{DynamicResource {ComponentResourceKey TypeInTargetAssembly=FrameworkElement, ResourceId=MenuScrollViewer}}" Margin="1,0,1,0" Grid.ColumnSpan="2">
                                <ItemsPresenter Margin="{TemplateBinding Control.Padding}" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" KeyboardNavigation.DirectionalNavigation="Cycle" />
                                </ScrollViewer>
                            </Grid>
                        </Border>
                    </mwt:SystemDropShadowChrome>
                <ControlTemplate.Triggers>
                    <Trigger Property="ContextMenuService.HasDropShadow">
                        <Setter Property="FrameworkElement.Margin" TargetName="Shdw">
                            <Setter.Value>
                                <Thickness>
                                    0,0,5,5</Thickness>
                                </Setter.Value>
                            </Setter>
                        <Setter Property="mwt:SystemDropShadowChrome.Color" TargetName="Shdw">
                            <Setter.Value>
                                <Color>
                                    #71000000</Color>
                                </Setter.Value>
                            </Setter>
                        <Trigger.Value>
                            <s:Boolean>
                                True</s:Boolean>
                            </Trigger.Value>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 2

I find a better solution - you have to just set property OverridesDefaultStyle in Style-defenition section ;)

<Style x:Key="{x:Type ContextMenu}" TargetType="{x:Type ContextMenu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ContextMenu}">
<Border Background="#CD222120" CornerRadius="7, 7, 8, 8" BorderBrush="DarkGray" BorderThickness="2" Opacity="0.96">
<StackPanel ClipToBounds="True" Orientation="Vertical" IsItemsHost="True" Margin="5,4,5,4"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="{x:Static MenuItem.TopLevelItemTemplateKey}" TargetType="{x:Type MenuItem}">
<Border Name="Border" >
<Grid>
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
</Grid>
</Border>
</ControlTemplate>

Answer 3

Thanks!