Metro Style App (7) – 使用 Windows App Certification Kit 基本檢測開發的 Metro App

在開發完 Metro App  之後,微軟也提供了基本的檢測工具對 App 做初步的檢測,這份工具檢測的項目也非常的基本,檢測的項目也不多,一般來說都可以正常通過。在這邊檢測的部分只是程式能不能正確運作而已,但是如果沒有辦法通過的話應該也沒有通過發佈上 App Store 的檢測。

微軟官方介紹

Windows App Certification Kit 白皮書

Windows SDK 下載

Windows App Cert App 是 Windows SDK for Windows 8 Consumer Preview 的其中一項功能,安裝完他並不會顯示在 Metro App 開始列或是傳統桌面上,可以利用 Metro App 的搜尋功能來啟動程式。啟動程式之後 選擇 Validate Metro Style App 會列出機器上全部的 Metro Style App ,有的時候這邊會遇到程式沒有列在上面的情況,是一個已知的 bug ,最後會提到要怎麼做。

image

選擇到想要檢測的 App 之後就可以開始檢測了,大約會執行五到十分鐘,途中也會開啟 App 數次,而且最後會停留在 Metro 的頁面,所以看不到檢測的進度條,反正看他好像沒在動作就可以看看是不是完成了。如果完成的話就會出現要存檔的畫面,這邊存檔的檔案就是結果的 Xml 檔。

image

用 IE 開啟結果的 XML 檔案,裡面會列出通過或是不通過跟警告的部分,主要都是直接關於程式的部分,如果要上架的話 Metro App 還有很多設計方面的規範都不會在這邊檢測到,像下面檢測到的問題是啟動的速度太慢了,為了達到 Metro Style App fast and fluid 的效果,所以有限制啟動時間不能太久。

image

如果在清單中找不到要檢測的 Metro Style App

  1. 必須先啟動 powershell 執行 Get-AppxPackage > out.txt
  2. 在 out.txt 中可以看到全部的 Metro Style App ,在 txt 找到 InstallLocation 這個欄位是空的 App
  3. 用 Remove-AppxPackage <packageFullName> 將這個 App 移除掉 ,再回到 App 清單應該就可以正常顯示 list 了

image


Wack don’t see my app neither from gui, nor command line, nor from visual studio create package dialog

Metro Style 最真實的數位體驗

桌面隱喻 Desktop metaphor

在提到最真實的數位體驗之前,要先題什麼是桌面隱喻。一直以來數位內容其實都被設計為現實生活的延伸,包含我們操作以及理解的方式。

145812-bumptopfull3ddesktop_586

將桌面設計為類似於真正的桌面,文件就長得像放在桌子上的文件,資料夾也像常用的資料夾,一切的一切都是在數位的裝置上,依然保留原本的桌面體驗。就像是象形文字的概念

1253715437_bb7afaa5ff

所以才會說目前為止的數位體驗,其實只算是數位生活的類比體驗,一直以來保留的設計方法讓一直沿用下來。但是這樣做的真的有意義的嗎。這樣是不是真的有幫助到更快的解決問題或是更容易取得資訊。

最真實的數位體驗

沒想到這次 Think different 的居然是微軟,Metro Style 的主軸之一就是最真實的數位體驗,在 Metro Style  下完全拋棄了桌面隱喻這個東西,或許這正是世代交替的時刻。下一個世代的人會不會還沒有看過 mail 就先學會寄發 e-mail ,沒看過通訊錄先有 Facebook ,不會寫字先學會打字,不會翻書前就先會看電子書。

sci-fi-tech-20thcentfox-9

如果在未來的數位生活中,這些類比的東西都不復存在了,那麼這些東西應該是要用什麼方式呈現呢。是不是到目前為止我們認為理所當然的介面其實是不必要的存在。那麼對於接下來的世代,怎麼樣做才是比較好的。

Windows 8 Metro Style 主要設計概念來源

幾項 Metro UI 設計的想法來源,其實蠻有趣的,不是設計出身的人其實並不會想到這麼多。但是仔細了解之後其實 Metro UI 設計並不只是看起來那麼簡單。

Modern Design – Bauhaus

