《101 Windows Phone 7 Apps》讀書筆記-BOOK READER

來源:互聯網
上載者:User

課程內容

Ø編頁

Ø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顯示了應用程式欄展開後的首頁面,應用程式欄上具有回退一頁按鈕、跳轉到任何章節或者頁碼的按鈕和改變設定的按鈕。應用程式欄地區同時也顯示了當前頁碼和總頁碼(這是基於當前字型設定情況的)。

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

注意:

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

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

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

圖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控制項建立而來。

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

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

圖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上。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.