章節一 WPF的設計理念

想像你是一個技術相當成熟的設計師,你被要求在空地上蓋一座房子.你看看附近的建築物確保你使用的外部的顏色不與鄰居的衝突.當你完成你的新房子大作之後,你退後一步,被你完成的東西驚呆了.房子擁有輝煌的四層結構和巨大的開放式玻璃幕牆,周圍的美景一覽無餘.房子的其他部分有許多很棒的功能,比如門廊,窗臺,陽臺,天窗,幾乎所有東西都是新房主想要的.

六個月的時間過去了,你接到一通電話,說你的極好的的房子已經基本被夷為平地.事實證明,在你對鄰居的最初評估中,你沒有考慮太多事實.房子是由厚磚(準確的預防颶風)視窗,沒有天窗,沒有陽臺.此外,這些房子主要是有堅固地基的地下室的牧場.你沒有考慮到當地的設計理念.忽略了這一點,你沒有意識到該地區的雨季會經常遭受暴雨,颶風和龍捲風.沒有考慮其他的房子為何按照他們的方式造在那,你建造的房子看起來不錯,但它沒能撐過雨季.

在構建軟體時也經常犯類似的錯誤.當你構建應用程式的時候考慮使用framework中相似的類作為的框架.當然,因為wpf內部的工作原理和它的設計理念,這樣做會產生不能用,不穩定,或低效率的風險.

在此之前,我們可以展示一行Windows Presentation Foundation(WPF)的程式碼或標記,我們要確保你理解WPF應用程式的工作方式以及無數的運動元件在WPF應用程式的互動方式和它產生的使用者體驗和操作.理解WPF的設計理念將使你未來的WPF應用程式更可靠,更健壯,使用者體驗更好,因為你不太可能在颶風頻發的地方建造玻璃房子.

本章中簡要概述的主題將在本書餘下的篇幅中詳細介紹,到最後一章時,它將成為你的第二觀念.

資料和行為

使用者介面都是體現在資料上並處理資料.本節將討論您通常會看到的不同型別的資料,以及與資料互動的概念(又名動作).

當用戶檢視應用程式時,他們會看到他們感覺上是完成特定任務的相關資訊.不管任務是消滅雷達上最近的飛船的或進入另一個專案的應付帳款表,你的使用者看見資訊,思考基於潛在的提示互動資訊.你是什麼?開發者.你經常看到的是行,列,斜度,小格子,按鈕,列表框,滾動條,以及更多.無論是不是使用者,通常都不會花時間去思考,開發者檢視和使用者看到的之間存在著不同的層次.實際上,我們可以將這些層分解為兩大類：資料和行為.

當我們構建使用者介面時,我們通常要做的就是在資料之上加上一層面板.資料可以是來自高階模型物件(如客戶或簡單布林值)的所有資料.資料是我們的使用者介面最大的影響者,可以有多種形式.下面是由現代應用程式提供的主要資料型別的列表：

• 原始資料–原子資料處於底層,包含字串,布林值,整數和十進位制值等型別.

• 集合資料–集合中顯示的資料,這種資料能包含相同或不同的資料型別,包含陣列,列表等.

• 分層資料–可由分層層次結構表示的資料的複雜圖形,如樹或列表,圖表等

• 複合資料–由以上幾種型別的資料組成的資料

• 隨著使用者介面(UI)和資料訪問技術的增強,原始資料到呈現資料變得越來越容易.windows窗體允許我們拖放單個控制元件,並快速將控制元件指向底層資料以呈現它.然而,在windows窗體中構建自定義控制元件是一項複雜的任務,需要有圖形裝置介面(GDI)大師級的技巧.WPF擊中甜蜜點,給開發商的靈活性,同時還使它容易從資料呈現的輸出.

• 構建使用者介面的時候,我們總是錯誤地認為它是按鈕或網格或ListView,這是最關鍵的.然而,並不是按鈕是王道,而是按鈕允許使用者做什麼才是王道.這意味著採取行動,以迴應所提出的資料.這些是應用和控制行為.

• 與UI控制元件的互動不僅僅限於滑鼠單擊,除了能夠反應鍵盤熱鍵,現代的使用者介面可以應對複雜的手勢用滑鼠以及替代輸入裝置如筆(如從Wacom數位板筆),探針,甚至使用者的直接觸控.

• 真正的偉大使用者體驗來自於開發者在資料和行為之間達成一致.以下部分的章節提供的術語介紹使用WPF處理資料和行為,每個架構和設計理念都包含在WPF的環境中.

