# Other .NET Programming > Windows Presentation Foundation (WPF) & XAML forum >  Menu Item color change in wpf

## syr

Hi ,

I have attaached with my project window menu bar for review .

When i selected menu item its highlited with blue color .i dont want that color bec my req is like that.
Please send me reply asap. bec its very urgent for me.

please review the attachment.

----------


## MMH

Put Background as white: something like this.



```
<MenuItem x:Name="mnuFile" Header="File" Background="White" Foreground="SteelBlue"/>
```

It will remove Blue hovering effect.
I hope this is what you want.

----------


## syr

Thanks for your reply and its not working for me.please let me know.

----------


## MMH

> Thanks for your reply and its not working for me.please let me know.


Can you paste the lines of code that you have coded for menu item ?

----------


## syr

Please check the following code.Thanks for your fast reply.

<Menu Margin="12,0,0,0" Name="menuManageData" Height="26" VerticalAlignment="Top" Background="White" HorizontalAlignment="Left" Width="302">
                                <MenuItem Header="Search For Form" Click="SearchFrm_Click" Foreground="#FF0093BD" ForceCursor="True" Background="White" FontFamily="Arial" OverridesDefaultStyle="False" Focusable="True" HeaderStringFormat="Bold" />
                                <MenuItem Header="Search and Replace" Click="SearchReplace_Click" Foreground="#FF0093BD" FontFamily="Arial" />
                                <MenuItem Header="Add New Form" Foreground="#FF0093BD" Click="AddNewFrm_Click" Background="White" FontFamily="Arial" />
                            </Menu>

----------


## MMH

> Please check the following code.Thanks for your fast reply.
> 
> <Menu Margin="12,0,0,0" Name="menuManageData" Height="26" VerticalAlignment="Top" Background="White" HorizontalAlignment="Left" Width="302">
> <MenuItem Header="Search For Form" Click="SearchFrm_Click" Foreground="#FF0093BD" ForceCursor="True" Background="White" FontFamily="Arial" OverridesDefaultStyle="False" Focusable="True" HeaderStringFormat="Bold" />
> <MenuItem Header="Search and Replace" Click="SearchReplace_Click" Foreground="#FF0093BD" FontFamily="Arial" />
> <MenuItem Header="Add New Form" Foreground="#FF0093BD" Click="AddNewFrm_Click" Background="White" FontFamily="Arial" />
> </Menu>


Hi, Can you tell me whether setting Background = "White" for menuItem works? or doent not work completely?

In your code i found that, for 2nd menuItem Background="White" is missed out.

Please check it. I have tested this in both VS2008 and VS2008 EE.

----------


## syr

I am using C# 2008 express edition and when  i change the background to white to all menu items still it is showing blue whem mouse hover.

Thank you for your continuous support .

----------


## MMH

> I am using C# 2008 express edition and when i change the background to white to all menu items still it is showing blue whem mouse hover.
> 
> Thank you for your continuous support .


Whenever you want to change the appearance of a control, consider using Control Templates. Put this code in App.xaml.

I would recommend you to make a separate resource file and put the below code. You can google to know how to use resource file.



```
<Style x:Key="{x:Type Menu}" TargetType="{x:Type Menu}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Menu}">
<Border 
Background="White"
BorderBrush="Transparent"
BorderThickness="1">
<StackPanel ClipToBounds="True" Orientation="Horizontal" IsItemsHost="True"/>
</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.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="White"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
```

----------


## syr

Thanks its worked.

----------


## hs9211

Hello I have the exact same problem but cannot implement the solution because I have stand alone xaml and no App.xaml

Here is my code

<Menu Name="MainMenu115" Width="1002" Height="25" Margin=" 0,160,20,50" VerticalAlignment="Top" HorizontalAlignment="Left" Background="#FF1B9E3E" Foreground="White" >
        <MenuItem Name="MainMenuItem116" Header="New Menu 116" Width="125" Height="25" VerticalAlignment="Top" HorizontalAlignment="Left" Background="#FF1B9E3E" Foreground="White"  />
