Menu and Command Controls

The content model of a Menu consists of a collection of MenuItem and Separator objects. Typically, a Menu contains a set of top-level MenuItem objects representing the various drop-down menus, and each of those MenuItems contains a set of MenuItems and Separators representing the items on that drop-down menu:

CopyXML

<ms:Menu>
  <ms:MenuItem Header="File">  <!-- Top-level menu bar entry -->
    <ms:MenuItem Header="New" />  <!-- Item on the File menu -->
    <ms:MenuItem Header="Open" />
    <ms:Separator />
    <ms:MenuItem Header="Export">  <!-- Opens a cascading submenu -->
      <ms:MenuItem Header="BMP" />  <!-- Item on the cascading submenu -->
      <ms:MenuItem Header="JPEG" />
      <ms:MenuItem Header="PNG" />
    </ms:MenuItem>
    <ms:Separator />
    <ms:MenuItem Header="Exit" />
  </ms:MenuItem>
  <ms:MenuItem Header="Edit">
    <!-- Edit menu items go here -->
  </ms:MenuItem>
  <!-- Further top-level menu items -->
</ms:Menu>

A menu item may be made into a toggle item via the IsCheckable property, and can be shown with an icon via the Icon property:

CopyXML

<ms:Menu>
  <ms:MenuItem Header="View">
    <ms:MenuItem Header="Toolbar" IsCheckable="True" IsChecked="True" />
    <ms:MenuItem Header="StatusBar" IsCheckable="True" />
    <ms:Separator />
    <ms:MenuItem Header="Zoom In">
      <ms:MenuItem.Icon>
        <Image Source="magnifier-plus.png" Width="16" Height="14" />
      </ms:MenuItem.Icon>
    </ms:MenuItem>
    <ms:MenuItem Header="Zoom Out">
      <ms:MenuItem.Icon>
        <Image Source="magnifier-minus.png" Width="16" Height="14" />
      </ms:MenuItem.Icon>
    </ms:MenuItem>
  </ms:MenuItem>
</ms:Menu>

Context Menu

The ContextMenu control represents a pop-up menu that appears independently of any menu bar, typically in response to a user action such as a right-click or a command-click. To display a ContextMenu, set its IsOpen property to true. The contents of a ContextMenu are set up in the same way as a Menu.

SplitButton

The SplitButton control displays a button which the user can click normally, but with an arrow that the user can select to drop down a selection of alternative commands. It is typically used where it’s important for the user to be able to rapidly access a “typical” command, but you also want to provide convenient access to variations or alternative commands. For example, in a search application you could use a split button for “get more results,” with the default action being to get the next 20 results but the drop-down offering options to get the next 10, 50 or 100 results instead.

The drop-down options are specified via the DropDownItems property, and may be MenuItems or Separators. For example:

CopyXML

<ms:SplitButton Content="Get Next Results">
  <ms:SplitButton.DropDownItems>
    <ms:MenuItem Header="Next 10 Results" />
    <ms:MenuItem Header="Next 20 Results" />
    <ms:MenuItem Header="Next 50 Results" />
    <ms:MenuItem Header="Next 100 Results" />
    <ms:Separator />
    <ms:MenuItem Header="All Results" />
  </ms:SplitButton.DropDownItems>
</ms:SplitButton>