資料工作

在這裡,我們將深入探討如何在WPF幫助轉化的原始資料轉換成一個耀眼的直觀表示.

資料幾乎可以採用任何形式–從一個單一的數字到一個包含客戶,訂單和訂單項的客戶或整個複雜圖形的模型物件.這意味著顯示資料的任何UI控制元件都需要能夠處理任何型別的資料.

這是癥結所在,為什麼那麼多的UI框架歷來如此難用,為什麼WPF是如此強大.任何WPF控制元件假定其內容的預設資料型別System.Object.如果控制元件的內容可以是任何資料型別,那麼控制元件如何知道如何呈現它們自己的內容呢?如何通過控制層次WPF採取任何型別和流的原始資料和最終轉換成可見的東西,並響應使用者的互動呢?

第一個答案是通過使用模板.

模版

把模板看作餅乾切割器,每當WPF需要一個新的餅乾,它要求一個模板印一個.然後模板把印好新形狀的麵糰給WPF.WPF烘烤餅乾後,把它拿上熱氣騰騰的使用者介面.WPF為餅乾和麵團提供了兩種不同的模版–控制模版和資料模版.

控制模板在WPF想要的視覺化表示的控制.此模板與使用者介面完全相關,一般不涉及任何資料.

一個數據模板時使用WPF有一塊原始資料,需要知道如何表示資料.在這種情況下,您可以將資料看作餅乾和作為餅乾的資料模板.最終結果,在餅乾切割機(模板)之後.在麵糰中(資料)是開發人員提供的資料的視覺化表示.

例如,假設你有一個Person物件作為原始資料,作為一個WPF開發的開發者,你可以提供一個數據模板,表明一個人的名字應該出現在一個文字框,臉應該出現在面板的左上角的一個小的影象,和其他個人資訊應該出現在滾動區域的右側面板.WPF讓原始資料和關係直觀的展示出來.

演示器

到目前為止,我們只有一小塊照片.我們知道,控制元件模板用於形成控制元件的基本外觀,而資料模板定義了需要顯示特定資料的方式.然而,我們如何從一個數據模板到一個視覺化表示呢?答案是一個內容演示器.內容演示器建立螢幕內部,其中提供由資料模板指定的UI.

主持人允許開發人員輕鬆建立複雜的視覺化,WPF還允許您使用低級別的圖形元素來構建你的使用者介面.在這裡,您可以建立自己的行,多邊形,橢圓,圓弧,自定義文字等.在某些情況下這些技術是有用的,你的指尖下擁有所有這些工具使WPF功能非常強大.

繫結和轉換器

我們已經看到了可以表示的不同型別的資料,以及視覺化描述這些資料的資料模板機制.但是,我們需要一些膠水把它們連線起來.這種膠水就是資料繫結.WPF的資料繫結比許多其他的UI框架更強大,因為它可以是單向的或雙向的.當繫結物件更改時,UI可以自動更新自己,並且資料物件可以根據使用者操作立即更改.在您的應用中,WPF資料模板能提供您所有需要的靈活性來形象地表示任何形式的資料

有時候,模板需要呈現的資料並不是一種使用者友好的格式.例如,您可能將一個電話號碼儲存在資料庫的字串中,該字串沒有括號和破折號,但您希望將該字串以括號和破折號的格式呈現給使用者.您不僅可以把給定型別的資料轉換為其他型別的資料,事實上,您可以將任何一段資料轉換為任何表示形式.常用的方法是將布林值轉換成像彩色燈泡那樣的影象,將數字轉換成適當的貨幣形式,甚至將一系列數字轉換成多行的點來建立行圖.從資料到演示,從資料繫結提供的通道到從資料到資料,都可以呼叫轉換器.

佈局

最後,一旦模板被清除,資料被插入,轉換器被呼叫,表示容器已經建立,在使用者看到任何東西之前還有最後一步,佈局.

佈局為前面步驟中建立的所有UI控制元件提供了大小和位置.它還用於組織和維護相關元素.

在WPF佈局步比看起來是因為更重要的是,如果你處理得當,你建立的WPFUI完全不依賴於解析度.這使得佈局步驟非常重要,因為佈局步驟變成了模板和呈現器定義的相對座標和相對大小資訊成為使用者螢幕上實際物理畫素座標的步驟.

