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

Sysinternals Suite AccessEnum

Sysinternals Suite 是微軟推出的一套免費工具,裡面功能非常的多,而且主要是給開發或 IT 人員使用的,一般使用者通常不會有機會用到。

下載以及介紹頁面(en-US)

裡面的工具非常多,可以從 Windows 底層的 API 去取得第一手的資訊,會比 Windows 的管理介面獲得更多的訊息,雖然說沒有辦法點兩下就把問題處理掉,但是可以更快速的找出問題點。其實這套工具已經出了非常久了,但是一直都沒有用過,直到最近看到高手流暢的運用來分析解決問題,才知道這個工具。

AccessEnum

AccessEnum 這個工具是針對 Windows 權限掃描,直接執行會出現以下的畫面

image

右方按鈕可以選擇要檢查的是資料夾或是註冊檔,選擇好目錄之後直接點下 Scan 就會去掃描選擇的目錄,並且列出跟母目錄不同的項目,如果所選擇的部分全部都是繼承第一層目錄,那他就只會列出第一個項目而已,結果有區分為 Read & Write 的權限。

image

像上方這個查詢結果,上層的目錄有設定讀取的權限,可是子目錄的讀取權限卻是 Everyone ,這邊看起來是有被修改過。如果系統有被惡意竄改,也有可能掃瞄出一些蛛絲馬跡。或著是應該要應該要開放的權限卻不在清單中,也可以從這邊看出。

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 ,看到的東西就是真正的內容,而減少為了編排或是版面設計出來的圖片。讓整體介面變得以內容為主。

怎麼判斷裝置的瀏覽器尺寸

不同的屬性

  • clientHeight
    • 完整可以顯示的高度
  • offsetHeight
    • 包含瀏覽器的 padding 就是那些邊框
  • scrollHeight
    • 包含邊框還有滾軸展開的高度

在行動裝置下取得尺寸

<html>
<head>
<title>取得尺寸</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#spanClientHeight").text(document.documentElement.clientHeight);
$("#spanClientWidth").text(document.documentElement.clientWidth);
});
</script>
</head>
<body>
<div>
高度:<span id="spanClientHeight"></span>
<br />
寬度:<span id="spanClientWidth"></span>
</div>
</body>
</html>

這邊取得到的會是行動裝置解析度的寬度,而不是真實寬度。

image

利用 ViewPort 取得真實寬度

<meta name="viewport" 
content="width=device-width, initial-scale=1.0,
user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />

設定 viewport 之後瀏覽器就不是根據解析度去顯示而是實際螢幕大小

image

Demo 頁面

連結

image


clientHeight/clientWidth returning different values on different browsers

CSS / JavaScript – How do you get the rendered height of an element?

element.clientHeight – MDN

WCF & WebAPI 序列化 Dictionary 物件到 Json 的格式問題

最近同事遇到一個問題,在 WCF 跟 ASP.NET MVC 4 的 WebAPI 下回傳 Dictionary 的物件的時候和 Json.net 序列化的結果不同,回傳的格式也不是那麼方便使用。

WCF & WebAPI 回傳 Dictionary 的格式

利用 Web API 建立

public object Get()
{
Dictionary<string, object> dic = new Dictionary<string, object>();
dic.Add("key1", "value1");
dic.Add("key2", "value2");
return dic;
}

他回傳的格式會是

[
{
Key: "key1",
Value: "value1"
},
{
Key: "key2",
Value: "value2"
}
]

但是這樣子回傳的 Json 物件在 Javascript 下並不方便直接使用,沒辦法用 object.key1 直接取值,或是 object[“key1”] 也沒辦法。比較理想的回傳格式應該是

{
"key1": "value1",
"key2": "value2"
}

解決方法

這個問題是 WCF & Web API 再回傳的時候序列化元件的邏輯處理的,其實嚴格來說並不是 Bug ,只是不好用而已,當然有其他幾種方法來處理。

  1. 直接組字串
  2. 回傳的時候用 Json.NET 序列化之後再回傳

這兩種都不是很好的做法,有點失去 WCF & Web API 原本的用意。

第三種作法

利用自訂的 class 去改變序列化的邏輯,在這邊我們建立

