编程/网页:左侧汉堡店菜单菜单(类于:一号店、当当网)怎么写?

在Win10之前WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式可以左右切换,非常方便全景视图因为对设计要求比较高,自己总是做不出好的效果对於一般的新闻阅读类App来说,Pivot更适合多个频道的展示因为内容基本都是一样的。

到了Win10微软模仿其他平台也推出了汉堡店菜单菜单,但并沒有提供现成的控件而是需要开发者通过一个名为SplitView的控件来实现。我个人并不觉得左上角的菜单有多么方便汉堡店菜单菜单的使用必嘫会改变以前的导航模式,比如以前底部的AppBar使用很频繁现在可以通过汉堡店菜单菜单的按钮来切换不同的页面。因此之前的App的导航模式需要重新设计

假设有A、B、C三个平行的页面,可以在每个页面的左侧都放个汉堡店菜单菜单也可以像web的框架页一样,做一个壳汉堡店菜单菜单只放在外面的框架里,点击不同的按钮在content里实现不同页面的导航。我比较倾向第二种之前在做澎湃新闻uwp的时候就使用了这种方式,后来看了下Template10的模板也是用的这种方式,在主页面外层套了一个Frame而且还实现 了一个汉堡店菜单菜单控件。有兴趣的同学可以参考Template10來快速生成一个带汉堡店菜单菜单的基础AppGithub地址: ,这个项目还带了很多好东西比如一些常用的帮助类和一些behavior等,值得uwp开发者好好学习

我没有直接使用T10的模板,以下介绍的还是当时使用MVVM-Sidekick框架实现的页面内导航

考虑我们要实现的目的:在主页面放置一个汉堡店菜单菜单,在右侧的content中实现不同页面的导航

汉堡店菜单菜单每个选项一般是由一个图标和一个文字组成,我还是使用FontAwesomeFont这个字体来显示图标如何使用这个字体来做图标,可参考我之前的blog首先建立一个菜单的类NavMenuItem,放在Models目录下使用provm代码段生成两个属性:

我要回帖

更多关于 汉堡菜单 的文章

 

随机推荐