Bauhaus
這建築物現在看起來是很常見的,不過在 19 年代前半卻是非常特別的,在當時的建築中獨立一格,也建立了一派極簡、現代的 Bauhaus 建築風格,而這種風格不只影響到了建築也影響其他各種設計。更加注重功能性,而並非裝飾的部分。

International Typographic Style – Swiss Design

poster
在字體排版方面則是大量引用 International Typographic Style 的概念,讓文字經由排版定位來呈現內容,而且使用不帶有意象的字體,文字本身應該是中立的來呈現內容代表的含意。利用方格圖來設計編排字體,並且適當的留白就成為 International Typographic Style 的主要精神。
swissposter

Motion Design – Cinematography

cinematography
而在 Metro UI 動作設計方面則是希望能像電影一樣吸引人,流暢的動作串接豐富的內容,就像看電影一樣。下面這支 MTV 為了自己的 Mango App 拍攝的廣告應該可以詮釋 Metro 想要帶出來的感受。

Metro Style App (6) Sharing 分享功能

image

Metro Style App 在 API 分享的功能(Sharing ),使用 Sharing 將資訊分享到 Facebook ,Twitter….。不同於其他的 App 如果你要將資訊 PO 到 Facebook 上面,那必須直接去呼叫 Facebook 的 API ,可以被分享的 Target 實在太多了,雖然說 API 大部分都依循著同一套規則,但是實務上還是必須一個一個測試,而且對於使用者來說他不一定同時使用這麼多的平台,假設使用者只有 Facebook 帳號沒有 Google+,那麼 Google+ 的分享按鈕對使用者來說就是沒有意義又浪費版面造成混淆的功能,而且當開發愈想抓住更多平台而串接了更多分享 API ,也就造成這個問題愈來愈嚴重。難道這個問題沒有好的解決方法嗎,如果開發功能還需要利用微積分取得因為分享而加入以及因為太多分享而離開的使用者最大值,那麼也太累了一些。

Microsoft 在 Windows 8 提出了一種解決方案,分享的時候並不是直接呼叫服務的 API 而是呼叫 Windows 8 的 WinRT,而 WinRT 會找尋機器上被設定為可以 Sharing Target 的 App 來做 Sharing 的動作。這是什麼意思呢?就是說如果安裝了 Facebook 的 Metro App 則你的分享就可以分享到 Facebook 上,如果安裝了 Twitter 就可以分享到 Twitter 上,而如果今天有安裝這個 Google+ 這個 App 則使用者應該也就是 Google+ 的使用者。Microsoft 大餅畫得很圓,看起來正是一勞永逸的作法,讓大家的事情都可以做的很少就完工,不過唯一的問題就是 Windows 8 的使用人數能不能推得起來,如果人數太少到大型平台都不願意花費時間來開發 Metro App,那這個 Sharing 可能就只能寄 Email 了。

加入 Sharing content target app sample

為了避免只有 mail 能被分享的窘境,而且可以看到最完整的欄位設定,在 Sharing content target app sample 可以下載到微軟建立作為分享目標的範例 App ,用 VS11 開啟之後在 Local Machine 用 Debug 執行起來之後既可以當作分享的目標了。

image

在 App 中實作分享功能

要實作這個功能,主要是註冊 DataTransferManager 的 DataRequested Event Handler ,並且設定 Request 物件的屬性,讓 Sharing 的功能知道你想要分享的資訊是哪個部分。主要的重點就是取得 Sharing 的事件,在事件中把要分享的資訊整理好設定,Windows 8 的設定功能就會把這些資訊送給 Sharing Target ,接下來的事情就是 Sharing Target 要去煩惱了。

設定文字分享訊息

在 itemDetail.js 的 ready function 加入

var dtm = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();

