Customizing Menu and MenuItem

Introduction

MenuItems can contain sub-items. This page discusses how to customize individual MenuItem instances as well as the container that holds MenuItem instances (ScrollViewer).

Customizing MenuItem Text Color

var menu = new Menu();
menu.AddToRoot();

var fileMenuItem = new MenuItem();
menu.Items.Add(fileMenuItem);
fileMenuItem.Header = "File";

var random = new System.Random();

for (int i = 0; i < 10; i++)
{
    var item = new MenuItem();
    item.Header = "File " + i;
    var itemVisual = (MenuItemVisual)item.Visual;
    // Remove the color values from the states so they can
    // be set directly
    itemVisual.ForegroundColor = new Color(
        100 + random.Next(155),
        100 + random.Next(155),
        100 + random.Next(155));

    fileMenuItem.Items.Add(item);
}

For more information on working with TextRuntime instances, see the TextRuntime page.

Customizing Sub-Item Background (ScrollViewer)

Each MenuItem can contain sub-items which appear when the user hovers over the MenuItem. These sub-items are shown as children of a ScrollViewer instance. This pop-up ScrollViewer can be customized by assigning the MenuItem.ScrollViewerVisualTemplate property.

The following code shows how to customize the ScrollViewer so it has a red background.

var menu = new Menu();
menu.AddToRoot();

var menuItem = new MenuItem();
menu.Items.Add(menuItem);
menuItem.ScrollViewerVisualTemplate = new VisualTemplate(() =>
{
    var visual = new ScrollViewerVisual();
    visual.BackgroundColor = Color.Red;
    return visual;
}); 

menuItem.Header = "File";

for( int i = 0; i < 10; i++)
{
    var subItem = new MenuItem();
    subItem.Header = $"Sub Item {i + 1}";
    menuItem.Items.Add(subItem);
}

File menu displaying sub-items on a red background