這是《運用 JavaScript建構你的第一個Metro式應用程式》系列教程的最後一篇，将會告訴你在的 Microsoft Visual Studio 11 Express for Windows Developer Preview 提供的Metro 樣式和 Split 模闆的幫助下，如何透過 CSS樣式 使得你的程式更符合 Windows 的 Look & feel。
Microsoft 業已實作了相當程度的 Web 标準：HTML5、ECMAScript 第五版的語言規範和 CSS3。CSS3 其中一項标準為 CSS3Grid Layout（Grid 布局）。通過此技術你可以在 HTML 頁面中輕松地調節表格的行與列。在本例中，ListView 正是處于這種布局中。ListView 能夠把所有空白的地方填充，而我們現在的需求隻是讓 ListView 占據螢幕一半的地方足矣，放在左邊，右邊則是内容區。一點選 ListView 即可在内容區顯示詳細内容。
如上圖所示，我們想要的是兩行的 Grid，一行用于标題，一行用于 RSS 資料。RSS 資料區域則被切分為兩個列，一列是左邊的 ListView，另一列是内容。我們看看怎麼做，就是需要在右邊劃出一塊地方，放置模闆：
根據使用者在左邊 ListView 選擇的記錄，就在右邊的 div 顯示内容，模闆則用來定義外觀。我們還要讓 ListView 設為“單選（Single Select）”的選擇模式（預設是none）。一旦選區内容改變将會觸發事件處理器（event handler），處理器本身較簡單：
<dl></dl>
<dt>當使用者點選了 ListView 上某項的内容，這意味着不是選擇内容就是取消内容（反選）。無論哪種事件都觸發事件處理器。具體是，先清除掉目前右邊的内容，其後檢查選區，若存在選區，我們從 RSS 資料中提取文章記錄，然後将此記錄的資料填充到内容模闆裡去，——就像我們前面的做法那樣。擁有渲染好的 HTML 元素，最後就是簡單地把 HTML 元素放到我們内容 div 上即可。</dt>
<dt></dt>
至此，除了調整樣式問題以外，Grid Layout 的工作已經大緻差不多了。
body 樣式中，我們定義整張頁面為 gridl ayout 模式，“-ms-grid-rows: auto1fr;”劃分頁面為兩行，一行自适應寬度（取最大的寬度為寬度），另外一行則占領剩餘的空間；“-ms-grid-columns:1fr1fr;”劃分頁面為兩列，都是等分的兩列。預設情況下，所有内容都是在第一行、第一列的（行、列皆以1算起，非0算起）。換言之，因為第一行用來放标題恰恰好用不着變動（如果我們打算處理溢出，當然也可以橫跨兩列 span two columns），而文章的 ListView
則移到第二行、第一列中去；内容區移到第二行、第二列中去。于是整個 Grid Layout 就能填滿了。
到目前為止，我們的 RSS Reader 程式已經躍然紙上了。事實上，這種風格是如此普遍，以緻歸納為一種特定的項目模闆，稱作“Split
Application”。如果您建立一個這種類型的新項目并執行它，你會看到我們建立了一個更漂亮的版本，雖然沒有任何真實的資料。當你點選左邊的項目，您會看到在右邊所反映的資料，正如我們在我們做的簡單
RSS Reader 程式那樣：
<dl><dt>恭喜你！你已經建構起了你的第一個 Metro式程式。到了最後 Say Good Bye 的時刻，為了你的持續學習，我們建議：</dt></dl>
可以在資源中心發掘 Metro App 更多的資源，如果你遇到問題，也可以利用相關資源來解決問題。