dtm.addEventListener("datarequested", function (e) {
var request = e.request;
request.data.properties.title = item.title;

// Share recipe text
var recipe = "INGREDIENTSrn";

//設定要分享的資訊
recipe += item.content + "rn";

recipe += ("rnDIRECTIONSrn" + item.directions);
request.data.setText(recipe);

設定圖片分享資訊

// Share recipe image
var image = document.querySelector(".item-image");
var uri = image.getAttribute("src");

// 抓取圖片資訊
if (uri.indexOf("http://") == 0)
uri = new Windows.Foundation.Uri(image.src); // Remote image
else
uri = new Windows.Foundation.Uri("ms-appx:///" + image.getAttribute("src")); // Local images

var reference = Windows.Storage.Streams.RandomAccessStreamReference.createFromUri(uri);
request.data.properties.thumbnail = reference;
var deferral = request.getDeferral();
// 圖片讀進 request.date 裡面
request.data.setBitmap(reference);
deferral.complete();

最後的結果從 Sharing content target app sample 查看的話應該會類似這樣,不同的 Sharing Target 抓取的欄位可能也不盡相同。

image


Sharing content target app sample 分享目標微軟範例

Sharing content source app sample 分享來源微軟範例

API reference for Windows Runtime and Windows Library for JavaScript

在 Windwos 8 移除 Windows Live ID 綁定同步

在 Windows 8 下很多 App 都會要求登入 Windows Live ID (WLID) 帳號,進而同步資訊讓使用者能夠更快的結合各項所需的資訊。

版本:Windows 8 Consumer Preview

在 Windows 8 登入 WLID

在這邊說的登入並不是在設定的地方綁定關聯帳號,而是當用 Local Account 登入的時候,進入到需要 WLID 的 App 例如說 Mail,Calendar,Messaging,People 再登入的時候就會要求 WLID

image

詭異的是假設說當你在 Mail 下登入的時候,這時候 Calendar , Messaging ,People 都會同時同步帳號資訊,只是想收個 mail 結果連好友狀態行事曆 MSN 訊息通通下來了,同步的時候也沒有看到選項可以選擇。如果對 Windows 8 比較熟的人可能會說,那有什麼奇怪的,這四個 App 明明就是同一個只是用 Secondary Tile 讓你以為是四個 App。

一旦登入帳號資訊就全部 App 都可以用

利用 Metro App 的 Setting 這邊幾乎都可以看到帳號資訊,但是並沒有辦法將他移除,Setting 裡面確實是有移除功能的,可是移除功能針對的是第二組以上加入的帳號,他會一直保留住第一組帳號資訊。

image

如果是第二組以上的帳號,在帳號上面右鍵就可以出現 Delete 的選項可以移除,但是第一組帳號不會有這個選項。

image

不只有 Mail,Calendar,Messaging,People 這個 App ,例如說進到 Store 也可以看到這個已經在登入狀態了

image

也就是說現在全部的 App 都有帳號的權限,也可以同步最新的訊息,而 Windows 8 居然連儲存我的密碼勾選都沒有出現就默默幫你做掉這些事。

移除被綁定的 Windows Live ID (WLID)

直接從查詢進到

Control Panel > User Account And Family Safety > Credential Manager

image

這邊可以看到,第一次登入的帳號密碼都已經被 Windows 8 儲存下來了,而在 Metro App 環境也找不到相對應的移除功能。這邊再推出正式版本的時候應該會有再修正的動作,不然在 Metro App 下無法移除的話在平板只有 Metro App 介面就沒辦法做操作了。

Metro Style App (5) 針對不同瀏覽模式開發

在 Windows 8 中已經對多瀏覽模式以及多解析度相容,那在開發 Metro Style App 的時候也不能只針對一種畫面做調整,還必須考量到行動裝置或是桌上型電腦的操作使用,讓開發出來的 Metro Style App 能夠更容易操作。Metro Style App 的瀏覽模式在 Metro Style Design 已經有介紹過。

開發工具

如果要針對多瀏覽模式做開發,當然有各種裝置一定是最方便了,可以直接體會操作的感覺。不過 Metro Style App 支援的規格這麼多,怎麼可能每一台都有。在 Visual Studio 11 中也提供了非常好用的模擬器(必須要在 Windows 8 環境下的才有)。

image

在 Debug 的時候有三種模式可以選擇,Local Machine 是直接在 App 掛載在本機執行,Simulator 就是模擬器了,而 Remote Machine 則是如果有其他裝置,只要用網路線將開發環境跟測試裝置相連,就可以在測試裝置上啟動 Debug 偵錯。Running Windows Metro style apps on a remote machine 這邊有利用 Remote 裝置的完整步驟。如果用模擬器執行的話。

image

會再另外開一個模擬器的視窗來執行,這個模擬器的畫面主要是根據平板來顯示的,右側的功能鍵也有模擬手指功能、翻轉、調整解析度等等,模擬器本身就是一個完整的環境,有在機器上安裝的工具也都可以在模擬器中找到。

image

既然有好的模擬器可以使用,那就可以來針對 Metro Style App 支援的顯示模式來做支援。

  • 水平以及直立顯示

  • Snapped 模式

  • Semantic Zoom

Snapped 模式

Snapped 模式也是 Metro UI 獨有的,因為在 Metro UI 下預設一次只能開啟一個 App,想像一下 IOS 應該就了解了,如果今天想要邊聊 MSN 邊上網那在 iPad 上就是要一直切換來切換去的,手機上影響可能比較不大,因為畢竟螢幕也小,也沒辦法顯示那麼多資訊。

  1. 先進入一個 APP
  2. 指標移到左上再往下會顯示全部正在執行的 APP
  3. 選取其中一項並且拖拉到視窗邊

image

image

image

基本上 Grid Application 已經有預設 Snapped Mode 的顯示方式了,而這邊的做法正是使用到 HTML5 裡面的 media query 來做到在 Snapped Mode 跟一般模式下面的區別。在相對應的 css 徵可以找到以下的區段。

@media screen and (-ms-view-state: snapped) {
...
}

這中間的區段也就是當進入 Snapped 的時候要額外套用的部分。

Semantic Zoom

Semantic Zoom 是當希望可以不用改變層級的狀況下去修改資訊的顯示方式,有可能是單一頁面資訊太多的時候,可以使用 zoom-in 的方式顯示全部資料方便找尋。

image

這是 Metro UI 開始畫面的 zoom-in 結果,會顯示出全部的 APP,也可以直接點選分群之後移到點選的群組位置。

image

修改 groupedItemsPage.html

找到最下面的 section aria-label=”Main content”  區間修改為

<section aria-label="Main content" role="main">
<div id="zoom" data-win-control="WinJS.UI.SemanticZoom" data-win-options="{ initiallyZoomedOut: false }"
style="height: 100%">
<div id="zoomedInListView" class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView"
data-win-options="{ selectionMode: 'none' }"></div>
<div id="zoomedOutListView" class="groupeditemslist" aria-label="List of groups"
data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }">
</div>
</div>
</section>

原本只有一個 ListView  改為兩個 ListView 分別對 zoom-in ,zoom-out 做支援。

修改 groupedItemsPage.js

在 groupDataSelector 增加會在 zoom-in 需要的回傳

groupDataSelector: function (item) {
return {
title: item.group.title,
shortTitle: item.group.shortTitle,
backgroundImage: item.group.backgroundImage,
click: function () {
nav.navigate("/html/groupDetailPage.html", { group: item.group });
}
}
},

修改 itemInvoked function

itemInvoked: function (eventObject) {
// Determine whether the SemanticZoom control is zoomed out
var zoomedOut = document.querySelector("#zoom").winControl.zoomedOut;

if (appView.value === appViewState.snapped) {
// If the page is snapped, the user invoked a group.
var group = data.groups.getAt(eventObject.detail.itemIndex);
nav.navigate("/html/groupDetailPage.html", { group: group });
} else {
// If the page is not snapped, the user invoked an item.
var item = data.items.getAt(eventObject.detail.itemIndex);
nav.navigate("/html/itemDetailPage.html", { item: item });
}
},

修改 ready function

ready: function (element, options) {
var listViews = element.querySelectorAll(".groupeditemslist");

for (var i = 0; i < listViews.length; i++) {
var listView = listViews[i].winControl;

ui.setOptions(listView, {
groupHeaderTemplate: element.querySelector(".headerTemplate"),
itemTemplate: element.querySelector(".itemtemplate"),
oniteminvoked: this.itemInvoked
});
}

this.updateLayout(element, appView.value);
},

還要修改 updateLayout function

// This function updates the page layout in response to viewState changes.
updateLayout: function (element, viewState) {
var list = data.items.createGrouped(this.groupKeySelector, this.groupDataSelector);

if (viewState === appViewState.snapped) {
// If the page is snapped, display a list of groups.
var listViews = element.querySelectorAll(".groupeditemslist");

for (var i = 0; i < listViews.length; i++) {
var listView = listViews[i].winControl;

ui.setOptions(listView, {
itemDataSource: list.groups.dataSource,
groupDataSource: null,
layout: new ui.ListLayout()
});
}
} else {
// If the page is not snapped, display a grid of grouped items.
// For the zoomed-in ListView, show groups and items
var zoomedInListView = element.querySelector("#zoomedInListView").winControl;

ui.setOptions(zoomedInListView, {
itemDataSource: list.dataSource,
groupDataSource: list.groups.dataSource,
layout: new ui.GridLayout({ groupHeaderPosition: "top" })
});

// For the zoomed-out ListView, show groups only
var zoomedOutListView = element.querySelector("#zoomedOutListView").winControl;

ui.setOptions(zoomedOutListView, {
itemDataSource: list.groups.dataSource,
groupDataSource: null,
layout: new ui.GridLayout({ groupHeaderPosition: "top" })
});
}
}

增加 groupedItemsPage.css

加入 zoom-in 的 css

#zoomedOutListView {
margin-left: 70px;
}

