This example creates an application that uses the WPF Hamburger Menu Control to navigate between views that are defined in the MVVM views.
Files to Review
- MainPage.xaml (VB: MainPage.xaml)
- MainWindow.xaml (VB: MainWindow.xaml)
- SimplePage.xaml (VB: SimplePage.xaml)
- MainPage_SubPage.xaml
- ViewModel.cs (VB: ViewModel.vb)
- HamburgerTemplateSelector.cs
Documentation
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
Hamburger/MainPage.xaml
XAML<dxwui:NavigationPage x:Class="Hamburger.MainPage"
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"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Main Page" />
</Grid>
</dxwui:NavigationPage>
Hamburger/MainWindow.xaml
XAML<Window xmlns:dxwui="http://schemas.devexpress.com/winfx/2008/xaml/windowsui" x:Class="Hamburger.MainWindow"
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:ViewModel="clr-namespace:Hamburger.ViewModel"
xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Hamburger"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525"
xmlns:templateSelector="clr-namespace:Hamburger.TemplateSelectors">
<Window.DataContext>
<ViewModel:MainViewModel/>
</Window.DataContext>
<Window.Resources>
<DataTemplate x:Key="HamburgerMenuItemTemplate" DataType="{x:Type ViewModel:HamburgerMenuItemViewModel}">
<dxwui:HamburgerMenuNavigationButton Content="{Binding Caption}" NavigationTargetTypeName="{Binding PageName}" />
</DataTemplate>
<DataTemplate x:Key="HamburgerSubMenuItemTemplate" DataType="{x:Type ViewModel:HamburgerSubMenuItemViewModel}">
<dxwui:HamburgerSubMenuNavigationButton Content="{Binding Caption}" NavigationTargetTypeName="{Binding PageName}"/>
</DataTemplate>
</Window.Resources>
<dxwui:HamburgerMenu IsMenuVisible="{Binding IsMenuVisible}" ItemsSource="{Binding Items}" AllowBuiltInNavigation="True"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
<dxwui:HamburgerMenu.ItemTemplateSelector>
<templateSelector:HamburgerMenuItemTemplateSelector ItemTemplate="{StaticResource HamburgerMenuItemTemplate}">
<templateSelector:HamburgerMenuItemTemplateSelector.SubItemTemplate>
<DataTemplate>
<dxwui:HamburgerSubMenu Content="{Binding Caption}" ItemsSource="{Binding SubItems}" MoreButtonVisibilityMode="Hidden" ItemTemplate="{StaticResource HamburgerSubMenuItemTemplate}" />
</DataTemplate>
</templateSelector:HamburgerMenuItemTemplateSelector.SubItemTemplate>
</templateSelector:HamburgerMenuItemTemplateSelector>
</dxwui:HamburgerMenu.ItemTemplateSelector>
<!--<dxwui:HamburgerSubMenu ItemsSource="{Binding SubItems}" ItemTemplate="{StaticResource HamburgerSubMenuItemTemplate}"/>-->
</dxwui:HamburgerMenu>
</Window>
Hamburger/SimplePage.xaml
XAML<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>
Hamburger/MainPage_SubPage.xaml
XAML<dxwui:NavigationPage x:Class="Hamburger.MainPage_SubPage"
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:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Hamburger"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="SubMenu" />
</Grid>
</dxwui:NavigationPage>
Hamburger/ViewModel.cs(vb)
C#using DevExpress.Mvvm;
using System.Collections.ObjectModel;
using System;
namespace Hamburger.ViewModel {
public class MainViewModel : NavigationViewModelBase {
public HamburgerMenuItemViewModel SelectedItem {
get { return GetProperty(() => SelectedItem); }
set { SetProperty(() => SelectedItem, value); }
}
public bool IsMenuVisible {
get { return GetProperty(() => IsMenuVisible); }
set { SetProperty(() => IsMenuVisible, value); }
}
public ObservableCollection<HamburgerMenuItemViewModel> Items {
get { return GetProperty(() => Items); }
set { SetProperty(() => Items, value); }
}
public ObservableCollection<HamburgerSubMenuItemViewModel> SubItems
{
get { return GetProperty(() => SubItems); }
set { SetProperty(() => SubItems, value); }
}
INavigationService NavigationService { get { return GetService<INavigationService>(); } }
public MainViewModel() {
Items = new ObservableCollection<HamburgerMenuItemViewModel>();
Items.Add(new HamburgerSubMenuItemViewModel("Main Page", typeof(MainPage)) {
SubItems = new ObservableCollection<HamburgerSubMenuItemViewModel>() {
new HamburgerSubMenuItemViewModel("SubMenu1", typeof(MainPage)),
new HamburgerSubMenuItemViewModel("SubMenu", typeof(MainPage_SubPage))
}
});
Items.Add(new HamburgerMenuItemViewModel("Simple Page", typeof(SimplePage)));
SelectedItem = Items[0];
IsMenuVisible = true;
}
}
public class HamburgerMenuItemViewModel : ISupportParentViewModel {
public string Caption { get; set; }
public Type PageName { get; set; }
public ObservableCollection<HamburgerSubMenuItemViewModel> SubItems { get; internal set; }
public object ParentViewModel { get; set; }
public HamburgerMenuItemViewModel(string caption, Type pageName) {
Caption = caption;
PageName = pageName;
}
}
public class HamburgerSubMenuItemViewModel : HamburgerMenuItemViewModel
{
public HamburgerSubMenuItemViewModel(string caption, Type pageName) : base(caption, pageName) {}
}
}
Hamburger/HamburgerTemplateSelector.cs
C#using Hamburger.ViewModel;
using System.Windows;
using System.Windows.Controls;
namespace Hamburger.TemplateSelectors
{
public class HamburgerMenuItemTemplateSelector : DataTemplateSelector
{
public DataTemplate ItemTemplate { get; set; }
public DataTemplate SubItemTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item is HamburgerSubMenuItemViewModel)
return SubItemTemplate;
if (item is HamburgerMenuItemViewModel)
return ItemTemplate;
return base.SelectTemplate(item, container);
}
}
}