在WPF中,面板和類,由它負責提供佈局功能.它們負責將相關元素分組(通過將相關控制元件儲存為面板的子元素),並指定包含在其中的元素的最終大小和位置.

佈局是一個ui元素的特徵雖然面板使它更容易佈局你的使用者介面,請注意,視覺化樹的每一UI元素都參與了佈局,沒有佈局,螢幕上就放不了UI元素.

最後,一旦面板確定了佈局的發展方向,以及佈局的規模,所有內容擺放的位置.視窗是一個頂級容器,充當視覺化樹的根.視覺化樹在本書中有詳細的解釋.需要在螢幕上顯示的資料最終在一個視窗中駐留,該視窗通過資料模板,放置在展示容器中,最後才通過佈局容器.

樣式

在整個資料鏈從原始資料物件通過邏輯組織元素到視覺呈現元素的整個事件鏈中,我們能夠決定控制元件的樣式.樣式在WPF中充當的角色類似於Web應用程式中的css. 樣式可以在任何級別應用,從模板到內容演示器到佈局面板,這樣您就可以為相關元素提供一個高內聚的外觀和感覺.它們提供了一個抽象類,它集合了元素的所有屬性,從而使這些相同的屬性可以應用於整個應用程式中的多個元素,而不必為每個控制元件單獨指定.樣式從資源字典中載入,它可以在元素層次結構,應用程式級別或主題級別的任何地方載入.預設的樣式決定了WPF應用程式的預設的外觀和感覺,這是在一個單獨的程式集中定義的.

圖1.1 總結了原始資料通過資料模板,轉換器,資料繫結,演示程式和佈局面板的流程,最終形成了一個有形的使用者介面.

工作和行為

現在您對資料如何成為有形的使用者介面有了更好的瞭解,我們就需要討論使用者輸入可以轉換成應用程式執行的操作的各種方法.將資料作為一個吸引人的UI給使用者只是工作的一半.另一半圍繞著給使用者提供令人信服的,簡單的,直觀的與應用程式互動的方式.

行為給我們提供了一種方法來處理建立給我們的UI的資料.資料處理和使用者行為變得越來越強大,更具創新性,新的互動正規化正在不斷地被建立.最常見的是滑鼠,鍵盤和手寫筆.觸控計算在成本效益方面也越來越受歡迎.我們現在不僅可以用我們的手與我們的計算機進行互動,而且我們身邊的其他人可以同時使用同一臺計算機,比如微軟的平面裝置.

輸入裝置不再侷限於我們在桌子上放在手上的東西,它可能是我們自己的手.處理這些大量的同步輸入是許多現代UI框架根本無法解決的問題.值得慶幸的是WPF的行為模型可以很好地用於鍵盤,滑鼠等輸入型別如觸控.

使用者與應用程式的互動開始於通過已提到的任何裝置的一些使用者輸入.輸入採用事件的形式.Windows響應底層的輸入訊號併發送訊息到你的應用程式,然後WPF把他轉換成上層的事件.這些事件可以是不同型別的,比如滑鼠移動事件,按鍵事件,觸筆鍵等等.事件包含一些基本資訊,這些資訊描述事件發生的上下文.例如,兩個滑鼠點選事件成為雙擊事件,當wpf引發上層事件.

識別事件是應用程式響應使用者行為的第一步.識別之後的下一步是將輸入事件對映到一個動作,這是將要執行的一些程式碼.一個動作可以由單個輸入事件或事件組合觸發.例如,使用者按F5重新整理網頁是一個事件,而使用者按住Ctrl鍵,而將UI元素拖過螢幕則是事件組合的一個例子.總的來說,WPF將這些使用者事件稱為路由事件,這些事件專門用於在WPF應用程式的視覺元素之間傳播.請記住,使用者可能不一定是事件的唯一來源.網路伺服器可以傳送可以轉換為事件的應用程式訊息；應用程式中的內部事件可以通知應用程式的其他部分.在所有這些情況下,應用程式都可以用動作來響應這些事件.

應用程式響應事件所採取的操作通常發生在事件處理程式中.然而,你也可以使用命令指定操作.命令是功能強大的工具,允許您將應用程式從觸發它的事件中分離出來,允許應用程式以同樣的方式輕鬆地響應多個不同的使用者刺激.例如,您可以將一段程式碼複製到一個命令中的剪貼簿中.然後可以通過Ctrl + C鍵組合和右鍵單擊上下文選單呼叫該命令.通過這種方式,文字複製操作的邏輯可以封裝在一個地方,從而便於程式碼維護.