在 Simulater 中測試 Semantic Zoom

在右上角可以找到兩隻手指的模擬按鈕

image

在畫面上點下滑鼠並且滾輪往後收合到事件被觸發為止,滑鼠必須一直維持點擊狀態。

image

原本的 Grouped-detail 畫面

image

zoom-in 之後的 Grouped-detail 畫面

image

這邊畫面可能看起來很像,不過在 zoom-out 的時候一張圖代表一個 item ,zoom-in 之後代表是一個 group。直接反向操作 zoom-in 的動作就是 zoom-out 了

Summary

其實這邊並沒有硬性規定開發者要怎麼去做,微軟是希望 Metro UI Design 的想法來開發 APP,但是並沒有那麼硬性。畫面操作方面微軟也號稱完整支援 HTML5,所以其實這邊還有很多發揮的空間,有很多不一樣的版面特效需求都是可以被實現的。

Metro Style Design

在 Metro Style 有很多概念都跟以往的 Windows 7 不一樣了,這也是微軟自從 Windows 95 以來最重大的改變,雖然其中經歷了這麼多版本,但是基本的操作原則還是跟隨著 Windows 95 的模式。而目前也是由於行動化裝置愈來愈普及,Metro UI 就是為了在行動裝置跟 PC 之間取得一個平衡,甚至於由行動化裝置來定義 PC 的規則。

