Edit this page

Templates Structure

Like most WPF controls, the RadMenu also allows you to template it in order to change the control from the inside. Except for templating the whole control, you can template parts of it or even independent controls related to it. This topic will make you familiar with the:

For more information about templating and how to modify the default templates of the controls from the of UI for WPF suite read Editing Control Templates article on this matter.

RadMenu Template Structure

This section will explain the structure of the RadMenu's template. Here is a snapshot of the template generated in Expression Blend.

It contains the following parts:

  • [Border] - the layout root for the template and is of type Border. Visualizes the background and the border of the RadMenu.

  • [ItemsPresenter] - represents the host control for the RadMenu's items and is of type ItemsPresenter.

RadMenuItem Template Structures

The RadMenuItem uses several templates depending on its place in the hierarchy. Before explaining the template structures, you must understand the different types of menu items depending on the hierarchy.

  • Top-Level Header Items - items that are placed in the top level of the hierarchy and have child items.

  • Top-Level Items - items that are placed in the top level of the hierarchy and don't have child items.

  • Submenu Header Items - items that are not in the top level of the hierarchy and have child items.

  • Submenu Items - items that are not in the top level of the hierarchy and don't have child items.

  • Separator Items - items that are marked as separators.

Depending on this type, the appropriate template is selected. The RadMenuItem exposes several properties of type ControlTemplate, that are used to set the different templates:

  • TopLevelHeaderTemplateKey - represents the template, applied when the item is a Top-Level Header Item.

  • TopLevelItemTemplateKey - represents the template, applied when the item is a Top-Level Item.

  • SubmenuHeaderTemplateKey - represents the template, applied when the item is Submenu Header Item.

  • SubmenuItemTemplateKey - represents the template, applied when the item is Submenu Item.

  • SeparatorTemplateKey - represents the template, applied when the item is Separator Item.

The Template property has the same effect as the SubmenuItemTemplateKey property.

For details about the template parts of the different templates read the following sections:

Top-Level Header Template

This section will explain the structure of the RadMenuItem's Top-Level Header template. Here is a snapshot of the template generated in Expression Blend.

It contains the following parts:

  • RootElement - represents the layout root of the template and is of type Grid.

    • [Border] - represents the border around the item's header and is of type Border.

    • Bg - represents the background of the item's header and is of type Border.

    • [Border] - hosts the item's header and is of type Border.

      • [RadDockPanel] - defines the layout of the header's content and is of type RadDockPanel.

        • Icon - represents the icon of the item and is of type ContentPresenter.

        • GlyphPanel - represents the checked mark of the item and is of type Path.

        • Content - displays the content of the item's header and is of type ContentPresenter.

    • PART_Popup - hosts the submenu items and is of type Popup.

      • DropDownBorder - wraps the content of the Popup and is of type Border.

        • backgroundBorder - used to define the background and the borders of the Popup and is of type Border.

          • [Grid]

            • [Border]- used to define the background and the borders of the Popup and is of type Border.

              • [Border] - used to define the background and the borders of the Popup and is of type Border.
            • [ItemsPresenter] - represents the host control for the submenu items and is of type ItemsPresenter.

    • DisabledBox - appears when the item is disabled and is of type Rectangle.

Top-Level Item Template

This section will explain the structure of the RadMenuItem's Top-Level Item template. Here is a snapshot of the template generated in Expression Blend.

It contains the following parts:

  • RootElement - represents the layout root of the template and is of type Grid.

    • [Border] - represents the border around the item and is of type Border.

    • Bg - represents the background of the item and is of type Border.

    • [Border] - hosts the item's header and is of type Border.

      • [RadDockPanel] - defines the layout of the item's content and is of type RadDockPanel.

        • Icon - represents the icon of the item and is of type ContentPresenter.

        • GlyphPanel - represents the checked mark of the item and is of type Path.

        • Content - displays the content of the item and is of type ContentPresenter.

    • DisabledBox - appears when the item is disabled and is of type Rectangle.

This section will explain the structure of the RadMenuItem's Submenu Header template. Here is a snapshot of the template generated in Expression Blend.

It contains the following parts:

  • RootElement - represents the layout root of the template and is of type Grid.

    • Bg - represents the background of the item's header and is of type Rectangle.

    • [InnerBorder] - hosts the item's header and is of type Border.

      • [RadDockPanel] - defines the layout of the header's content and is of type RadDockPanel.

        • Icon - represents the icon of the item and is of type ContentPresenter.

        • GlyphPanel - represents the checked mark of the item and is of type Path.

        • Content - displays the content of the item's header and is of type ContentPresenter.

        • [Path] - represents the expand arrow and is of type Path.

    • PART_Popup - hosts the submenu items and is of type Popup.

      • DropDownBorder - wraps the content of the Popup and is of type Border.

        • backgroundBorder - used to define the background and the borders of the Popup and is of type Border.

          • [Grid]

            • [Border]- used to define the background and the borders of the Popup and is of type Border.

              • [Border] - used to define the background and the borders of the Popup and is of type Border.
            • [ItemsPresenter] - represents the host control for the submenu items and is of type ItemsPresenter.

    • DisabledBox - appears when the item is disabled and is of type Rectangle.

This section will explain the structure of the RadMenuItem's Submenu Item template. Here is a snapshot of the template generated in Expression Blend.

It contains the following parts:

  • RootElement - represents the layout root of the template and is of type Grid.

    • Bg - represents the background of the item's header and is of type Rectangle.

    • [InnerBorder] - hosts the item's header and is of type Border.

      • [RadDockPanel] - defines the layout of the header's content and is of type RadDockPanel.

        • Icon - represents the icon of the item and is of type ContentPresenter.

        • GlyphPanel - represents the checked mark of the item and is of type Path.

        • Content - displays the content of the item's header and is of type ContentPresenter.

        • [Path] - represents the expand arrow and is of type Path.

    • DisabledBox - appears when the item is disabled and is of type Rectangle.

Separator Template

This section will explain the structure of the RadMenuItem's Separator template. Here is a snapshot of the template generated in Expression Blend.

It contains the following parts:

  • [Grid] - represents the layout root of the template and is of type Grid.

    • [Rectangle] - represents the top part of the separator and is of type Rectangle.

    • [Rectangle] - represents the bottom part of the separator and is of type Rectangle.

    • Bg - represents the element that binds to the control's properties and is of type Rectangle.

See Also