Getting Started
- 3 minutes to read
The main component of the Hamburger Menu is the HamburgerMenuFrame that represents a frame with two views. One view displays the HamburgerMenu, which is used to display navigation commands to end-users. The other view displays pages to which an end-user navigates using these commands. In the image below, you can see an application that uses the Hamburger Menu Frame as a root application frame. When an end-user clicks/taps a navigation button in the left-side menu, the navigation target page is displayed on the right-side area.
To use the HamburgerMenu navigation in your application, drop the HamburgerMenuFrame from the Toolbox to the application’s main page in Visual Studio.
The HamburgerMenuFrame contains the HamburgerMenu as its content. You can populate the menu with navigation buttons and specify navigation target pages for the buttons. For this, use the button’s NavigationTargetTypeName or NavigationTargetType property. For more details and examples, see the HamburgerMenu class.
You can also use the HamburgerMenuFrame as a root frame of your application. Create a HamburgerMenuFrame instance and set it as a visual root element in the application’s OnLaunched method, as shown below.
sealed partial class App : Application {
// ...
protected override void OnLaunched(LaunchActivatedEventArgs e) {
// ...
Frame rootFrame = Window.Current.Content as Frame;
// Do not repeat app initialization when the Window already has content,
// just ensure that the window is active
if (rootFrame == null)
{
// Create a Frame to act as the navigation context and navigate to the first page.
// The constructor's parameter specifies the page used to render the menu.
rootFrame = new DevExpress.UI.Xaml.Layout.HamburgerMenuFrame(typeof(HamburgerMenuPage));
// Place the frame in the current Window
Window.Current.Content = rootFrame;
}
}
}
In this case, you are using the HamburgerMenuFrame constructor with the hamburgerMenuPageType parameter that specifies the page used to render the menu. The specified page should contain the HamburgerMenu as a child. See the example below.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App13"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Layout="using:DevExpress.UI.Xaml.Layout"
x:Class="MyApp.HamburgerMenuPage"
mc:Ignorable="d">
<Layout:HamburgerMenu>
<Layout:HamburgerMenu.BottomBarItems>
<Layout:HamburgerMenuBottomBarNavigationButton NavigationTargetTypeName="SettingsPage">
<SymbolIcon Symbol="Setting"/>
</Layout:HamburgerMenuBottomBarNavigationButton>
<Layout:HamburgerMenuBottomBarNavigationButton NavigationTargetTypeName="FeedbackPage">
<SymbolIcon Symbol="Emoji2"/>
</Layout:HamburgerMenuBottomBarNavigationButton>
</Layout:HamburgerMenu.BottomBarItems>
<Layout:HamburgerMenuNavigationButton Content="Home" IsSelected="True" NavigationTargetTypeName="HomePage">
<Layout:HamburgerMenuNavigationButton.Icon>
<SymbolIcon Symbol="Home"/>
</Layout:HamburgerMenuNavigationButton.Icon>
</Layout:HamburgerMenuNavigationButton>
<Layout:HamburgerMenuNavigationButton Content="My Page" NavigationTargetTypeName="MyPage" Placement="Bottom">
<Layout:HamburgerMenuNavigationButton.Icon>
<SymbolIcon Symbol="Page"/>
</Layout:HamburgerMenuNavigationButton.Icon>
</Layout:HamburgerMenuNavigationButton>
<Layout:HamburgerMenuHyperlinkButton Content="Support" HorizontalContentAlignment="Center" NavigateUri="https://www.devexpress.com/Support/"/>
</Layout:HamburgerMenu>
</Page>
Alternatively, you can use our Template Gallery to create an application with a predefined Hamburger Menu and page templates.
Click FILE | New | Project… to invoke the New Project dialog. In the invoked New Project dialog, select the Visual C# group, select the DevExpress v19.2 Template Gallery pattern, and click OK.
Select the Windows 10 Apps platform and choose a language. Then, select the Hamburger Menu item (or the Hamburger Menu (MVVM) item if you also need the ViewModel template) and click the Create Project button.