</Menu>

It displays blue background when menu item is highlighted

----------


## Arjay

> Hello I have the exact same problem but cannot implement the solution because I have stand alone xaml and no App.xaml


You can still use the template technique, just put the code in the resource section of the xaml file (rather than in the app.xaml file).

----------


## hs9211

Thanks I did that and its working

----------


## ouflak

Hi guys,

Basically I've got the same question. I applied the suggested fix 'inline' as below:



```
        <Menu Name="menu1" Width="125" BorderThickness="2" 
              BorderBrush="Gray" FontSize="16" FontStyle="Italic" Background="Transparent">          
                <MenuItem Header="MENU" Foreground="White" VerticalAlignment="Center" 
                          Margin="-70,0,0,0" Height="24" Padding="6,3" Width="100" 
                          Background="Transparent" Name="Item1">
                    <MenuItem.Style>
                        <Style TargetType="{x:Type MenuItem}">
                            <Style.Triggers>
                                <Trigger Property="IsHighlighted" Value="True" >
                                    <Setter Property="Background" Value="Yellow" />
                                    <Setter Property="FontStyle" Value="Italic" />
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </MenuItem.Style>               
                <MenuItem Header="Component Data">
                    .
                    .
                    .
                    and so on...
```

For some reason, putting this style right into the element code doesn't seem to be working. I can go ahead do the full-blown template if need be. Maybe that will be useful later, but I'd certainly like to just be able to just put this small bit of code in and get it working quickly. Will putting the style directly into the element definition like this work? Or is a template referenced via a resource the only way a Trigger is recognized?

----------


## ouflak

Alright so I've given up on trying to inline the stuff. Too bad. That would be convenient to do for just quick experimentation here and there. 

Anyway I've now got everything in the Resource file and its working as expected BUT, I have some Header text in my menuitem element. That text disappears when the highlight trigger does its thing. I want the text to stay. Here are the relevant code snippets:

Resource file:


```
    <LinearGradientBrush x:Key="BackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="LightGreen" Offset="0.0"/>
                <GradientStop Color="DarkGreen" Offset="0.25"/>
                <GradientStop Color="LightGreen" Offset="0.75"/>
                <GradientStop Color="LightGreen" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>

    <Style x:Key="MenuStyle1" TargetType="{x:Type Menu}">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Menu}">
                    <Border 
                        Background="{StaticResource BackgroundBrush}"
                        BorderBrush="DarkGray"
                        BorderThickness="1">

                        <StackPanel ClipToBounds="True" Orientation="Horizontal" 
                                    IsItemsHost="True">
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate 
            x:Key="MenuItemTemplate1" 
            TargetType="{x:Type MenuItem}">
        <Border Name="Border" >
            <Grid>
                <ContentPresenter 
                    Margin="6,3,6,3" 
                    ContentSource="Header"
                    RecognizesAccessKey="True"/>                
            </Grid>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsHighlighted" Value="true">
                <Setter TargetName="Border" Property="Background" Value="White"/>
                <Setter TargetName="Border" Property="Opacity" Value=".1"/>
                <Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Foreground" Value="Gray"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</ResourceDictionary>
```

The main window element:


```
        <Menu Grid.Row="2" HorizontalAlignment="Left" Margin="32.5,37.5,0,50" 
              Name="menu1" Width="67.5" Style="{StaticResource MenuStyle1}">
            <MenuItem Name="Item1" Template="{StaticResource MenuItemTemplate1}"
                      Width="60" Header="MENU" FontStyle="Italic" Foreground="White">                
            </MenuItem>
        </Menu>
```

So nothing complex here. You can see for the 'Header' I've got a value "MENU". This is what disappears when I now hit the highlight trigger. I am applying a slight opaque color. The background of the element does not change (as I would expect it wouldn't), but the Header value goes. I'll keep messing with it and if I track this down, I'll post the solution here. Any insight would be great!

----------