image

Content Before Chrome

在 Metro UI 內容比框架還要重要,使用在意的是內容,並不是框架的功能

image

這是 windows 7 在使用者印象中的畫面,大家想到的都是工具列、邊框、卷軸列、放大縮小功能,印象最深刻的東西卻不是使用者真正關心的內容。Metro UI 的概念就是要讓最重要的內容被獲得最大的注意

image

所以微軟為了改變這個情況引用地下鐵站的告示牌的觀念,讓重要的資訊獲得最大的版面資源。

Layout

幫主要內容適當的留白,讓主要的內容能在第一眼就被看到

image

固定定義好的大小以及寬度,讓重要的主要內容更容易被注意到

image

Interactions

在互動的設計方面,雖然把內容的重要性放大,但是還是有一些不可或缺的功能,像是以往的右鍵選單、上一頁下一頁的導覽、還有搜尋跟設定這些必要的功能,在 Metro UI 下的作法是將功能隱藏起來,但是要讓使用者可以找的到他們。

App Bar

App Bar 有區分為上方的 App Bar 以及下方的 App Bar

Bottom App bar

在下方的 App Bar 放置功能的選單,有點類似於以往的右鍵選單

image

  • 當單一物件被選擇的時候可以操作的功能

  • 全域性的功能放置於右邊,內容相關功能置於左邊

Top App Bar

而在上方的 App Bar 則放置導覽的功能

image

像是回到上一頁、上一層之類的功能鍵,還有標題的部分

Flyout

image

