Ø編頁
ØList Picker
Ø拉伸List Box 控制項中的條目

本章的Book Reader應用程式為Jane Austen的經典小說《傲慢與偏見》提供一種專門為手機進行優化的閱讀體驗。書的字體來自Gutenberg專案(www.gutenberg.org),由於其版權已經過期,因此它為美國人民提供了免費的電子書。如果你打算發佈一個包含Gutenberg專案的應用程式,確認你已經理解了Gutenberg專案的許可證。詳見www.gutenberg.org。

為了達到最好的閱讀體驗,本應用程式允許使用者自訂前景色、背景色、字體大小,甚至是字體集。Book Reader提供了簡便的頁面導航,允許使用者跳轉到任何章節或者任何頁碼。剛開始可能不那麼明顯,但是實現本應用程式的最大挑戰是編頁,即在字體設置的基礎上為整本書的內容分頁。當然,我們可以將整本書的內容放置在具有捲軸頁面中,但這並不能夠帶來好的使用者體驗。另外,由於UI元素的大小限制,使用其他的方法也未必可行。因此,本應用程式一次只顯示一個頁面。使用者可以通過點擊螢幕來翻頁,或者點擊應用程式欄上的按鈕來回退頁面。



The Main Page

圖25.1顯示了應用程式欄展開後的主頁面,應用程式欄上具有回退一頁按鈕、跳轉到任何章節或者頁碼的按鈕和改變設置的按鈕。應用程式欄區域同時也顯示了當前頁碼和總頁碼(這是基於當前字體設置情況的)。

21151644_OzzM  

圖 25.1 主頁面圖,預設使用類似Amazon Kindle的顏色模式,專門為閱讀提供足夠的對比度。

注意:

➔ 本應用程式的分頁機制由PaginatedDocument使用者控制項來完成,在本章的最後詳述。

➔ 命名為Footer的list box控制項出現在應用程式欄中,因為它被放置在該區域的下方,而且應用程式欄的不透明度設置為0。

➔ 如圖25.2所示的充滿章節的list box,使用了一種非常重要但很難發現的方法,使得list box中的條目按照其寬度進行拉伸,填滿該區域。這就可以在不給定寬度的條件下,使得每個條目中的元素(如頁碼)達到右對齊。


21151644_VHf0  
圖25.2 使用HorizontalContentAlignment進行拉伸的list box,所以在不給定條目寬度的條件下,使得頁碼達到右對齊。

➔ 書本是以文字檔的形式包含進來的,其Build Action設置為Content,就和前一章中的資料庫檔案一樣。檔的名稱為1342.txt,與Project Gutenberg網站上下載來的文檔一致。

➔ 本應用程式使用了如下的設置:讀者當前的頁碼被存儲為字元索引,即為包含了整本書的內容的頁面的第一個字元建立索引。這是因為如果字體設置不同,那麼與書本位置相關的頁碼也會不同。有了這個方法以後,使用者在書本中的真正位置就被保存下來了。

➔ 添加到章節清單中的鍵值對是一種方便使用的類型,因為它包含了兩個獨立的字串屬性,資料範本可以將其綁定。其中,「Key」是左對齊的章節標題,「value」是右對齊的頁碼。



The Settings Page

Book Reader的設置頁面幾乎與Notepad應用中的設置頁面相同。其不同之處在于頂端的font picker,如圖25.3所示。該font picker由Silverlight for Windows Phone Toolkit中的list picker控制項創建而來。
21151645_VjvT21151646_zL1R  


圖25.3 font picker在WYSIWYG picker中顯示的10種字體

這裡,List picker基本上就是一個combo box。它開始的時候看上去像text box,但是被點擊的時候,它允許使用者從清單中選擇一個值。資料範本同時綁定每個text block的FontFamily和Text屬性,在清單中顯示每個字串。List picker支援兩種不同的清單展示方式:內聯模式和全模式。如圖25.3所示,內聯模式中,該控制項通過流暢的動畫來對記錄進行展開和合攏。如圖25.4所示,在全模式中,該控制項顯示全屏的記錄清單。

21151646_Cd3U  

圖25.4 配置為全模式的Book Reader中font picker

當我嘗試在Windows Phone 應用程式中使用ComboBox控制項時,為什麼顯得很奇怪?

ComboBox是一個核心的Silverlight控制項,它頻繁地使用在網頁中,但是,它沒有為Windows Phone提供合適的設計風格。所以它一般不會被使用(該控制項應該移除來避免困惑)。如果你想使用combo box的話,就用list picker來替代吧。

