21151645_pEop 
Ø Charts & Graphs



你平時關注自己的體重嗎?Weight Tracker使得你可以隨時跟蹤自己的體重,並且提供幾種體重發展趨勢的視圖。它是一個基於Pivot控制項的、具有三條Pivot Item的應用:

➔清單-測量體重的原始資料清單,支援資料的添加和刪除。連續資料記錄所體現的體重增減趨勢通過上升/下降箭頭來表示。

➔圖-在一個折線圖上繪製我們體重隨時間變化的曲線,同時,可以顯示我們在應用程式的設置頁面中定義的目標體重。我們可以流覽所有的資料,或者根據自身的需求縮小流覽範圍。

➔進度-根據最終的瘦身計畫,總結我們的減肥進度。這個儀錶盤視圖通過圓形圖來實現。

雖然這是一個基於Pivot控制項的應用程式,但是本章內容的目的是演示如何在我們的應用程式中加入圖和表。



Charts & Graphs

Silverlight Team已經創建了一系列開源的圖表控制項,包括柱狀圖、折線圖、圓形圖和氣泡圖等等。這些控制項是早些年為桌面的Silverlight版本所創建的,它們在Silverlight Toolkit中發佈。筆者撰稿時,這些控制項並沒有包含在Silverlight for Windows Phone Toolkit中,所以我們必須單獨去下載。但是,下載這些控制項的原始程式碼的地方很難找。

目前,獲取這些控制項最好的途徑就是直接上David Anson的博客去下載。David是微軟的一名員工,他負責這些控制項的開發。另外,他也非常熱心地流覽了本章的內容。他提供了這些控制項的「development releases」版本,目的是為了在微軟正式發佈工具組之前,展示它們最新的功能,解決最近的問題。他提供的發佈中,包含了原始程式碼和編譯後的DLL檔。該原始程式碼經編譯後,可以在桌面Silverlight 的擴展版本-Windows Phone平臺上使用,同時也可以在Windows Presentation Foundation (WPF)中使用。我們可以在HTTP://bit.ly/datavis4中獲取本書中使用的「Data Visualization Development Release 4」。

如果我們不想使用這個非官方的版本,也可以從Silverlight Toolkit(為桌上型電腦所寫的版本)中下載圖表控制項。但問題是我們不能使用最新的Silverlight Toolkit版本,我們只能下載手機平臺通用的Silverlight Toolkit版本(在2009年11月份時為Silverlight 3發佈的版本),可以在HTTP://bit.ly/sl3toolkit這裡下載到。與David發佈的版本相比,使用這個版本的缺點就是,它的性能沒有得到提高,而且也不支援stacked series。

無論我們是從哪裡得到的控制項,都必須添加對System.Windows.Controls. DataVisualization.Toolkit.dll的引用,該二進位集包含了所有圖表相關的功能。在David發佈的版本中,使用壓縮檔中Binaries\Silverlight3目錄下的檔。如果我們安裝的是2009年11月份的Silverlight Toolkit,那麼我們可以在%ProgramFiles%\Microsoft SDKs\ Silverlight\v3.0\Toolkit\Nov09\Bin路徑下找到該檔。

在筆者撰稿時,Silverlight 4 Toolkit中的圖表控制項無法運行在Windows Phone平臺上!

雖然最新的Silverlight Toolkit包含了本章介紹的圖表控制項,但是我們目前還不能使用。雖然在Silverlight 4版本中引入了一些新的功能,但是Windows Phone OS 7.0 中集成的Silverlight 版本是基於Silverlight 3的自訂版本。所以,大多數的Silverlight 2 或者Silverlight 3的代碼可以運行在Windows Phone平臺上,但是Silverlight 4的代碼就不可以。Silverlight 4中的圖表控制項需要的功能不被Windows Phone版本的Silverlight所支援,所以嘗試使用該版本會導致運行時拋出很難解析的異常。這些Silverlight桌上出版本和Windows Phone平臺版本之間的差別希望在將來會逐漸消失。

為了使得圖表控制項正常工作,我們必須添加對Silverlight 3桌上出版本的二進位集的引用!

如果我們不添加對Silverlight 3桌上出版本的二進位集System.Windows.Controls.dll的引用,在嘗試使用這些圖表控制項時,會得到一個神秘的異常。確保我們添加了正確的引用,一般典型的安裝目錄位於「%ProgramFiles%\Microsoft SDKs\Silverlight\v3.0\ Libraries\Client」。



