Windows 8.1 和 WinJS 引入了以下新控件和功能，分别是：AppBarCommand、BackButton、Hub、ItemContainer、NavBar、Repeater、WebView。
本篇我們先來介紹 AppBarCommand、BackButton、Hub、ItemContainer，其餘三種放在下一篇中介紹。
1. AppBarCommand
Windows 8.1 加入了AppBarCommand 控件來建立自定義應用欄指令。AppBarCommand可以是這幾種類型：button、toggle、flyout、separator 和 content。我們來看一個例子：
<body>
<div id="exampleFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Example flyout}">
<div>This is an example AppBarCommand of type 'flyout'.</div>
</div>
<div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="{placement:'bottom'}">
<div data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{ id: 'list', type: 'content', label:'List', section: 'selection'}">
<select class="options">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
</select>
</div>
<div data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{ id: 'textfield', type: 'content', label:'Text field', section: 'selection' }">
<input type="text" value="Text" />
</div>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'flyoutButton', type:'flyout', label:'Flyout', icon:'document', section: 'selection',
flyout:select('#exampleFlyout')}"/>
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'cmdToggle', type:'toggle', label:'Toggle', icon:'video', section:'global', tooltip:'Toggle'}"/>
<hr data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'separator', type:'separator', section:'global'}" />
<button data-win-control="WinJS.UI.AppBarCommand"
data-win-options="{id:'helpButton', type: 'button', label:'Help', tooltip:'Help', icon:'help', section:'global'}"/>
</div>
</body> 
在這個例子中，我們示範了在頁面底部的AppBar中 button、toggle 等五種類型的AppBarCommand。AppBar 中的 AppBarCommand 之間支援鍵盤操作，比如Tab, Enter, 箭頭，Home 和 End 鍵。
另外應用縮小到半屏寬後，文本标簽不會再顯示。這個XAML中的特性是相似的。
2. BackButton
顧名思義，BackButton 可以簡單的在應用中添加後退導航功能，BackButton 會自動檢查導航堆棧，來決定是否讓使用者後退。如果沒有後退導航的内容，按鈕會自動禁用。按鈕會自動調用WinJS.Navigation.back函數來完成導航動作，無需另寫代碼。來看看代碼寫法：
<button data-win-control="WinJS.UI.BackButton" ></button> 3. Hub
Windows 8.1 在XAML 和WinJS 中加入了Hub，也就是中心控件。它可以幫我們更輕松的建立中心頁，例如應用商店的首頁就是一個中心頁。Hub控件可以包含多個HubSection對象，每個HubSection可以包含内容和标題。标題可以選擇是否隐藏 > 圖示，顯示時，标題可以互動。來看看例子：
<div class="hub" data-win-control="WinJS.UI.Hub">
<div class="section1" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section1'} }">
<img src="/images/gray.png" width="420" height="280" />
<div class="subtext win-type-x-large" data-win-res="{ textContent: 'Section1Subtext' }"></div>
<div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>
<div class="win-type-small">
<span data-win-res="{ textContent: 'Section1Description' }"></span>
<span data-win-res="{ textContent: 'Section1Description' }"></span>
<span data-win-res="{ textContent: 'Section1Description' }"></span>
</div>
</div>
<div class="section2" data-win-control="WinJS.UI.HubSection" data-win-res="{ winControl: {'header': 'Section2'} }">
<div class="item-title win-type-medium" data-win-res="{ textContent: 'Section2ItemTitle', }"></div>
<div class="article-header win-type-x-large" data-win-res="{ textContent: 'Section2Subtext' }"></div>
<div class="win-type-xx-small" data-win-res="{ textContent: 'Section2ItemSubTitle' }"></div>
<div class="win-type-small">
<span data-win-res="{ textContent: 'Section2Description' }"></span>
<span data-win-res="{ textContent: 'Section2Description' }"></span>
<span data-win-res="{ textContent: 'Section2Description' }"></span>
<span data-win-res="{ textContent: 'Section2Description' }"></span>
<span data-win-res="{ textContent: 'Section2Description' }"></span>
<span data-win-res="{ textContent: 'Section2Description' }"></span>
</div>
</div>
</div> 4. ItemContainer
ItemContainer 可以為元素提供pressed，swiped 和 dragged 功能，把我們需要的元素加入到ItemContainer 中即可。例如我們需要顯示元素，又不需要用到ListView 中全部功能時，就可以選擇ItemContainer控件。其中tapBehavior 屬性設定為toggleSelect 時，對象可以被選擇。設定為none，并且selectionDisabled 設定為 true 時，元素不能被選擇。我們來看一個簡單的例子：
<div style="margin: 150px 10px 20px 150px; width: 200px;" id="item1"
data-win-control="WinJS.UI.ItemContainer"
data-win-options="{tapBehavior: 'toggleSelect'}">
<div style="margin: 10px; padding: 10px; background-color: gray">
<div class="win-type-x-large"
style="margin-bottom: 5px;">
晴天
</div>
<img src="/images/d00.gif">
<div>晴天</div>
</div>
</div>
<div style="margin: 250px 10px 150px 150px; width: 200px;" id="item2"
data-win-control="WinJS.UI.ItemContainer"
data-win-options="{tapBehavior: 'none', selectionDisabled: 'true'}">
<div style="margin: 10px; padding: 10px; background-color: gray;">
<div class="win-type-x-large"
style="margin-bottom: 5px;">
多雲
</div>
<img src="/images/d01.gif">
<div>多雲</div>
</div>
</div> 這裡我們并沒有對css做調整，主要為了示範第一個元素是可以被選擇的，而第二個元素則沒有選中狀态。
到這裡我們就把 AppBarCommand、BackButton、Hub、ItemContainer 四種控件介紹完了，下一篇會介紹剩餘三種控件，謝謝。