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

[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

<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.

HamburgerMenu_Items

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>