針對比較特別的功能,微軟也定義置於 Flyout 之中,他其實有一點像 Pop up 但是是依附著原本的按鈕而顯示。而原本常常用 Pop up 來顯示的錯誤訊息也建議改用 inline 的方式來顯示。

Navigation

利用 Hubs > Sections > Details 的方式來架構

image

用最直覺的模式來操作,如果使用者對某個內容項目有興趣,只要點擊就能針對這個項目了解更多。

Sematic Zoom

假如當某一階層內容很多的時候,也可以利用手指收合的動作來將內容群組化,讓使用者容易找到想要的內容。

image

image

 

Design for Touch First

在  Metro UI 很重視觸控裝置的使用體驗,所以微軟也定義的多種手勢的功能,讓使用者體驗能夠更一致化,也讓已經習慣 Windows 8 的使用者能就更快上手使用這支 App

image

Design for Multiple Views

image

  • Minimum (1024*768)

  • WideScreen (1366*768+)

  • Snap View (Required)

  • Portrait

Snap

在 Metro UI 中也支援兩種程式一同在同一個畫面中,這樣就可以同時看到兩個關心的畫面,有可能一邊是股市畫面,而另一邊是 MSN 聊天的畫面。

image

image

  • 窄側的寬度是 320px 正好就是 windows Phone 7 的手機寬度

  • 在畫面寬度變動時候頁面狀態應該是被保留住的

  • 建議在必須全螢幕執行的程式(例如遊戲),或許可以顯示排行榜,或是乾脆就只顯示 Logo

Windows 8 Contract

Windows 8 也有內建了一些功能,在每個 App 執行狀態下都可以被使用

CharmsBarClock

Share

ShareFlyout

利用 Share 分享 App 的內容到其他地方,讓訊息更方便容易地被擴散。

Search

Search

Setting

SettingsFlyout

在每個 App 下去設定特定的設定選項,由於固定的位置,使用者會很容易找到這些重要的功能。

Tiles

image

Tile 就是一開始在 Metro 畫面中看到的程式圖示,等於是程式的門面。也可以設計能夠自行更新 Tiles 內容的稱為 Live Tile ,例如說項 mail 會在收到信件的時候更改顯示的收件夾數量,或是氣象。

image

Notifications

這個就是大家熟知的推播功能了

ToastTemplates

只顯示最重要的資訊,這樣使用者才不會因為太多不必要的訊息進而關掉 App 的推播功能。

Summary

這邊都是微軟建議的設計概念,一致化的模式可以讓使用者在各個 App 之間都能很快的上手,而且當你的 App 愈符合的時候,更能讓使用者容易去使用,因為 Windows 8 本身就是根據這套規則去開發的。而當開發者都照著這個規則走,使用者也會愈來愈喜歡使用 Windows 8,這看起來是 win-win 的局面。


Resource

Javascript Metro Style App (4) 利用 Web API 建置 Metro Style App Grid Application Service

在這篇會用最快的方式去建置提供 Metro Style App Grid Application 資料的 Web API

根據 Metro Style App 預設的 json 格式建立 ViewModel

public class MetroStyleApp
{
public class Group
{
public string key { get; set; }
public string title { get; set; }
public string subtitle { get; set; }
public string backgroundImage { get; set; }
public string description { get; set; }
public IEnumerable<Item> items { get; set; }
}

public class Item
{
public string title { get; set; }
public string subtitle { get; set; }
public string content { get; set; }
public string backgroundImage { get; set; }
public string description { get; set; }
public Group group { get; set; }
}
}

✕這邊要自訂名稱也是可以,不過在 Metro Style App Grid Application 裡面就要去修改相對應的 javascript 了

建立資料庫

Group

id int
name nvarchar
subTitle nvarchar
title nvarchar
backgroundImage nvarchar
description nvarchar

Item

id int
groupId int
subTitle nvarchar
title nvarchar
article nvarchar
backgroundImage nvarchar
description nvarchar

✕其實資料庫怎麼建都沒有關係,只要能轉型成為 ViewModel 格式就OK了,這邊只是個人的作法

將資料庫資料轉為 ViewModel 輸出

搭配 Entity Framework & Value Injecter

