天天看點

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

本篇我們接着來介紹Windows 8.1 的新增控件,分别是:Flyout、MenuFlyout、SettingsFlyout、Hub 和 Hyperlink。

1. Flyout

 Flyout被稱為浮出控件,能起到提示或者簡單互動作用。我們可以利用它來要求使用者确認操作、收集使用者輸入資訊或顯示提示資訊等。隻有當使用者點選時才顯示Flyout,當點選外部任意點時,Flyout消失。

Flyout通常會附加到Button上,是以Button擁有Flyout屬性來簡化附加和使用的過程。

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

如上圖所示,我們為Button附加了Flyout控件,當Button點選時,Flyout出現。當點選外部任意點時,Flyout消失。當然其他控件也能使用Flyout控件,這就需要使用FlyoutBase.AttachedFlyout附加屬性。這時我們必須響應控件的互動操作,并在代碼中控制打開Flyout。

下面是TextBlock的Tapped事件處理

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

2. MenuFlyout

 MenuFlyout被稱為菜單浮出控件,能夠浮出顯示菜單。大家看名字就能猜出,MenuFlyout 和 Flyout的用法很相似,可參照我們剛剛介紹的Flyout例子。而不同就在于MenuFlyout可以通過MenuFlyoutItem、ToggleMenuFlyoutItem 和 MenuFlyoutSeparator輕松定義菜單内容。

MenuFlyoutItem —— 執行即時操作

ToggleMenuFlyoutItem —— 打開或關閉選項

MenuFlyoutSeparator —— 菜單項之間的分隔符

我們下面以Button為例來示範MenuFlyout的用法

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

3. SettingsFlyout

 SettingsFlyout被稱為設定浮出控件,利用它我們可以更輕松的建立應用設定的浮出控件。使用者可以通過“設定”超級按鈕來通路設定浮出控件,或觸發我們定義的事件來通路。下面我們來示範如何通過觸發事件的方式來通路SettingsFlyout。

首先,建立一個SettingsFlyout控件,步驟是:添加建立項 -> 在對話框中,選擇““設定”浮出控件” -> 設定名稱為 AutoplaySettingsFlyout。

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

如上面代碼和效果圖所示,SettingsFlyout控件可以調整寬度和背景色,但高度一般是應用的高度。頭部中包括了标題,回退按鈕和應用圖示。内容部分采用的是StackPanel流式布局。下面我們看看怎麼把它添加到“設定”的窗體中。

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

這樣我們就把SettingsFlyout控件添加到“設定”中了,名字是'Auto Play',下面我們看看怎麼通過按鈕點選的方式來通路它。

通過按鈕點選事件,我們調用了SettingsFlyout控件的Show方法,這樣控件就可以通路了。當控件中的回退按鈕點選後,浮出控件關閉并重新打開設定窗體。

如果我們調用的是ShowIndependent方法,回退按鈕點選後,浮出控件關閉并回到應用中。同時我們也可以通過調用控件的Hide方法來關閉浮出控件,效果和回退按鈕點選類似。

需要注意的是,一次隻能顯示一個浮出控件,調用Show/ShowIndependent 方法顯示會關閉目前其他浮出控件。

4. Hub

中心控件,幫助我們更好的實作“中心”設計模式,中心頁是使用者進入應用的入口點,比如說應用商城。使用者進入應用商城後,看到的類别分類就是中心的實作,它可以在橫向或縱向的滾動視圖中顯示豐富而有序的内容。 

Hub的Header屬性可以設定中心的标題,可以設定Header或HeaderTemplate來實作。

Hub可以分區顯示,通過将不同的内容放入不同的HubSection來實作。HubSection也可以設定标題,做法與Hub一緻。如果HubSection的IsHeaderInteractive屬性為true,那麼标題預設包含 '>' 字型,以及懸停和按下狀态。我們來看看代碼實作

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

5. Hyperlink

超連結,我們可以把它添加到文本上,它和文本具有相同的處理方式,換行、截斷等。當文本被标記為超連結後,文本會顯示為特定的顔色,點選文本會轉到指定的URI,這個URI由NavigateUri屬性來指定。

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

如上圖所示,紫色文字部分為超連結,點選後會跳轉到我們指定的NavigateUri。

這樣我們就把Windows 8.1 的新增控件介紹完了,希望對大家有所幫助,謝謝。

繼續閱讀