天天看點

Windows Phone 的應用程式欄 圖示按鈕

概述

您可以建立一個應用程式欄,以便為使用者提供對應用程式常見任務的快速通路。使用 Windows Phone 應用程式欄,有助于建立跨裝置上所有應用程式的一緻使用者體驗。

本主題包含以下各節:

  • 應用程式欄使用者界面
  • 應用程式欄開發
  • 應用程式欄屬性
  • 應用程式欄最佳做法
Windows Phone 的應用程式欄 圖示按鈕

應用程式欄使用者界面

預設的應用程式欄是位于手機螢幕底部的一行圖示按鈕和一個省略号。使用者可以單擊該省略号以顯示圖示按鈕和菜單項(如果處于啟用狀态的話)的标簽。應用程式欄具有内置的動畫,當菜單顯示或隐藏時顯示該動畫。而且,當手機更改方向時,應用程式欄會自動調整。當手機處于橫向時,應用程式欄會垂直出現在螢幕的一側。這樣便最大程度地擴大了頁面内容的剩餘空間。

下圖示範了使用最小大小的應用程式欄示例。

Windows Phone 的應用程式欄 圖示按鈕

下圖示範了使用預設大小的應用程式欄示例。

Windows Phone 的應用程式欄 圖示按鈕

下圖顯示了使用者單擊省略号後應用程式欄的示例。在此示例中,菜單項不可用。

Windows Phone 的應用程式欄 圖示按鈕

菜單項

除了圖示按鈕之外,您還可以添加一個或多個基于文本的菜單項。這些項目顯示在一個清單中,當使用者單擊省略号時該清單将從圖示按鈕的下面向上滑動。菜單項用于不常用的應用程式操作,或用于很難通過一個圖示來表達的操作。為了與裝置的其餘部分建立一緻的使用者體驗,菜單項的文本自動轉換為全部都為小寫字元。應用程式欄菜單未分層并且菜單項清單不是任何圖示按鈕的子菜單。

下圖顯示了使用者單擊省略号後應用程式欄的示例。在此示例中,菜單項已啟用。

Windows Phone 的應用程式欄 圖示按鈕
Windows Phone 的應用程式欄 圖示按鈕

應用程式欄開發

建立應用程式欄的最簡單方法是使用 XAML。Windows Phone SDK 附帶的頁面模闆包含被注釋掉的示例應用程式欄的 XAML 代碼。取消 XAML 的注釋以建立應用程式欄。有關更多資訊,請參閱如何在 Windows Phone 的 XAML 中建立應用程式欄。

還可以僅使用 C# 或 Visual Basic 代碼建立應用程式欄。有關更多資訊,請參閱如何在 Windows Phone 的代碼中建立應用程式欄。

由于應用程式欄不是 Silverlight 控件,是以應用程式欄不支援某些常見的控件功能,如資料綁定。這意味着您不能通過使用 XAML 格式的名稱屬性來更改圖示按鈕和菜單項。如果您希望在運作時動态修改文本或圖示,則應該使用 C# 或 Visual Basic 建立應用程式欄。有關詳細詳細,請參閱如何動态更改 Windows Phone 的圖示按鈕和菜單項。

如果您要本地化您的應用程式,請參閱如何建構 Windows Phone 本地化應用程式。

Windows Phone 的應用程式欄 圖示按鈕

應用程式欄屬性

本節介紹應用程式欄的主要屬性。可以采用 XAML 或代碼設定這些屬性。您可以在首次建立應用程式欄後設定這些屬性,也可以動态更改它們。若要測試不同的屬性以及這些屬性彼此間的互動方式,請在 Windows Phone 的代碼示例 下載下傳示例,或者完成演練:為 Windows Phone 建立應用程式欄測試應用程式中的過程。

屬性 備注
Mode

指定第一次顯示在頁面上時應用程式欄的大小:預設大小或最小大小。這也是使用者使用省略号展開并折疊之後應用程式欄傳回的大小。

在希望最大化螢幕空間的頁面(如全景頁面)上使用最小大小。

Windows Phone 的應用程式欄 圖示按鈕
注意: 在支援橫向的頁面上,當為橫向時,無論模式值如何,應用程式欄都使用預設大小顯示,目的是提高可用性。
Opacity 預期的值介于 0.0 和 1.0 之間。可以微調應用程式欄的不透明度,但我們建議您隻使用值 0.0、0.5 和 1.0。
  • 0.0 應用程式欄完全透明。應用程式欄覆寫在透過它顯示的頁面内容上。不調整頁面大小。
  • 0.5 應用程式欄部分透明。應用程式欄覆寫在透過它顯示的頁面内容上。不調整頁面大小。
  • 1.0 應用程式欄完全不透明。應用程式欄覆寫目前頁面。調整頁面大小到應用程式欄未占用的螢幕區域。
