UWP汉堡菜单之MVVM模式实现

小广告
今年开始使用简书，同时也产生了写博文的兴趣了，在写完文章发现没有.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="&#xE700;" 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