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.v18.2.dll

Declaration

public class HamburgerMenu :
    Control,
    IHamburgerMenuStateSupportInternal
Public Class HamburgerMenu
    Inherits Control
    Implements IHamburgerMenuStateSupportInternal

Remarks

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

HamburgerMenu_Items

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

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
HamburgerMenu

Implements

DevExpress.UI.Xaml.Layout.Internal.IHamburgerMenuStateSupportInternal
See Also