MVVM Support

• Dec 16, 2019
• 3 minutes to read

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.

XAML

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

XAML

<Page x:Class="DXSample.MyPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DXSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="LightGreen">
        <TextBlock Text="My Page" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="32" FontWeight="Bold"/>
    </Grid>
</Page>

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.

XAML

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

C#

using DevExpress.Mvvm;
using System.Collections.ObjectModel;

namespace DXSample.ViewModel {
    public class MainViewModel : NavigationViewModelBase {
        HamburgerMenuItemViewModel selectedItem = null;
        bool isMenuVisible = true;
        public HamburgerMenuItemViewModel SelectedItem {
            get { return selectedItem; }
            set { SetProperty(ref selectedItem, value, OnSelectedItemChanged); }
        }
        public bool IsMenuVisible {
            get { return isMenuVisible; }
            set { SetProperty(ref isMenuVisible, value); }
        }
        public ObservableCollection<HamburgerMenuItemViewModel> Items { get; } = new ObservableCollection<HamburgerMenuItemViewModel>();
        INavigationService NavigationService { get { return GetService<INavigationService>(); } }
        public MainViewModel() {
            string defaultIcon = "M0,0 L0,16 L16,16 z";
            Items.Add(new HamburgerMenuItemViewModel(defaultIcon, "Main Page", "MainPage"));
            Items.Add(new HamburgerMenuItemViewModel(defaultIcon, "Simple Page", "SimplePage"));
            SelectedItem = Items[0];
        }
        protected void OnSelectedItemChanged(HamburgerMenuItemViewModel oldValue, HamburgerMenuItemViewModel newValue) {
            if(newValue != null) {
                IsMenuVisible = newValue.Caption != "Simple Page";                
            }
        }
    }
    public class HamburgerMenuItemViewModel {
        public string Icon { get; set; }
        public string Caption { get; set; }
        public string PageName { get; set; }
        public HamburgerMenuItemViewModel(string icon, string caption, string pageName) {
            Icon = icon;
            Caption = caption;
            PageName = pageName;
        }
    }
}

XAML

<Page x:Class="DXSample.SimplePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DXSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Simple Page" />
    </Grid>
</Page>

XAML

<Page x:Class="DXSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DXSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Main Page" />
    </Grid>
</Page>

C#

//...
    sealed partial class App : Application
    {
        public App()
        /// ...
        protected override void OnLaunched(LaunchActivatedEventArgs e)
        {

            Frame rootFrame = Window.Current.Content as Frame;

            if (rootFrame == null)
            {
                MainViewModel viewModel = new MainViewModel();
                ((ISupportServices)viewModel).ServiceContainer.RegisterService(new NavigationService());
                // Create a Frame to act as the navigation context and navigate to the first page
                rootFrame = new HamburgerMenuFrame(typeof(HamburgerMenuPage)) { ViewModel = viewModel, DataContext = viewModel };                
                //...
            }
        }
//...