BackgroundColor 應用程式欄的背景顔色。
ForegroundColor 應用程式欄的前景顔色。這是圖示按鈕标簽以及菜單項文本的顔色。如果您使用透明的圖示按鈕圖像,則這還是圖示按鈕的顔色。
IsMenuEnabled 訓示當使用者擴充應用程式欄時是否可以看到菜單項。
IsVisible 訓示應用程式欄是否可見。
Windows Phone 的應用程式欄 圖示按鈕

應用程式欄最佳做法

以下是使用應用程式欄的最佳做法:

  • 使用 Windows Phone 應用程式欄,代替建立您自己的菜單系統。
  • 除非有特别的理由自定義顔色,否則對應用程式欄使用預設的系統主題顔色。對應用程式欄使用自定義顔色會影響按鈕圖示的顯示品質、會導緻菜單動畫出現異常的視覺效果,甚至會影響某些顯示屏類型的電量消耗。
  • 避免對菜單項使用較長的文本,因為文本會超出螢幕。建議的最大長度為 14 到 20 個字元。
  • 避免在應用程式欄上使用 5 個以上的菜單項,因為這樣會強制使用者進行滾動。

    圖示按鈕

    預設的應用程式欄是位于手機螢幕底部的一行圖示按鈕和一個省略号。對您應用程式中主要的、最常用的操作使用圖示按鈕。某些操作很難用圖示來明确傳達。如果是這種情況,則考慮使用菜單項。有關更多資訊,請參閱 Windows Phone 的應用程式欄概述。

    下圖顯示應用程式欄的一個示例。

    Windows Phone 的應用程式欄 圖示按鈕
    随 Windows Phone SDK 一起安裝了一組應用程式欄圖示,您的應用程式可以直接使用這些圖示,也可以将其用作建立您自己的圖示的指南。您可以在以下位置之一找到示例圖示:
    • C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark
    • C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.1\Icons\dark
    Windows Phone 的應用程式欄 圖示按鈕
    注意:
    您隻需要使用 dark 檔案夾中的圖示檔案。Windows Phone 會自動根據所選擇的主題(亮或暗)對圖示進行塗色。
    Windows Phone 的應用程式欄 圖示按鈕

    圖示按鈕最佳做法

    下面是應用程式欄顯示的圖示按鈕的最佳做法:

    • 圖示圖像大小應該為 48 x 48 像素。按鈕的前景圖形應該适合在圖像中心 26 x 26 的區域中,以便它不會與圓形重疊。
    • 每個按鈕上顯示的圓形都由應用程式欄繪制,是以不應該包含在源圖像中。
    • 圖示圖像應該在使用 Alpha 通道的透明背景上使用白色前景。Windows Phone 會自動根據所選擇的主題(亮或暗)對圖示進行塗色,塗色後的圖示可能會導緻該效果顯示不适當。
    • 不要在頁面堆棧中建立向後導航的按鈕。所有 Windows Phones 都有一個專用的硬體“傳回”按鍵,該按鍵應該用于向後導航。
    • 當手機旋轉時,選擇具有明确含義的圖示。當手機處于橫向時,應用程式欄會垂直出現在螢幕的一側。圖示按鈕進行旋轉,以便它們正對使用者進行顯示。發生這種情況時,有可能會混淆圖示的含義,尤其是兩個圖示的圖像互為鏡像(如 << 和 >>)時。
    Windows Phone 的應用程式欄 圖示按鈕

    向 Windows Phone 應用程式中添加圖示按鈕圖像

    在對應用程式欄上的圖示按鈕使用圖像之前,必須首先将這些按鈕添加到您的應用程式。在此過程中,您建立一個名為 Images 的檔案夾,然後向其中添加圖示檔案。您可以任意命名該檔案夾,但 Images 應與預設 XAML 應用程式欄中的名稱比對。

    向 Windows Phone 應用程式中添加圖示按鈕圖像的步驟

    1. 在“解決方案資料總管”中,右鍵單擊項目,指向“添加”,然後單擊“新檔案夾”。
    2. 将該檔案夾命名為 Images。
    3. 在“解決方案資料總管”中,右鍵單擊檔案夾 Images,指向“添加”,然後單擊“現有項”。
    4. 浏覽到圖示檔案的位置,選擇一個或多個檔案,然後單擊“添加”。
    5. 在“解決方案資料總管”中,選擇所有新檔案。
    6. 在“屬性”視窗中,為新檔案設定下列屬性。
      屬性
      生成操作 内容
      複制到輸出目錄 如果較新則複制
      Windows Phone 的應用程式欄 圖示按鈕
       警告:
      “生成操作”必須設定為“内容”才能将圖示用作按鈕圖像。
    7. (可選)在項目中重命名圖示檔案。

繼續閱讀