事件和動作是使用者如何與應用程式互動的核心,但涉及到多個命令和事件原語的互動方式更為複雜.這些操作包括拖放,選項卡鍵在輸入元素之間切換焦點,Ctrl鍵單擊以選擇容器控制元件中的多個專案,等等.所有這些互動模式更容易用wpf實現相比於以前的Winform.

圖1.2演示了使用者輸入事件以及其他事件如何進入應用程式以呼叫適當的程式碼.

圖1.2從使用者輸入的資訊流通過WPF.

使用者體驗

到目前為止,本章中的討論涉及了將原始資料呈現給使用者的概念,以及用執行某些操作的程式碼響應使用者事件的概念.分開來看,它們似乎是很好應用的可管理元件.

問題是,你不能把它們分開.人們常常認為如果他們克服了顯示資料的問題,或者克服了響應使用者輸入的問題,他們就已經完成了.

整體的體驗不僅僅是輸入和輸出.它是使用您的應用程式時,使用者的感覺.使用者體驗的偉大可以通過執行一個動作的直觀性和結果來衡量.如果你的應用程式形成了一個障礙,或者對使用者的自然傾向提出了抵制,那麼使用者的體驗將是一個糟糕的體驗.另一方面,如果應用程式似乎靠邊站,簡單地讓使用者做她想做的事情,這種體驗將是非常棒的.一個小的思路,努力,和知識的一些WPF的細節如在這本書中提出的,可以創造出驚人的、令人信服的、難忘的使用者體驗.

除了Windows窗體和其他UI技術之外,我們還需要更多的構建塊來為使用者提供一個豐富的、引人入勝的使用者介面.幸運的是,WPF模組化了故事板和動畫.我們也可以很容易地使用WPF混合媒體如視訊,音訊,和高階的可擴充套件的圖形.

控制元件本質上是動態的,可以在其整個生命週期內經歷各種狀態變化.使使用者介面更吸引人的一種方法是使用細微的動畫來視覺化地描述這些狀態變化,而不是僅僅用一種狀態改變而使使用者震驚,而不需要轉換.

使用者體驗慈善圈

當我們構建一個以優雅、直觀和設計良好的方式向用戶呈現資料的應用程式時,我們鼓勵使用者與資料互動.如果該使用者與資料進行互動是及時和順利通過我們的應用程式的處理方式,使用者將被鼓勵繼續使用該應用程式,和資料作為一個結果,改變會比剛才更意義,因為使用者現在對應用程式有了積極的體驗.

WPF提供的功能組合,加上順利地響應使用者行為的能力,並能夠動態地提供原始資料,漂亮的效果圖,等使WPF成為構建可用的Windows平臺應用程式的神奇工具.

對示例原始碼的說明

這本書上所有的原始碼都能在以下網站找到informit.com/title/9780672330339.

瀏覽這本書中的各種例子,我們包括自定義WPF應用程式稱為bookexplorer,如圖1.3所示.它提供了左側導航部分的主詳細檢視,顯示了按章節和右邊的實際內容分組的示例.

本書中討論的許多示例將不包含列印文字中的全部原始碼.最好先執行示例,快速瀏覽程式碼,然後閱讀本書中的示例.之後,您可以返回原始碼檢視一些複雜的細節.作為作者,我們認為最好只討論示例中最重要的部分,而不是討論程式碼的每一行.

對於一些章節,我們還包括了基於該章討論的想法的獎金示例.他們沒有在書中討論,但是原始碼應該給出所有細節.在應用程式的導航部分中,這些示例被標記為”額外”.

總結

本章提供了Windows演示基礎的設計理念和體系結構的基本概述.正如本章開頭所提到的,如果不瞭解基礎是如何建立的,為什麼開發人員可能會在不經得起時間考驗的結構之上(或測試古怪的使用者!).知道下面有什麼,為什麼它具有結構能夠區分你的應用程式從所有可用的其他應用程式作為一個真正了不起的關鍵結構,世界級的應用,提供了一個美好的使用者體驗.

在這本書中,會有大量的細節展現在你面前,關於如何用WPF做各種不可思議的事情.然而,當你在這本書中進步的時候,請記住,你應該努力為使用者行為提供最少的抵抗力,並在原始資料的基礎上提供最好的面板.wpf提供了這些工具,但怎麼用取決於你,開發者,去明智的使用它們吧.