IT之家网友分享：使用Windows Template Studio为UWP应用创建汉堡菜单

2017-07-25 15:13来源:IT之家

原标题：IT之家网友分享：使用Windows Template Studio为UWP应用创建汉堡菜单

dO_ob的原创投稿

你还在为写不出漂亮的界面而感到难过吗？你还在为一个汉堡菜单而到处找代码吗？最近微软更新了Template Studio，有了这个插件，你的UWP界面将会更加美观，更加易于维护，话不多说，让我们开始吧！

如果你没有安装Template Studio的话，请前往这里下载，并按照提示安装。

安装完成后，打开Visual Studio，选择新建项目->Windows通用，你就会看到Windows Template Studio这一项，输入你要创建的项目名称，点击确定。

因为微软的服务器在国外，而且Template Studio的加载需要连接微软，所以会有一些慢，并不是卡住了，所以不用着急，耐心等待即可。

当Template Studio加载完成时，你会看到如下界面，这时候我们选择Navigation Pane这一项，其实就是我们常说的汉堡菜单（Hamburger Menu），直播，点击Next。

这时你会看到很多选项，包括空页面，设置页面等等，我们只需要点击相应选项下的加号添加我们所需的页面即可，添加的页面会在右侧的Pages里面显示。

因为这个简易教程是以我的课程设计（IEEE封装和CRC算法演示）为例的，所以我们添加三个页面即可（IEEE，CRC，Settings），点击Create（之后又是一段时间的等待，真的是相当长的一段时间）。

经过了很长时间的等待之后，vs总算是创建完了工程（跟性能无关，只是要联网，你懂得），打开资源管理器，我们所创建的页面都会在Views这个文件夹下面。

话不多说，我们试着在不进行任何操作的情况下直接编译运行试试，项目会自动生成一个汉堡菜单（而且是根据窗口大小自适应的哦，这个后面再说），可以看到包含了我们创建的3个页面，当然这里CRC和IEEE两个页面都是空的，然而在Settings页面里，我们可以进行明暗两种主体的切换，效果如图：

接下来就是激动人心的时刻了，我们要进行代码的填充（因为代码我已经提前写好了，所以我只是说明代码粘贴的位置），首先来到IEEEPage.xaml，我们可以看到项目已经自动生成了一大堆代码，我们不用管他，直接来到这里，默认是一个Grid，当然你也可以把它更改成StackPanel或者ScrollView等，atv，这里我把它改成ScrollView（当然是选择在窗口不能容纳大部分的内容时可以滑动啦），隐藏滚动条，并删除Background，然后在它的里面创建一个Grid，加入一堆Row，像这样：

接下来就是粘贴代码了，把这个程序的大部分代码粘贴进去，CRC页面如法炮制。

下面介绍一些重要的地方

a.在ShellPage.xaml.cs里，PopulateNavItems方法里，是加入汉堡菜单的导航，_primaryItems加入的是上面部分（IEEE，CRC两个页面的位置），_secondaryItems加入的是下面的部分（Settings界面的位置），Symbol.Document指的是当前页面汉堡菜单标签上的图标是Document这个图标，它可以更改为其他的Segoe UI Symbol图标，详情见这里：

b.在xaml页面的下方都有一段根据窗口大小自适应改变汉堡菜单状态的代码（VisualStateManager），这里也可以插入其他的东西实现页面内容的自适应，如IEEE界面中，MAC StackPanel的对齐方式来实现在窄窗口下标签和文本框不在同一行让窗口尽可能容纳所有的内容。

效果如下：

a)宽窗口。

b)窄窗口。

c.在Assets文件夹下存放应用图标，大小要严格按照微软的标准，建议使用Metro Studio生成图标。

d.在String->en-US文件夹下的Resource.resw这个文件里可以设置页面标题，汉堡标签文字以及设置界面的文字。

e.在Package.appxmanifest这个文件夹内可以设置APP的各项属性，包括支持的屏幕翻转，默认语言，视觉对象资产等。