How to apply a color for a radmenuitem if it is selected?

Question

Code:

<telerik:RadMenuItem Header="Home" x:Name="radMenuHome" />

How to apply a color for a radmenuitem if it is selected? I want to have the selected menu item to be in gray color. Thanks.

Answer 1

I have no idea about the RadMenuItem class, but I can only assume that it extends the MenuItem class. If this is the case, then this answer should still make sense. The WPF MenuItem has what I would call a bug in it... this short example demonstrates this:

<Menu>
    <Menu.Resources>
        <Style TargetType="{x:Type MenuItem}">
            <Style.Triggers>
                <Trigger Property="MenuItem.IsHighlighted" Value="True">
                    <Setter Property="MenuItem.Foreground" Value="Red" />
                    <Setter Property="MenuItem.Background" Value="Black" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Menu.Resources>
    <MenuItem Header="One" />
    <MenuItem Header="Two">
        <MenuItem Header="Three" />
    </MenuItem>
</Menu>

As you can see, the MenuItem.Foreground correctly changes to Red as you mouse over the MenuItems, but the Background does not. This is because of the way that the default MenuItem Controltemplate was defined. You can find this default template in the Menu Styles and Templates page on MSDN.

So the correct way to achieve what you want is to define a new ControlTemplate for the MenuItem that is based on the default one from the linked page. To make it more tricky for you, you'll actually find four ControlTemplates in the default one... these are for the TopLevelHeader, TopLevelItem and SubmenuHeader and SubmenuItem so you can actually style top level and child MenuItems differently.

Anyway, looking at these ControlTemplates, you should see the following Trigger (from the linked page):

<Trigger Property="IsHighlighted"
         Value="true">
  <Setter Property="Background"
          TargetName="Border">
    <Setter.Value>
      <LinearGradientBrush StartPoint="0,0"
                           EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
          <GradientStopCollection>
            <GradientStop Color="{StaticResource ControlLightColor}" />
            <GradientStop Color="{StaticResource ControlMouseOverColor}"
                          Offset="1.0" />
          </GradientStopCollection>
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>

    </Setter.Value>
  </Setter>
</Trigger>

Changing the Setter.Value here should have the effect that you want, but you'd need to do it all the ControlTemplates that you find it in. My last tip for you is that when defining new ControlTemplates, you should start with the default XAML and then edit and make your changes only once you have seen it working and the control(s) look as they should do by default. Also, keep running the project to see if it still works for every few changes that you make. Good luck.

---

UPDATE >>>

I just found the WPF XAML MenuItem Styles page of Jim Nuzzi's blog, which has further explanations of customising the WPF Menu and MenuItem classes for you.

Answer 2

Try this (only for web/.NET scenario):

protected void RadMenu1_ItemDataBound(object sender, Telerik.Web.UI.RadMenuEventArgs e)
{
    if (e.Item.NavigateUrl == Request.Url.LocalPath)
    {
        e.Item.ForeColor = System.Drawing.Color.White;
        e.Item.BackColor = System.Drawing.Color.Gray;
    }
}

Note: add OnItemDataBound="RadMenu1_ItemDataBound" to your Telerik:RadMenu tag