MVVM Support

The Hamburger Menu allows you to implement the MVVM design pattern.

Use the HamburgerMenuNavigationIconButton.NavigationTargetTypeName or HamburgerMenuNavigationIconButton.NavigationTargetType property to specify the navigation target page for a button. See the example below.

<Layout:HamburgerMenu>
    <Layout:HamburgerMenuNavigationButton Content="My Page" NavigationTargetTypeName="MyPage"/>
</Layout:HamburgerMenu>

Another approach is to generate menu items based on a data source collection. Use the HamburgerMenu.ItemsSource property to bind the menu to data. The HamburgerMenu.ItemTemplate property allows you to specify the template used to render items from the data source. Use the HamburgerMenu.ItemTemplateSelector property to implement custom template selection logic.

For sub menus, use the HamburgerSubMenu.ItemsSource, HamburgerSubMenu.ItemTemplate and HamburgerSubMenu.ItemTemplateSelector properties.

For the bottom bar, use the HamburgerMenu.BottomBarItemsSource, HamburgerMenu.BottomBarItemTemplate, HamburgerMenu.BottomBarItemTemplateSelector properties.

See the example below.

<Page x:Class="DXSample.HamburgerMenuPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DXSample"
    xmlns:ViewModel="using:DXSample.ViewModel"
    xmlns:Layout="using:DevExpress.UI.Xaml.Layout"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <DataTemplate x:Key="HamburgerMenuItemTemplate" x:DataType="ViewModel:HamburgerMenuItemViewModel">
            <Layout:HamburgerMenuNavigationButton Content="{x:Bind Caption}" IconSource="{x:Bind Icon}" NavigationTargetTypeName="{x:Bind PageName}" />
        </DataTemplate>
    </Page.Resources>
    <Layout:HamburgerMenu WindowTitle="Hamburger Menu Demo" IsMenuVisible="{Binding IsMenuVisible}" ItemsSource="{Binding Items}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" ItemTemplate="{StaticResource HamburgerMenuItemTemplate}"/>
</Page>