Regular Series

「System.Windows.Controls.DataVisualization.Charting」命名空間中圖表的主要元素是Chart。為了得到不同類型的圖表,我們可以在Chart元素中放置不同類型的圖表。目前,圖表的類型有15種:7種常用圖表、8種stacked圖表。所有常用的圖表如表29.1所示。

21151642_ukxk  21151642_OCKE21151642_FCy621151642_ZGHv21151642_XQTK21151642_IGZZ21151642_XSFk  

表29.1 七種Nonstacked圖表類型的預設Light-Theme渲染效果,所有的圖表具有相同的三個資料點。

每種圖表顯示的是light主題下的預設渲染效果,看上去很中規中矩(儘管使用了手機顯示不友好的漸變效果)。但是,這種預設渲染效果在dark主題下就顯得不是很恰當,因為解說文字變成了白色,而框的背景色仍舊是light主題下的漸變效果。每種圖表可以使用簡單的{Binding}語法將它的ItemsSource綁定到該陣列,然後為其橫軸確定每個X屬性,為其縱軸確定每個Y屬性。我們也可以不使用資料繫結,直接操作一個圖表,但是這樣通過背後代碼的方式顯得有些笨拙,因為這樣做的話,我們就不能通過名稱來訪問圖表了。單個圖表中,可以包含多個重疊的類型。可以為每個區域賦值不同的資料,產生如圖29.1所示的效果(light主題下)。

21151642_V3hx  

圖29.1 在同一圖表中使用兩種類型來填充。

每種類型的圖表,其種類可以不同。雖然這的確有點奇怪,圖29.2將所有7種類型的圖表整合到了一起。

21151642_fs45  

圖29.2 在同一張圖表中整合了七種類型的nonstacked圖表。



Stacked Series

在圖表控制項的第四個發佈版本中,表29.1中的前面4種類型具有兩個stacked版本:一個用來存放絕對值,另一個用來存放相對值,這些相對值相加的總和為100%。表29.2展示了這八個stacked版本的圖表。就像圖29.1一樣,它們支援多個子圖表的顯示,正如它們名稱所暗示的,每個子圖只是顯示內容,而非相互重疊。


21151643_GhM421151643_2OKN21151643_x4qY21151643_TmEg21151643_lcSc21151644_A6xk21151644_o5tm21151645_mHIB  
表29.2中的每個圖表中使用相同的資料內容

Stacked系列的圖表包含了一些對圖表的定義。有了以上的資料內容,表29.2中的XAML片段可以將三種類型的定義綁定到每個Point[]元素。在綁定到一個包含點的陣列以後,IndependentValuePath和DependentValuePath的分配和之前圖表的分配方式一樣。表29.2在 Light主題下八種Stacked類型圖表的預設渲染效果,其資料集相同。








正如你所看到的,獲得漂亮的圖表渲染其實並不難。圖表可以對其橫軸和縱軸進行合理的縮放,甚至在有需要時可以將其軸的標籤錯開(如圖29.1所示)。它可以自動把不同的顏色應用到資料當中,還有其他的一些功能這裡沒有顯示。圖表,以及它不同種類的物件,也具有大量的屬性用來格式化其內容、標注、標題、軸和資料點等等。雖然思考我們想要的圖表的樣式比較費力(甚至是簡單到隱藏標注或者改變數據的顏色),但是對其進行自訂的類型是很多的。在下一節中,Weight Tracker展示了如何對折線圖和圓形圖做一些自訂的工作。

第四個發佈版本包含了5個Non-stacked類型圖表的第二種實現方法(LineSeries, AreaSeries, BarSeries, ColumnSeries, and ScatterSeries)。這個新的集合位於「System.Windows.Controls.DataVisualization.Charting.Compatible」命名空間下。它們的API幾乎和本書所介紹的版本一致,但是在其內部,它們使用了新的架構來實現stacked類型的物件。因此,它們包含了一些性能上的提升,甚至在一些當前版本圖表無法使用的地方,它們就可以勝任。雖然我們可能無法體會到性能上的提升,除非我們對圖表中的資料進行連續快速的刷新,但是我們應該考慮使用這些新的圖表。



The Main Page

Weight Tracker具有一個主頁面、一個設置頁面、一個説明頁面和一個關於頁面(後面兩個頁面並沒有什麼太大的亮點,因此這裡不做介紹)。除了應用程式欄和狀態列,主頁面包含了三個Item的Pivot頁面。這三個Item在本章的開始部分已經進行了介紹,如圖29.3所示。
21151645_o4d621151645_6Adm21151645_Gmq3  


