天天看點

Windows 8.1 應用再出發 - 幾種更新的控件

Windows 8.1 除了新增了很多很有用的控件外,還對一些控件做出了更新。接下來我們一起對這些更新的控件一一做出講解。

1. FlipView 更新

翻轉視圖控件,在應用中常用作圖檔等内容的翻頁/滑動顯示。使用者可以浏覽多個項目,每次顯示一個。下面我們來看看FlipView控件的簡單用法:

Windows 8.1 應用再出發 - 幾種更新的控件
Windows 8.1 應用再出發 - 幾種更新的控件
Windows 8.1 應用再出發 - 幾種更新的控件

在上面的圖中,我們看到,翻轉視圖中有三個項目:1/2/3,每次滑動或點選左右鍵可以切換顯示一個項目。那麼Windows 8.1 針對它的更新是什麼呢?

我們知道,FlipView有三種方式來切換顯示項目,基于滑動觸控、基于左右按鈕點選和基于程式設計。在Windows 8中,當使用者通過滑動觸控切換項目時,FlipView項目切換會進行平滑的滾動。而通過點選或程式設計時,不會出現平滑的滾動,内容隻是簡單的切換顯示。而Windows 8.1 為FlipView控件添加了UseTouchAnimationsForAllNavigation屬性,當設定為true時,基于觸控、按鈕和程式設計方式的切換均會出現平滑滾動的動畫,這樣就保證了在各種方式的切換導航中一緻的使用者體驗。

2. 多種控件添加Header屬性

有些控件在使用中通常會附帶标題,來描述控件中值的意義。而在Windows 8 中我們需要自己定義布局來添加标題,這樣不僅增加了完成布局代碼的時間,還在一定程度上破壞了代碼的結構。而Windows 8.1 中為這些控件添加了Header 和 HeaderTemplate 屬性,以讓我們更快捷的完成标簽的設定。具有這一新特性的控件有:

ComboBox

Slider

DatePicker

TimePicker

TextBox

PasswordBox

RichEditBox

 下面我們就分别以Slider 和 TextBox為例,來示範一下Header 和 HeaderTemplate屬性添加方法。

Slider:

Windows 8.1 應用再出發 - 幾種更新的控件

TextBox:

Windows 8.1 應用再出發 - 幾種更新的控件

3. PlaceholderText

占位符文本,Windows 8.1 将這個屬性添加到很多包含文本的控件中。如果控件中不想顯示預設選項或留白,我們就可以添加占位符來提示使用者進行輸入或選擇。這些控件包括:

SearchBox

我們分别以ComboBox 和 PasswordBox為例,分别示範文本選擇控件和輸入控件添加占位符的方法:

ComboBox:

Windows 8.1 應用再出發 - 幾種更新的控件

PasswordBox:

Windows 8.1 應用再出發 - 幾種更新的控件

4. WebView 更新

Windows 8.1 針對WebView 控件修複了很多問題并添加了新功能,包括:

(1). 支援在WebView控件上層顯示其他XAML控件。這一更新主要修複了Windows 8 下,WebView控件在控件疊加顯示時的異常。這也是我自己在Windows 8開發中遇到過的很想吐槽的問題之一。我們來看看修複前後的對比情況。

如上代碼,我們想實作的效果是,黑色半透明的Border遮蓋住WebView。而在Windows 8(左圖) 和 Windows 8.1(右圖) 中的運作效果分别是:

Windows 8.1 應用再出發 - 幾種更新的控件
Windows 8.1 應用再出發 - 幾種更新的控件

(2). 支援使用RenderTransform屬性來轉換、縮放、扭曲和旋轉WebView控件。我們來看下面的例子:

我們想把WebView按順時針旋轉45度,來看Windows 8(左圖) 和 Windows 8.1(右圖) 中的效果圖:

Windows 8.1 應用再出發 - 幾種更新的控件
Windows 8.1 應用再出發 - 幾種更新的控件

(3). 支援在WebView控件中使用Opacity屬性。這也算是Windows 8 中控件的吐槽點之一了,當布局需要一個整體的透明度時,WebView就顯得格格不入。 好在Windows 8.1 “及時”進行了修複,這一屬性實作和效果較為簡單,大家可以自己做一下測試。

(4). 用于基本導航操作的新 API 元素:GoBack、GoForward、Stop、Refresh、CanGoBack 和 CanGoForward。使用這些 API 可以為應用添加典型的 Web 浏覽功能。

(5). NavigateWithHttpRequestMessage 方法,用于通過 POST 請求和 HTTP 頭導航到 URI。

(6). NavigateToLocalStreamUri 方法,用于通過自定義解析程式加載本地内容。

(7). 對導航和内容加載狀态進行響應的新事件:NavigationStarting、ContentLoading、DOMContentLoaded、NavigationCompleted、FrameNavigationStarting、FrameContentLoading、FrameDOMContentLoaded 和 FrameNavigationCompleted。

(8). 對可能出現問題的情況進行響應的新事件:LongRunningScriptDetected、UnsafeContentWarningDisplaying 和 UnviewableContentIdentified。

(9). Focus 方法,用于為 WebView 設定輸入焦點。

(10). CapturePreviewToStreamAsync 方法,用于擷取托管内容的預覽圖像。

(11). 異步方法,用于調用腳本并以資料包的形式擷取選擇的内容以便進行共享:InvokeScriptAsync 和 CaptureSelectedContentToDataPackageAsync。

(12). 兩個新屬性,用于擷取文檔标題及設定預設背景顔色:DocumentTitle 和 DefaultBackgroundColor。這兩個屬性還是很有用處的,比如我們想在頁面标題顯示WebView加載網頁的标題,或者想修改網頁的背景色以更符合整個頁面的顔色搭配,以免白色網頁背景過于突兀時,它們就派上用場了。

同時,Windows 8.1 還棄用了 Windows 8 中WebView的一些API:

(1). 棄用LoadCompleted 和 NavigationFailed, 改用 NavigationCompleted。

(2). 棄用InvokeScript,改用 InvokeScriptAsync。

(3). 棄用DataTransferPackage 和 DataTransferPackageProperty,改用 CaptureSelectedContentToDataPackageAsync。

(4). 不再支援 AllowedScriptNotifyUris、AnyScriptNotifyUri 和 AllowedScriptNotifyUrisProperty 。要在調用 window.external.notify 時,允許外部網頁引發 ScriptNotify 事件,你必須在應用清單檔案 (Package.appxmanifest) 的内容URI部分納入該頁面的 URI。

我們不難看出,Windows 8.1 中針對WebView 有大幅度的修複和更新(Windows 8 的WebView确定不是臨時工做的嗎?)。

繼續閱讀