Skip to main content

WPF Hamburger Menu: MVVM Support

  • 3 minutes to read

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

Use the HamburgerMenuNavigationButtonBase<TOwner>.NavigationTargetTypeName or HamburgerMenuNavigationButtonBase<TOwner>.NavigationTargetType property to specify the navigation target page for a button. See the example below.

<dxwui:HamburgerMenu>
    <dxwui:HamburgerMenuNavigationButton Content="My Page" NavigationTargetTypeName="MyPage"/>
</dxwui: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.

This example illustrates how to create an application that uses the Hamburger Menu for navigation based on the MVVM design pattern.

View Example

<dxwui:NavigationPage x:Class="Hamburger.SimplePage"
      xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Hamburger"
      mc:Ignorable="d" >

    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" >
            <TextBlock Text="The menu is hidden" HorizontalAlignment="Center" />
            <Button Content="Show menu"
                    Command="{Binding Path=ToggleViewStateCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type dxwui:HamburgerMenu}}}"/>
        </StackPanel>
    </Grid>
</dxwui:NavigationPage>