[共同筆記]Chapter7: UI (App Bar, Flout, Menu, Message Dialog)

組員：資管三甲陳彥廷、資管三甲胡學賓、資管三甲林祺翔

Content Before Chrome

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

Layout

•  幫主要內容適當的留白，讓主要的內容能在第一眼就被看到
•  固定定義好的大小以及寬度，讓重要的主要內容更容易被注意到

Interactions

•  在互動的設計方面，雖然把內容的重要性放大，但是還是有一些不可或缺的功能，像是以往的右鍵選單、上一頁下一頁的導覽、還有搜尋跟設定這些必要的功能，在 Metro UI 下的作法是將功能隱藏起來，但是要讓使用者可以找的到他們。
• 將這些功能隱藏起來，換言之，開發者不需要對於這些功能是否會影響Layout多做操心。

Use the charms—search, share, change settings, and more

• Windows 8 也有內建了一些功能，在每個 App 執行狀態下都可以被使用，例如搜尋、分享、開始、設定等等。

App Bar

• App Bar 有區分為上方的 App Bar 以及下方的 App Bar
• Top App Bar放置導覽的功能，像是回到上一頁、上一層之類的功能鍵，還有標題的部分
• Bottom App bar-類似於以往的右鍵選單
• App Bar在container page只能被宣告一次，例如default.html。而每一頁都會有相同的App Bar
• App Bar亦能宣告於個別的頁面控制項，並且於每一頁的ready method中連結命令(addEventListener )

Generate commands at run time

•   若希望commands在執行時才產生，可以使用Json Array定義app bar之command

Command Events

•   App Bar的元素都是Button，事件通常為Click Event

Flyout

• 何時使用飛出視窗：

1. 飛出視窗相當適合用來顯示您不想一直放在螢幕上的 UI。使用者可以隨時關閉飛出視窗，只要點選或按一下視窗外部，或按 ESC 即可。如果使用者可控制顯示新 UI，必須也能夠控制使其關閉。使用者在飛出視窗中選取後，飛出視窗應該關閉。
2. 請不要以程式設計的方式讓飛出視窗關閉，除非使用者已在飛出視窗中按下命令按鈕或選取功能表項目。例如，如果使用者只是切換了一項設定，則飛出視窗不應自動關閉。

• 飛出視窗的一般用法：

1. 收集資訊：如果使用者選取需要許多輸入的動作，例如選擇選項或輸入資訊，則該 UI 可以放置在飛出視窗中，讓使用者停留在原始內容。 例如，假設在地圖應用程式中，使用者可以將標記的位置加上標籤。使用者點選以標記位置，應用程式就會顯示飛出視窗，讓使用者能夠輸入標籤。
2. 警告和確認：在使用者採取可能的破壞性動作之前提出警告。
3. 下拉式功能表：如果應用程式列中的按鈕包含多個選項，則顯示飛出視窗讓使用者挑選選項。

• 飛出視窗有兩種特色： 

1. 所有觸發的事件必須有程序化的解除，必須按下特定button才能把飛出視窗解除，他就像是App Bar。 
2. 只要點擊飛出視窗以外的部分就可以將飛出視窗關閉，或者直接按下ESC鍵，我們稱這為”light dismiss behavior”，這個的好處就是不需要一個Button才能實現關闢飛出視窗，就是為了簡化UI。

Menus and Menu Commands

• 簡介： 

1. 內容功能表是應用程式中的輕量型功能表，可讓使用者在文字 (如剪貼簿命令) 或 UI 物件上直接存取動作。系統會針對文字和超連結，提供應用程式預設的內容功能表。 您可以針對文字或超連結以顯示自訂命令的功能表來取代預設的內容功能表，或者您可以建立能夠在其他 UI 物件 (如縮圖) 上執行動作的內容功能表。

• 內容功能表的適當用法：

1. 顯示剪貼簿命令
2. 使用內容功能表顯示物件 (例如所選取文字) 的剪貼簿命令 ([剪下]、[複製] 和 [貼上])。根據預設，系統會顯示所選取文字的 [剪下]、[複製] 和 [貼上] 命令。常用的貼上功能表命令包括 [全選]、[貼上] 和 [復原]。您可以顯示自訂的內容功能表來覆寫這些命令。儘可能在應用程式中保留預設命令，藉此模仿系統行為。

• 顯示自訂命令

1. 系統原本就會提供文字和超連結的預設內容功能表。應用程式可以將這些內容功能表取代為自己的內容功能表。
2. 不在應用程式的工具列中，而且無法使用直接互動的方式 (像是旋轉) 執行的自訂命令，就適合放在內容功能表中。

• 顯示在無法選取的物件上運作的命令

1. 使用內容功能表顯示需要對其執行動作，但無法選取或指示之物件的命令。例如： 聊天對話中可能不適合新增選取；在這種情況下，內容功能表可對聊天對話中的每一則訊息提供命令。

 MessageDialog

1. MessageDialog指的就是對話框。
2. 對話框的命令欄中最多包含三個命令。如果我們指定任何命令，將會有一個默認命令添加到對話框中，目的是關閉對話框。
3. 對話框彈出後界面中所有元素將在對話框下面顯示，並且將會阻塞任何觸摸事件直到用戶進行響應對話框。
4. 另外對話框應該盡量少用。

• MessageDialog包含兩類構造函數：

     1. MessageDialog(String)

public MessageDialog( string content);

content參數表示對話框中顯示給用戶的信息。

     2. MessageDialog(String，String)

public MessageDialog( string content, string title);

content參數表示對話框中顯示給用戶的信息，title參數表示對話框中顯示的標題信息。

MessageDialog常用方法：

     3. Showasync()

public IAsyncOperation<IUICommand> ShowAsync();

異步顯示對話框。