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.Xpf.WindowsUI
Assembly: DevExpress.Xpf.Controls.v23.2.dll
NuGet Package: DevExpress.Wpf.Controls
Declaration
public class HamburgerMenu :
ContentControl,
ISupportSelection,
INavigationOwner,
IHamburgerMenuRelated API Members
The following members return HamburgerMenu objects:
Remarks
The image below shows the main menu, the bottom bar, and buttons of the Hamburger Menu.
The XAML snippet below illustrates how to define ThemedWindow that uses a Hamburger Menu for navigation.
<dx:ThemedWindow x:Class="DXApplication1.MainWindow"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui"
xmlns:dxwuin="http://schemas.devexpress.com/winfx/2008/xaml/windowsui/navigation"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
xmlns:local="clr-namespace:DXApplication1"
mc:Ignorable="d"
Title="MainWindow">
<dxwui:HamburgerMenu OpenPaneWidth="200"
SelectedItem="{Binding HamburgerMenuSelectedItem, Mode=TwoWay}"
NavigationTarget="{Binding ElementName=service}">
<dxwui:HamburgerMenu.Content>
<dxwui:NavigationFrame Source="{x:Type local:Home}">
<dxmvvm:Interaction.Behaviors>
<dxwuin:FrameNavigationService x:Name="service"/>
</dxmvvm:Interaction.Behaviors>
</dxwui:NavigationFrame>
</dxwui:HamburgerMenu.Content>
<dxwui:HamburgerMenuNavigationButton Glyph="Icons/Home.png" Content="Home" NavigationTargetType="{x:Type local:Home}"/>
<dxwui:HamburgerMenuItemSeparator/>
<dxwui:HamburgerSubMenu Content="Menu" Glyph="Icons/Menu.png">
<dxwui:HamburgerSubMenu.Items>
<dxwui:HamburgerSubMenuNavigationButton Content="MenuSubItem 1" PreviewContent="PreviewItem 1" ShowInPreview="True" SelectOnClick="False" RightContent="RC"/>
<dxwui:HamburgerSubMenuNavigationButton Content="MenuSubItem 2" PreviewContent="PreviewItem 2" ShowInPreview="True" SelectOnClick="False"/>
<dxwui:HamburgerSubMenuNavigationButton Content="MenuSubItem 3"/>
<dxwui:HamburgerSubMenuNavigationButton Content="MenuSubItem 4" ShowPreviewMark="True"/>
</dxwui:HamburgerSubMenu.Items>
</dxwui:HamburgerSubMenu>
<dxwui:HamburgerMenuHyperlinkButton NavigateUri="https://www.devexpress.com/" Content="More information..." Placement="Bottom"/>
<dxwui:HamburgerMenuNavigationButton NavigationTargetType="{x:Type local:About}" Content="About" Placement="Bottom" Glyph="Icons/About.png"/>
<dxwui:HamburgerMenu.BottomBarItems>
<dxwui:HamburgerMenuBottomBarNavigationButton NavigationTargetType="{x:Type local:Settings}" Glyph="Icons/Settings.png" Placement="Right"/>
<dxwui:HamburgerMenuBottomBarRadioButton GroupName="Radio" Glyph="Icons/Radio1.png"/>
<dxwui:HamburgerMenuBottomBarRadioButton GroupName="Radio" Glyph="Icons/Radio2.png"/>
<dxwui:HamburgerMenuBottomBarCheckBox Glyph="Icons/Check.png"/>
</dxwui:HamburgerMenu.BottomBarItems>
</dxwui:HamburgerMenu>
</dx:ThemedWindow>
The HamburgerMenu is a container that stores the default NavigationFrame. If you want to use the HamburgerMenu with another control, place this control inside the HamburgerMenu.Content property:
<dxwui:HamburgerMenu>
<dxwui:HamburgerMenu.Content>
<dxg:GridControl>
<!-- ... -->
</dxg:GridControl>
</dxwui:HamburgerMenu.Content>
<dxwui:HamburgerMenuNavigationButton .../>
<!-- ... -->
</dxwui:HamburgerMenu>
Refer to the following help topic for more information: Hamburger Menu.
Related GitHub Examples
The following code snippet (auto-collected from DevExpress Examples) contains a reference to the HamburgerMenu class.
Note
The algorithm used to collect these code examples remains a work in progress. Accordingly, the links and snippets below may produce inaccurate results. If you encounter an issue with code examples below, please use the feedback form on this page to report the issue.