現代UI自定義AppBar按鈕

Question

我正在開發我的第一個Windows 8現代應用程序，我似乎很難找到正確的文檔來製作不像默認應用程序欄按鈕。

我試圖做的是一樣的東西在微軟紙牌收集應用欄，就像這樣：http://www.windows8core.com/wp-content/uploads/2012/08/2b1.png

有三件事情需要注意：

1. 的自定義圖標（熊中，第一個）
2. 它不像默認按鈕，圖標下方有文字
3. 它是矩形的，寬度與填充和全屏風景模式下的應用寬度成正比。 （在固定模式下，按鈕簡單消失，但對於我的應用程序，如果可能的話，我希望在固定模式下使用「僅限圖標」）。

我用<button>開始了，因爲語義上它們是按鈕，並且似乎只有<button>和<hr>在應用欄的歸屬。

我在data-win-options屬性中設置參數還是在JavaScript中完成某些操作？

我使用JavaScript/HTML5，而不是C++/C＃/ VB。 Here are the MSDN articles I've read regarding the app bar.

Answer 1

如果這是通常用於導航的上層AppBar，您可以通過指定data-win-options中的「layout」屬性來實際提供自定義UI，其值爲「custom」，as discussed here。您可能還需要閱讀styling app bars。

最後但並非最不重要的，請查看the HTML AppBar control sample，其中介紹了使用自定義佈局等。

有關Windows應用商店應用開發的更多信息，請註冊Generation App。

Answer 2

而且我建議你在定製應用欄圖標時要小心。重大偏離設計原則可能會使您的應用程序不受歡迎。 UI測試表明用戶喜歡標準UI的一致性。我已經看到它做得非常有品位和有效（如在Nook應用程序中），但我也看到它做得很差（不提名稱:)玩得開心。

Answer 3

只需編輯控件的模板，在橢圓中刪除邊框或在此情況下將其替換爲矩形。 對於彩色背景，更改包含模板中控件的網格的背景顏色，並修改網格的大小。

對於熊圖標如果妳想要的佈局知道appbar使用命令欄或與AppBar你必須以編程方式處理的應用程序大小的變化，你可以像這樣

<AppBarButton.Icon> 
     <BitmapIcon UriSource="ms-appx:///Images/Bear.png" /> 
</AppBarButton.Icon> 

。

看這裏 - http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj662742.aspx

我做我的應用程序相同。