[Serializable]
public class JsonDictionary : ISerializable
{
Dictionary<string, object> dict = new Dictionary<string, object>();
public JsonDictionary() { }
public JsonDictionary(Dictionary<string, object> dic)
{
this.dict = dic;
}
protected JsonDictionary(SerializationInfo info, StreamingContext context)
{
foreach (var entry in info)
{
dict.Add(entry.Name, entry.Value);
}
}
public void GetObjectData(SerializationInfo info, StreamingContext context)
{
foreach (string key in dict.Keys)
{
info.AddValue(key, dict[key], dict[key] == null ? typeof(object) : dict[key].GetType());
}
}

public void Add(string key, object value)
{
dict.Add(key, value);
}

public static explicit operator JsonDictionary(Dictionary<string, object> dic)
{
return new JsonDictionary(dic);
}
}

改變 GetObjectData 用以取代原先序列化的邏輯,並且加上 explicit operator 方便跟 Dictionary 做轉型的動作。

改寫之後的 Web API

public object Get()
{
Dictionary<string, object> dic = new Dictionary<string, object>();
dic.Add("key1", "value1");
dic.Add("key2", "value2");
return (JsonDictionary)dic;
}

在這邊再回傳的時候先轉型為剛剛自訂的 JsonDictionary ,可以發現的是一開始我就設定回傳型別為 object ,只是為了讓這個方法看起來比較好用一些。回傳前轉型回傳型態也是要跟著改變的。

{
"key1": "value1",
"key2": "value2"
}

這樣回傳的時候就會是想要的格式了。


JSON deserializer does not deserialize a Dictionary correctly

c# – .NET WCF Json deserializing a Dictionary<int, int> – Stack

c#WCF – POST JSON Dictionary without Key/Value Text – Stack

c# – Make ASP.NET WCF convert dictionary to JSON, omitting “Key

WCF JSON Serialization is flawed « Duncan Smart’s Weblog

.NET by Example: JSON services revisited: using a Dictionary as a

如何在 Razor 中使用 #if DEBUG 判斷

在經過不斷的嘗試還有搜尋之後

Razor 中沒有辦法使用 #if DEBUG 判斷!!

在動態編譯的 Razor 中是沒有辦法這樣做的,只能繞路由其他方式來處理。

由需要編譯的檔案中傳遞參數

例如說在 BaseController 加入

ViewBag.isDebug = false;
#if DEBUG
ViewBag.isDebug = true;
#endif

再由 ViewBag 傳遞參數到 Razor 中處理

@if (ViewBag.isDebug)
{
.....
}

或是利用 HttpContext.Current.IsDebuggingEnabled

在 Web.Config 中可以找到

<compilation debug="true" targetFramework="4.0">

這一段中的 debug=”true” 就是決定 HttpContext.Current.IsDebuggingEnabled 回傳的值,而預設的 Web.Release.Config 也有一段是

<compilation xdt:Transform="RemoveAttributes(debug)"/>

移除 debug=”true” 的屬性,所以只要利用

@if(HttpContext.Current.IsDebuggingEnabled)
{
...
}

就可以做判斷了,不過缺點是他只有 isDebug ,如果有自行新增 Symbol 或是用到 #if TRACE 就沒有辦法這樣處理。


如何善用「偵錯模式」進行 ASP.NET 網站或 .NET 程式開發

無法安裝 Windows 8 在 Virtual PC 上

自從 Windows 8 consumer preview 出了之後就很想安裝一台虛擬機器起來,但是如果使用 Virtual PC 來安裝的時候都會出現以下的錯誤畫面。

image

後來找了一些資料才發現,不是每種虛擬軟體都能支援安裝 Windows 8,這是因為 Windows 8 比起之前的版本需要掌控更多的硬體資訊。也就是說不能安裝的 Virtual PC 就是因為他太假了,而其他可以安裝的軟體則是假的太像了。

可安裝 Windows 8 虛擬軟體版本

  • Hyper-V in Windows Server 2008 R2
  • VMware Workstation 8.0 for Windows
  • VirtualBox 4.1.2 for Windows
  • parallels 7 on Mac (需安裝最新更新)

Parallels Desktop Update Allows In-Product Windows 8 Installation

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