public IEnumerable<MetroStyleApp.Item> Get()
{
NearByEntities db = new NearByEntities();
List<Item> dblist = db.Items.ToList();
List<MetroStyleApp.Item> itemList =
dblist.Select(it => new MetroStyleApp.Item()
.InjectFrom(it, new
{
group = (MetroStyleApp.Group)new MetroStyleApp.Group()
.InjectFrom(it.group, new { key = it.group.name })
,
content = it.article
}
))
.Cast<MetroStyleApp.Item>().ToList();
return itemList;
}

Metro Style App Grid Application 欄位顯示區塊對應

在群組頁面顯示情況下

image

在內容頁面顯示情況之下

image
這邊的 Content 是可以接受 Html 語法的


MVC4 多了什麼新東西 – Web API
Metro Style App (1) 建立 Javascript Metro Style Project
ASP.NET C# MVC ViewModel with valueinjecter

Javascript Metro Style App (3) 設定資料來源

設定完 Metro App 基本資料之後,接著來設定 App 顯示的資料來源

本機資料來源

開啟專案目錄下的 js > data.js

var groupDescription = "...";
var itemDescription = "...";
var itemContent = "...";

// These three strings encode placeholder images. You will want to set the
// backgroundImage property in your real data to be URLs to images.
var lightGray = "...";
var mediumGray = "...";
var darkGray = "...";

// Each of these sample groups must have a unique key to be displayed
// separately.
var sampleGroups = [
...
];

// Each of these sample items should have a reference to a particular
// group.
var sampleItems = [
...
];

這邊一整段都是資料的部分,可以看的出來都是純 json 的資料型態,如果要設定本機資料可以直接在這邊修改,或是比較建議的做法是另外開一個 data 的資料夾來存放這些 json 的資料。

遠端資料來源

如果 APP 本身資料是從遠端接收的 client-server 架構,也可以直接從遠端路徑讀取需要的 json 資料,原本的 Local 資料也就是 json 物件,所以如果要遠端資料就只要能回傳 json 物件就可以根據內容去顯示。這邊也可以自行修改 javascript 來改變顯示的方式,如果是還不想碰到 javascript 的話,就依照原本的資料結構也可以顯示內容。

微軟給的範例連結

找到 data.js 底下修改

sampleItems.forEach(function (item) {
list.push(item);
});

成為

WinJS.xhr({url: "http://contosorecipes8.blob.core.windows.net/AzureRecipes"})
.then(function (xhr) {
var items = JSON.parse(xhr.responseText);

// Add the items to the WinJS.Binding.List
items.forEach(function (item) {
list.push(item);
});
});

再重新啟動之後就可以看到官方的範例內容。

image

有加上圖片內容之後整體質感會差很多,其實這也是 Metro UI 的特色,讓內容來決定 App ,看到的東西就是真正的內容,而減少為了編排或是版面設計出來的圖片。讓整體介面變得以內容為主。

Javascript Metro Style App (2) 設定 package.appxmanifest

只有空殼的專案當然是不行的,接下來開始對整個專案進行最基本的客製化設定。開啟專案底下的 package.appxmanifest ,在這邊有幾個關於 APP 的設定。
image

Application UI

  • 顯示名稱
  • 敘述
  • 起始頁面
  • Logo 圖片
  • APP 支援的瀏覽模式

Metro App 對於圖片都有制式規格,為了讓整個 App 可以融入 Metro UI 的環境

  • Logo 150*150 (Metor UI 的方塊圖)
  • Wide Logo 310*150 (Metro UI 下使用者可以自行放大成長方圖)
  • Small Logo 30*30
  • Badge Logo 24*24
  • Splash Screen 620*300 (進入 APP Loading 顯示)

Capabilities

這邊主要是設定這個 APP 對於裝置上的功能,例如說本機音樂檔案播放、相機功能。
image

Declarations

這邊也是跟系統功能有關的部分,例如說請求成為放入 DVD 的時候的預設播放軟體。
image
image

Content Urls

設定 APP 在網路上的內容資料來源
image

Packaging

APP 本身的發佈資訊
image


Unable to load Package.appxmanifest on Visual – Ronald Widha
What is Package.appxmanifest File in Windows 8 Metro Style App