圖29.3 三個Pivot Item:清單、圖和進度。



The User Interface

➔Chart及其類型元素的命名空間包含了一個charting首碼。Chartingprimitives這個首碼被使用在Chart預設風格的清單拷貝中。Datavis首碼用於ResourceDictionaryCollection類型,清單中圓形圖的自訂需要用到它。

➔該頁面中三個圖表用到的自訂風格(ChartStyle)是Chart控制項預設風格的拷貝,但也對其做了一些修改,例如,刪除了標題和文字注釋,減小了頁邊距和填充,減少了邊框。

我們可以找到Chart預設的風格和所有相關的類型,它們位於Silverlight Toolkit的generic.xaml檔中。原始程式碼位於「%ProgramFiles%\Microsoft SDKs\Silverlight\v3.0\Toolkit \Nov09\Source」目錄下的「Source code.zip」檔中。在該檔中,相關的XAML檔可以在「Controls.DataVisualization.Toolkit\Themes」中找到。這裡面也包含了描述每種樣式的獨立的XAML檔。比如,Chart的預設風格也可以在「Controls.DataVisualization.Toolkit \Charting\Chart\」目錄的Chart.xaml檔中找到。

➔因為每個Pivot Item頁面上包含了很多資訊,所以每頁的內容具有-24的上邊距,用來佔據標題和內容之間的一些空白。在我們做修改的過程中,遇到違背這些設計原則的時候,我們必須非常小心,因為這樣的話,與其他的Windows Phone應用程式相比,有可能會使我們寫的應用程式看上去很奇怪。

➔第一個Pivot Item中可編輯的體重清單被實現為一個使用者控制項,名字為WeighInEditableList。該控制項包含了一個list box,其值與Collection屬性綁定;它還包括了顯示在list box上方的三個控制項:名字為「Weight」的text box、名字為「Date」的text box和添加按鈕。 List box Item也使用了內容功能表,支援記錄的逐條刪除。它被打包為使用者控制項,因為它還被設置頁面用來流覽並編輯目標體重的清單。該使用者控制項的原始程式碼在本章不做介紹,但我們可以在提供的Visual Studio工程檔中找到。

➔ 每條體重由WeighIn類表示,它除了包含三個可讀寫的屬性Weight、Date和Delta以外,還具有一些方便的唯讀屬性,可以被WeighInEditableList中的list box資料範本使用。WeighInEditableList使用的集合是一個自訂的WeighInCollection類,它從ObservableCollection<WeighIn>繼承而來。在添加新記錄或者刪除舊記錄時,它自動對記錄按照時間的倒序進行排列,計算相應的Delta值(用來顯示向上/向下的箭頭)。

➔第二個Pivot item包含了兩種類型的一張圖表:一個用於體重清單,另一個用於目標體重清單。體重清單通過折線圖呈現,而目標體重則通過散射圖呈現(它看上去和折線圖很類似,但是沒有連接線)。設置散射圖的原始程式碼位於背後的代碼中。

➔ 除了將自訂的ChartStyle樣式應用到圖表以外,其自身以及對應的各種類型也做了一些自訂工作:



* 圖表中加入了背景,使得它與頁面的背景相匹配(或者,這個工作也可以在ChartStyle中完成)。

* 圖表給出了顯式的X軸,所以我們可以做三個自訂工作:顯示垂直格線,改變日期的顯示格式(使得年份不出現),限制X軸顯示的值的範圍(在背後代碼中完成)。

注意:軸的類型是DateTimeAxis,它具有顯示DateTime值的制定功能。任何.NET格式的字串可以用來給StringFormat賦值。

* 折線表中使用的線段和點的風格已經做了一些更改。例如,線徑減小,線段和點的顏色已經與當前主題的顏色相匹配,每個點的漸變填滿效果被移除等等。

* 散射圖中每個資料點的風格已經做了更改,使其看上去更像是一個個的星星。這是通過黃色矩形的starimage透明度來實現的。

注意:改變圖表的視覺屬性不像設置畫刷或者厚度那麼簡單!相反,我們經常需要使用所有包含這種設置的風格。這對於使用者來說,雖然犧牲了簡單性,但是發揮了最大限度的靈活性。我們可以從David Anson的博客中下載到一些已經編譯好的適用于手機的圖表樣式,下載位址如下:HTTP://bit.ly/phonechartstyles. 圖表集合中,後面幾種類型的渲染建立在前面幾種類型的基礎上,這樣做是為了使得目標體重的星標不被折線圖所遮蓋。

