Skip to content
Tim Heuer edited this page Oct 25, 2013 · 5 revisions

Menu/MenuItem/ToggleMenuItem (Obsolete)

DEPRECATED

This control is deprecated in favor of using the Windows.UI.Xaml.Controls.MenuFlyout controls in Windows 8.1. Visit Callisto Migration Tips for specific information.

What it is

Menu is a special type of Flyout which serves the purpose for Menu commands. Most of the time this will be from an AppBar or a header area. The intent is text commands only and not meant always to be styled.

In WinRT there is an API called Windows.UI.Popups.PopupMenu. This can be used as a general purpose menu as well but has the limitations of a maximum of 5 items, cannot be styled, and has no toggle representation. I can see how this can be confusing...don't shoot the messenger. PopupMenu also has no XAML representation.

Example Usage

Declarative:

At present, Menu and child items don't work well declaratively -- use at own risk.

Code (as used from an AppBar button):

private void ShowFlyoutMenu(object sender, RoutedEventArgs e)
{
    Flyout f = new Flyout();
    f.PlacementTarget = sender as UIElement;
    f.Placement = PlacementMode.Top;

    Menu menu = new Menu();

    MenuItem mi = new MenuItem();
    mi.Tag = "Easy";
    mi.Tapped += ItemClicked;
    mi.Text = "Easy Game";
    mi.MenuTextMargin = new Thickness(28, 10, 28, 12);

    MenuItem mi2 = new MenuItem();
    mi2.Text = "Medium Game";
    mi2.Tag = "Medium";
    mi2.Tapped += ItemClicked;
    mi2.MenuTextMargin = new Thickness(28, 10, 28, 12);

    MenuItem mi3 = new MenuItem();
    mi3.Text = "Hard Game";
    mi3.Command = new CommandTest();
    mi3.CommandParameter = "test param from command";
    mi3.MenuTextMargin = new Thickness(28, 10, 28, 12);

    ToggleMenuItem tmi = new ToggleMenuItem();
    tmi.Text = "Enable Logging";
    tmi.IsChecked = chk;
    tmi.Tapped += (a, b) =>
        {
            chk = !chk;
        };

    menu.Items.Add(mi);
    menu.Items.Add(mi2);
    menu.Items.Add(new MenuItemSeparator());
    menu.Items.Add(new MenuItem() { Text = "Foobar something really long", Tag = "Long menu option", MenuTextMargin = new Thickness(28,10,28,12) });
    menu.Items.Add(tmi);
    menu.Items.Add(new MenuItemSeparator());
    menu.Items.Add(mi3);
    f.HostMargin = new Thickness(0); // on menu flyouts set HostMargin to 0
    f.Content = menu;
    f.IsOpen = true;
}

Example UI

Menu from Callisto

Known Issues

  • Does not work well declaratively :-(

Clone this wiki locally