小广告
今年开始使用简书，同时也产生了写博文的兴趣了，在写完文章发现没有.NET专题，于是创建了.NET专题也希望大家多多投稿,欢迎来"搞"!
吐槽
吐槽一下博客园，本来下了很大的勇气将UWP汉堡菜单的使用发到了博客园并提交到了首页,可惜被移除了，太失望了，不知道博客园是什么审核机制，吐槽完毕！
前面说道了UWP汉堡菜单的使用,今天主要是以MVVM的模式来实现汉堡菜单和大家分享，有什么不正确的地方望指正，我也是初学者，有什么问题也可以在微博上与我讨论。
项目结构图
汉堡菜单
1.XAML
XAML代码和前面的几乎一致，需要注意的是数据绑定的模式。
x:Class="HamburgNavigation.View.MainView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:HamburgNavigation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<ResourceDictionary>
<DataTemplate x:Key="MenuItemDataTemplate">
<StackPanel Orientation="Horizontal">
<SymbolIcon Symbol="{Binding Icon}" />
<TextBlock Text="{Binding Text}" Margin="18" />
</StackPanel>
</DataTemplate>
</ResourceDictionary>
</Page.Resources>
<Grid x:Name="rootGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView x:Name="mainSplitView" OpenPaneLength="150" CompactPaneLength="45" PaneBackground="LightGray" DisplayMode="CompactOverlay" IsPaneOpen="{Binding IsPaneOpen,Mode=TwoWay}">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button x:Name="hamburgButton" FontFamily="Segoe MDL2 Assets" Content="" FontSize="24" Command="{Binding HamburgButtonCommand}" />
<TextBlock Margin="10,10,0,0" Text="{Binding HamburgTitle}" />
</StackPanel>
<ListView Grid.Row="1" x:Name="mainListView" ItemsSource="{Binding MenuItems}" ItemTemplate="{StaticResource MenuItemDataTemplate}" />
</Grid>
</SplitView.Pane>
<Frame>
</Frame>
</SplitView>
</Grid>
</Page>
2.ViewModel
public class MainViewModel : NotficationObject
{
private ObservableCollection<MenuItem> _menuItems;
/// <summary>
/// 汉堡菜单集合
/// </summary>
public ObservableCollection<MenuItem> MenuItems
{
get { return _menuItems; }
set
{
_menuItems = value;
ProperyChange("MenuItems");
}
}
private bool _isPaneOpen;
/// <summary>
/// 汉堡菜单是否打开
/// </summary>
public bool IsPaneOpen
{
get { return _isPaneOpen; }
set
{
_isPaneOpen = value;
ProperyChange("IsPaneOpen");
}
}
private string _hamburgTitle;
/// <summary>
/// 汉堡菜单标题名称
/// </summary>
public string HamburgTitle
{
get { return _hamburgTitle; }
set
{
_hamburgTitle = value;
ProperyChange("HamburgTitle");
}
}
public MainViewModel()
{
HamburgTitle = "汉堡菜单";
MenuItems = new ObservableCollection<MenuItem>()
{
new MenuItem() { Icon=Symbol.People,Text="People"},
new MenuItem() { Icon=Symbol.Phone,Text="Phone" },
new MenuItem() { Icon=Symbol.Message, Text="Message"},
new MenuItem() { Icon=Symbol.Mail,Text="Mail"}
};
HamburgButtonCommand = new DelegateCommand();
HamburgButtonCommand.ExecuteAction = new Action<object>(HamburgButton);
}
public DelegateCommand HamburgButtonCommand { get; private set; }
private void HamburgButton(object paramenter)
{
IsPaneOpen = IsPaneOpen ? false : true;
}
}
3.使用
在MainView的构造函数中添加如下代码即可。
DataContext = new MainViewModel();
4.源码
度娘盘
参考地址：DataBinding msdn
END