如果記錄的數量少於5個的話,List picker預設使用內聯模式;不然的話,它會使用全模式。這與Windows Phone設計準則是一致的。但是,我們可以通過設置ItemCountThreshold的值來強制其中的一個模式。只要記錄的數量少於等於ItemCountThreshold,List picker會保持內聯模式。Book Reader的font picker保持10種字體的內聯模式,所以其屬性值設置為10.

List picker定義了Header及其相關的HeaderTemplate屬性,定義了ItemTemplate屬性,用於自訂每個記錄內聯模式中的外觀顯示效果。即使我們使用全模式,對於list picker的外觀來說,這些屬性也是很重要的。對於全屏的清單,list picker同樣定義了獨立的FullModeHeader和FullModeItemTemplate屬性。如圖25.4所示,全屏模式的list picker利用了這兩個屬性。如果我們不指定FullModeItemTemplate,全模式會使用ItemTemplate。

使用全模式時,List pickers不能包含UI元素!

如果我們直接把諸如text blocks或者toolkit中的ListPickerItem控制項這些UI元素放置於list picker中,那麼,在全屏模式顯示時,會拋出異常。那是因為該控制項嘗試將每個記錄加入到額外的全屏模式清單中,但是單個UI元素一次只能放置於一個地方。解決方法是在list picker中放置非視覺化的資料記錄,然後使用範本來控制每個記錄的外觀。

避免將內聯模式的list picker放置於scroll viewer的底部!

List picker在這種情況下不適合使用。當第一次展開時,螢幕內容不會被移動,這是為了確保內容保留在螢幕上。然後,當嘗試著用捲軸來查看其他內容時,list picker會折疊起來。為了達到最好的性能,內聯模式list picker下的元素應該將CacheMode設置為BitmapCache,那是因為list picker的下拉和收縮能夠改變這些元素的位置。

List Pickers and Picker Boxes

雖然單個list picker控制項提供了兩種不同的體驗,但是一些Windows Phone方面的文章將全模式的list picker稱為分離的picker box控制項,它保留了內聯模式體驗中的term list picker。這正是為什麼第19章「Animation Lab」中使用的自訂控制項稱為PickerBox的原因。



The PaginatedDocument User Control

為了決定分頁產生的位置,PaginatedDocument使用者控制項必須測量當前字體設置下,每個字元的寬度和高度。執行測量的唯一方式是將文本放置於text block中,並且檢查其ActualWidth和ActualHeight屬性的值。因此,PaginatedDocument將執行以下三個步驟的演算法:

1. 查找文檔中每個不同的字元(《傲慢與偏見》只包含了85個不同的字元)。

2. 通過向text block中放置每個字元來測量其寬度和高度,一次放置一個。所有字元的高度都是一樣的(因為這裡的高度是線高度,包含了填充和其它),因此,高度只需要測量一次。

3. 從頭至尾流覽整篇文檔,使用預先測量好的字元寬度來計算每個換行的地點。有了這個資訊,以及之前測量的高度,我們就可以知道每個換頁的地點。由於收縮部分單詞的需求,決定分行符號需要一些小技巧。

基於計算得到的換頁地點和換行地點,該控制項為每一行文字增加一個text block來得到所有的頁面。

注意:

➔ 換行與換頁的索引分別存儲在各自的清單中。存儲換頁的清單是換行清單的子集,這種關係在一個頁面需要渲染時變得尤為清晰。

➔ 在UpdatePagination中,將盡可能多的工作交給後臺執行緒來做。因為實際的測量工作必須在UI執行緒中完成,但是,兩個後臺輔助執行緒用來將一個後臺執行緒過渡為主執行緒,然後再將其轉回後臺執行緒。

➔ 本控制項對於輸入的文本有一些假設,工程中包含的《傲慢與偏見》的文檔經過了預處理,使得下面的假設成立:

1. 分行符號(\n)表示強制的換行,它只在一段文字的末尾出現(原文使用固定的行寬度,因此定期放置\n就可以,這就無法完成輸出的動態調整)。

2. 回車符(\r)代表新一章的開始。有了它的説明,這就完成了章節集合總數的自動統計,使得可以將其顯示在主頁面的list box上。






原文連結:HTTP://www.cnblogs.com/dearsj001/archive/2012/08/13/101App4WP7_BookReader.html

 

創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()