HamburgerMenu Class

Represents a collapsible navigation menu that displays a stack of navigation buttons. Supports regular buttons, sub-menus, hyperlinks, check and radio buttons.

Namespace: DevExpress.UI.Xaml.Layout

Assembly: DevExpress.UI.Xaml.Layout.v21.2.dll

NuGet Package: DevExpress.Uwp.Controls

Declaration

C#

[Bindable]
[ContentProperty(Name = "Items")]
[TemplatePart(Name = "PART_Header", Type = typeof(ContentPresenter))]
[TemplatePart(Name = "PART_RootGrid", Type = typeof(Grid))]
[TemplatePart(Name = "PART_TopItemsPanel", Type = typeof(HamburgerMenuItemsPanel))]
[TemplatePart(Name = "PART_BottomItemsPanel", Type = typeof(HamburgerMenuItemsPanel))]
[TemplatePart(Name = "PART_BottomBarItemsPanel", Type = typeof(HamburgerMenuBottomBarPanel))]
public class HamburgerMenu :
    Control,
    IHamburgerMenuStateSupportInternal

VB.NET

<Bindable>
<ContentProperty(Name:="Items")>
<TemplatePart(Name:="PART_Header", Type:=GetType(ContentPresenter))>
<TemplatePart(Name:="PART_RootGrid", Type:=GetType(Grid))>
<TemplatePart(Name:="PART_TopItemsPanel", Type:=GetType(HamburgerMenuItemsPanel))>
<TemplatePart(Name:="PART_BottomItemsPanel", Type:=GetType(HamburgerMenuItemsPanel))>
<TemplatePart(Name:="PART_BottomBarItemsPanel", Type:=GetType(HamburgerMenuBottomBarPanel))>
Public Class HamburgerMenu
    Inherits Control
    Implements IHamburgerMenuStateSupportInternal

Remarks

The image below shows the main menu, the bottom bar, and buttons of the HamburgerMenu.

The following XAML code snippet shows how to create the menu illustrated in the image above.

XAML

xmlns:Layout="using:DevExpress.UI.Xaml.Layout"

<Layout:HamburgerMenu
    WindowTitle="{Binding Title}"
    AllowCustomizingWindowTitle="{Binding AllowCustomizingWindowTitle}"
    Header="{Binding Header}"
    ShowMenuOnEmptySpaceBarClick="{Binding ShowMenuOnEmptySpaceBarClick}"
    AvailableViewStates="{Binding AvailableViewStates}"
    Width="250">

    <Layout:HamburgerMenu.Items>

        <Layout:HamburgerMenuNavigationButton Content="New Mail"
                                              NavigationTargetType="local:HamburgerMenuDemo_NewMailPage"
                                              HideMenuWhenSelected="True">
            <Layout:HamburgerMenuNavigationButton.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="&#xE710;" />
            </Layout:HamburgerMenuNavigationButton.Icon>
        </Layout:HamburgerMenuNavigationButton>

        <Layout:HamburgerSubMenu Content="Folders">
            <Layout:HamburgerSubMenu.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="&#xE8B7;" />
            </Layout:HamburgerSubMenu.Icon>


            <Layout:HamburgerSubMenu.Items>

                <Layout:HamburgerSubMenuNavigationButton Content="Outbox"
                                                         RightContent="12"
                                                         NavigationTargetType="local:HamburgerMenuDemo_OutboxPage"/>

                <Layout:HamburgerSubMenuNavigationButton Content="Inbox"
                                                         RightContent="142"
                                                         ShowInPreview="True"
                                                         NavigationTargetType="local:HamburgerMenuDemo_InboxPage"/>

                <Layout:HamburgerSubMenuNavigationButton Content="Drafts"
                                                         RightContent="2"
                                                         ShowInPreview="True"
                                                         NavigationTargetType="local:HamburgerMenuDemo_DraftsPage"/>

                <Layout:HamburgerSubMenuNavigationButton Content="Junk"
                                                         NavigationTargetType="local:HamburgerMenuDemo_JunkPage"/>

                <Layout:HamburgerSubMenuNavigationButton Content="Sent"
                                                         RightContent="452"
                                                         ShowInPreview="True"
                                                         PreviewContent="Sent Items"
                                                         NavigationTargetType="local:HamburgerMenuDemo_SentPage"/>

                <Layout:HamburgerSubMenuNavigationButton Content="Trash"
                                                         RightContent="15"
                                                         NavigationTargetType="local:HamburgerMenuDemo_TrashPage"/>

            </Layout:HamburgerSubMenu.Items>


        </Layout:HamburgerSubMenu>


        <Layout:HamburgerMenuHyperlinkButton Content="Additional Information"
                                             NavigateUri="https://documentation.devexpress.com/#Win10Apps/CustomDocument12019"/>

        <Layout:HamburgerMenuNavigationButton Content="Settings"
                                              NavigationTargetType="local:HamburgerMenuDemo_SettingsPage"
                                              Placement="Bottom">
            <Layout:HamburgerMenuNavigationButton.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                      Glyph="&#xE713;" />
            </Layout:HamburgerMenuNavigationButton.Icon>
        </Layout:HamburgerMenuNavigationButton>

        <Layout:HamburgerMenuNavigationButton Content="Close Window"
                                              Placement="Bottom"
                                              SelectOnClick="False"
                                              Command="{Binding CloseWindowCommand, Mode=OneTime}">
            <Layout:HamburgerMenuNavigationButton.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets"
                          Glyph="&#xE711;" />
            </Layout:HamburgerMenuNavigationButton.Icon>
        </Layout:HamburgerMenuNavigationButton>

    </Layout:HamburgerMenu.Items>


    <Layout:HamburgerMenu.BottomBarItems>

        <Layout:HamburgerMenuBottomBarRadioButton GroupName="AppGroup"
                                                  IsChecked="{Binding IsCalendarRadioButtonChecked, Mode=TwoWay}">
            <FontIcon FontFamily="Segoe MDL2 Assets"
                      Glyph="&#xE787;" />
        </Layout:HamburgerMenuBottomBarRadioButton>

        <Layout:HamburgerMenuBottomBarRadioButton GroupName="AppGroup"
                                                  IsChecked="{Binding IsMailRadioButtonChecked, Mode=TwoWay}">
            <FontIcon FontFamily="Segoe MDL2 Assets"
                      Glyph="&#xE715;" />
        </Layout:HamburgerMenuBottomBarRadioButton>

        <Layout:HamburgerMenuBottomBarCheckBox Placement="Right"
                                               IsChecked="{Binding IsCheckBoxChecked, Mode=TwoWay}">
            <FontIcon FontFamily="Segoe MDL2 Assets"
                      Glyph="&#xE008;" />
        </Layout:HamburgerMenuBottomBarCheckBox>

    </Layout:HamburgerMenu.BottomBarItems>


</Layout:HamburgerMenu>

Inheritance

Object

DependencyObject

Windows.UI.Xaml.UIElement

FrameworkElement

Control

HamburgerMenu