➔第三個(也是最後一個)Pivot Item具有一些text block控制項,它們之間嵌入了兩個圓形圖。每個圓形圖的XAML代碼看上去很類似,因為唯一的不同就是在背後代碼中設置的需要顯示的資料。與折線圖、散射圖一樣,圓形圖具有整個頁面範圍的背景,使用者可以對各個餅片的填充進行自訂。

為圖表中的資料點選擇顏色時,無論是同種類型或者是不同類型,它在分配給Palette屬性的樣式集合中進行選擇。這個集合可以被更改,每種包含了Palette屬性的圖表類型,也可以具有其自身擁有的集合。Chart的預設樣式為Palette屬性分配了15種畫刷(如表29.1、29.2和圖29.1所示,從藍色、紅色以及綠色的漸變開始)。因為該清單中的圓形圖只包含了兩個餅片,而且我們只想要第一個餅片可見,所以這些圓形圖的Palette使用了兩個畫刷,第二個畫刷用於匹配圖的背景。

為了證實這種影響的效果,圖29.4顯示了本應用程式的折線圖和散射圖,不過它們的各種自訂風格已經被移除。第二幅圖片展示了從圖表中移除Style=」{StaticResource ChartStyle}」的效果。第一幅圖片展示了在不進行代碼修改的情況下,改變圖表至最簡單的版本的效果:

21151645_mCVl21151645_Oldv21151645_pEop  

圖29.4 通過設置屬性來自訂圖表,也可以通過更改ChartStyle中的控制項範本來自訂圖表

許多合理的自訂只能夠通過修改圖表控制項的原始程式碼來實現,比如,在空間緊張的情況下,禁止軸標籤的自動交錯顯示。幸運的是,由於這些控制項都是開源的,所以這是個可行的方案。



The Code-Behind

主頁面的cs代碼,它利用可觀察的集合使得三個Pivot Item頁面中的所有資料保持更新。本應用程式管理著兩個可觀察的集合:一個用於體重清單、另一個用於目標體重清單。它們在Settings.cs檔中給出了定義,同時,該檔還給出了主頁面表格中所選擇的起始日期的記錄設置。

注意:

➔ 雖然頁面的資料用於體重清單(第一個Pivot Item中的可編輯清單和第二個Pivot Item中的折線圖),但是在OnNavigatedTo事件的最後,這個清單將散射圖 Item的資料來源覆蓋為目標體重清單(DataPointSeries是七個non-stacked類型圖表的公共基類)。

➔ 該頁面只把當前選擇的Pivot Item記錄在頁面狀態中,而不是記錄在隔離存儲空間裡。那是因為大多數使用者啟動一個新的實例時,他們想要做的第一件事件就是記錄一個新的體重。

➔ 在UpdateProgress事件的最後,會給每個圓形圖一個簡單的帶有兩個數字的資料來源。第一個數位代表了體重和經過時間的比值,第二個數字代表了體重和剩餘時間的比值。這使得圓形圖可以為頁面中羅列的百分比提供視覺化的視圖。

➔為了使得兩個date picker控制項能夠對主圖表進行過濾,GraphDatePicker_ValueChanged事件設置了圖表中X軸能夠顯示的最小和最大值。



The Settings Page

設置頁面如圖29.5所示,使得使用者可以在主頁面上進行流覽、添加、刪除實際體重資料的同時,對目標體重的資料也可以進行流覽、添加和刪除操作。那是因為它同樣使用了WeighInEditableList這個使用者控制項。該設置頁面還包含了一個對實際體重和目標體重進行大量刪除的按鈕。

由於大多數的功能是由WeighInEditableList這個使用者控制項提供的,所以設置頁面的實現就非常的簡明。如果我們將WeighInEditableList的IsGoalList屬性設置為True,可以使得每個體重的附近顯示星標,而不是主頁面上的那種上升/下降箭頭。


21151646_6UO1  
圖29.5 與主頁面中使用的控制項相同,設置頁面提供了對目標體重清單的編輯功能。










原文連結:HTTP://www.cnblogs.com/dearsj001/archive/2012/08/17/101App4WP7_WeightTracker.html
 
創作者介紹
創作者 shadow 的頭像
shadow

資訊園

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