小廣告
今年開始使用簡(jiǎn)書列粪，同時(shí)也產(chǎn)生了寫博文的興趣了，在寫完文章發(fā)現(xiàn)沒有.NET專題，于是創(chuàng)建了.NET專題也希望大家多多投稿,歡迎來"搞"!
吐槽
吐槽一下博客園，本來下了很大的勇氣將UWP漢堡菜單的使用發(fā)到了博客園并提交到了首頁(yè),可惜被移除了营罢，太失望了，不知道博客園是什么審核機(jī)制饼齿，吐槽完畢饲漾！
前面說道了UWP漢堡菜單的使用,今天主要是以MVVM的模式來實(shí)現(xiàn)漢堡菜單和大家分享，有什么不正確的地方望指正缕溉，我也是初學(xué)者考传，有什么問題也可以在微博上與我討論。
項(xiàng)目結(jié)構(gòu)圖
漢堡菜單
1.XAML
XAML代碼和前面的幾乎一致证鸥，需要注意的是數(shù)據(jù)綁定的模式僚楞。
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>
/// 漢堡菜單標(biāo)題名稱
/// </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的構(gòu)造函數(shù)中添加如下代碼即可。
DataContext = new MainViewModel();
4.源碼
度娘盤
參考地址：DataBinding msdn
END
