天天看點

Windows 8.1 應用再出發 - 幾種新增控件(1)

Windows 8.1 新增的一些控件,分别是:AppBar、CommandBar、DatePicker、TimePicker、Flyout、MenuFlyout、SettingsFlyout、Hub 和 Hyperlink。我們分成兩篇來介紹,本篇先為大家介紹AppBar、CommandBar、DatePicker 和 TimePicker。

1. AppBar

 Windows 8.1引入了幾種新的控件來幫助我們更快捷的建立應用程式欄,分别是AppBarButton、AppBarToggleButton 和 AppBarSeparator。應用程式欄按鈕預設外觀是圓圈,而不是正常按鈕的矩形(做過WP的開發者一定不會陌生);設定内容需要使用Label 和 Icon 屬性,而不是Content;它有兩種尺寸,普通和精簡,可以通過IsCompact屬性來控制。

Windows 8.1 應用再出發 - 幾種新增控件(1)

如上圖所示,我們建立了一個簡單的應用程式欄。按鈕被分為兩部分,左側包括了三個AppBarButton 和兩個AppBarToggleButton,中間用AppBarSepator隔開;右側為兩個AppBarButton。大家通過代碼和運作效果就能很明顯的看到程式欄按鈕與正常按鈕在形狀和屬性設定上的不同。另外也可以看到AppBarToggleButton擁有的狀态切換功能。如果我們試着把按鈕的IsCompact都設定為true, 則效果是這樣的:

Windows 8.1 應用再出發 - 幾種新增控件(1)

可以看到,設定IsCompact屬性後,按鈕的文字消失了,而且按鈕所占空間變小了。這種變化在應用處于Snapped狀态時較為常用。

另外,按鈕的Icon屬性提供了四種圖示元素表現方式,分别是:

FontIcon —— 基于指定字型系列的字型

BitmapIcon —— 基于指定Uri的位圖圖像檔案

PathIcon —— 基于路徑資料

SymbolIcon —— 基于Segoe UI Symbol 字型的字型預定義清單。

下面我們在例子中分别講述這幾種表現方式

Windows 8.1 應用再出發 - 幾種新增控件(1)

2. CommandBar

 Windows 8.1 引入的CommandBar在很大程度上簡化了我們建立應用程式欄的過程,它會把按鈕分為右側的主指令(Primary Commands)和左側的輔助指令(Secondary Commands)來自動進行布局,還可以根據應用大小的變化自動調整自身大小。預設情況下,按鈕被添加到主指令集合中而顯示在程式欄右側,當按鈕被顯式添加到輔助指令集合時,它将顯示在程式欄左側。當應用程式欄中僅包括AppBarButton、AppBarToggleButton 和 AppBarSeparator 時,我們應該選擇使用CommandBar。而當更複雜的内容,如文本,圖像等存在時,我們選擇使用AppBar 控件。

如上面代碼所示,Like 和 Dislike 按鈕在輔助指令集合中,它們會出現在程式欄的左側,而其他按鈕預設加入主指令集合,會排列在程式欄右側。來看看運作效果圖:

Windows 8.1 應用再出發 - 幾種新增控件(1)

3. DatePicker

 Windows 8.1 引入了DatePicker,也就是日期選取控件,很多應用中都會用到日期選取控件(不知道為什麼8.1才加入,以前項目裡都是自己寫的),例如航班時間、約會時間等等。我們先來看看它的外觀

Windows 8.1 應用再出發 - 幾種新增控件(1)
Windows 8.1 應用再出發 - 幾種新增控件(1)

上面兩張圖分别是預設和打開選取器時的效果。大家可能也發現了,年份并沒有特殊的限制,如果我們想選擇出生年月的話,那麼超過2014年明顯是不合理的;如果想選擇一個計劃完成時間,那麼2013年以前的年份也是我們不想看到的。這時候我們可以利用DatePicker控件的MaxYear 或 MinYear 來實作。比如我們想把MaxYear設為今年,代碼如下:

Windows 8.1 應用再出發 - 幾種新增控件(1)

運作效果正如我們所想。另外DatePicker還提供了很多種顯示方式,我們可以分别通過DayFormat、MonthFormat 和 YearFormat 對日月年進行格式調整。

Windows 8.1 應用再出發 - 幾種新增控件(1)

看起來有點難懂,不過好在我們可以在DatePicker屬性選項中選擇,而不是自己去寫。另外如果我們想隐藏掉年月日中某項,可以通過設定YearVisible、MonthVisible 和 DayVisible來完成。比如我們不想顯示日子:

Windows 8.1 應用再出發 - 幾種新增控件(1)

我們看到,日子沒有顯示。同理我們可以完成月和年的設定。

4. TimePicker

 TimePicker多數時候會和DatePicker搭配使用,來完成日期和時間的選取。預設外觀是這樣的

Windows 8.1 應用再出發 - 幾種新增控件(1)

我們看到,TimePicker顯示的是24小時制,我們可以通過修改ClockIdentifier屬性讓它顯示為12小時制

Windows 8.1 應用再出發 - 幾種新增控件(1)

如上圖所示,ClockIdentifier設定為12HourClock時,顯示為12小時制,同時會顯示上午/下午的選項;類似的,設定為24HourClock時,顯示為24小時制,上午/下午的選項消失。

我們還可以通過設定Time屬性來修改TimePicker的預設值

Windows 8.1 應用再出發 - 幾種新增控件(1)

如上圖所示,我們設定時間為20:19,也就是下午8:19。另外我們可以把分鐘選擇器的增量值設定為适合我們的值,比如半個小時。

Windows 8.1 應用再出發 - 幾種新增控件(1)

我們看到,設定後的TimePicker,分鐘選擇隻有0和30兩種,這正是我們想要的。

到這裡我們就把AppBar、CommandBar、DatePicker 和 TimePicker的用法介紹完了,下一篇我們會介紹剩餘的新增控件,謝謝大家。

繼續閱讀