AppBar大量的Metro应用里面使用,那么这里有一个很基本的问题:AppBar需要在屏幕中占用一定的空间。那么会不会当AppBar显示的时候,某些东西被AppBar盖住了呢?
比如,应用里面有个listview,这个listview的底部接近屏幕的底部,那么当AppBar显示的时候,listview底部的一部分会被AppBar盖住,从而使得用户无法看到那部分东西,这显然是一个很不好的现象。MSDN上专门有一个页面来描述这个问题,http://msdn.microsoft.com/zh-cn/library/windows/apps/jj649138.aspx。这也说明这是个普遍问题。
其实解决这个问题的关键在于AppBar的2个消息:beforeshow和beforehide。
在AppBar显示前,把ListView的高度缩小一点,在AppBar隐藏前,将ListView的高度恢复到原始高度。
先来看看HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pagecontrol</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<link href="/css/pagecontrol.css" rel="stylesheet" />
<script src="/js/pagecontrol.js"></script>
<script src="/js/appbar.js"></script>
</head>
<body>
<!-- Full screen container for ListView -->
<div id="scenarioFullscreen">
<header style="text-align:center;margin-top:80px">Test listview + appbar</header>
<section style="height:720px;margin-top:40px">
<div id="scenarioListView" style="height:100%"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemTemplate: smallListIconTextTemplate, selectionMode: 'multi', tapBehavior: 'toggleSelect', swipeBehavior: 'select', layout: { type: WinJS.UI.ListLayout, maxRows: 100 },itemDataSource : DataExample.itemList.dataSource }" >
</div>
</section>
</div>
<!-- AppBar with contextual commands for a ListView -->
<!-- BEGINTEMPLATE: Template code for AppBar -->
<div id="scenarioAppBar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',extraClass:'singleSelect',tooltip:'Add item'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdSelectAll',label:'Select All',icon:'selectall',section:'selection',extraClass:'ContextRelated',tooltip:'Select All'}"></button>
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdClearSelection',label:'Clear Selection',icon:'clearselection',section:'selection',extraClass:'ContextRelated',tooltip:'Clear Selection'}"></button>
<hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{type:'separator',section:'selection',extraClass:'ContextRelated'}" />
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdDelete',label:'Delete',icon:'delete',section:'selection',extraClass:'ContextRelated',tooltip:'Delete item'}"></button>
</div>
<!-- ENDTEMPLATE -->
</body>
</html>
简单的加了一个ListView和一个AppBar。ListView是一个非常有用,也非常灵活的控件,具体可以参考:http://msdn.microsoft.com/zh-cn/library/windows/apps/hh465465.aspx
这里就是一个简单应用。