Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP7。

在上一篇 EP6 當中我們已經在 PeoplePage 當中設計了一個 ListView，再來的話我們要在針對 ListView 裡面作一些設計跟項目的呈現資訊。

而在 PeoplePage 當中的 ListView 其 ItemsSource 所繫結到的物件對象是設計為 ObservableCollection<Person> 的 People，所以這也就代表著在 ListView 當中呈現的項目是要根據 People 裡面的每一項 Person 所規劃設計的類別屬性，來進行資料呈現的繫結。

來來來，開始囉~~~

在今天這回的 EP 當中 這個資料的內容當然我們就會先用假資料，也就是先寫死在程式碼當中的一個資料，以利後續讓畫面跟資料的一個擷取處理呈現上面是可以完成的。

當這樣的一個完成之後，後續還有很多事情，比如說可能我們在資料的處理上面，可能包括要把它儲存到一個永久的 Storage 裡面去...等等的，不過，那就之後有談到的機會再說吧^_<

我們就先從 Models 資料夾找到今天的配角 Person 這個類別，並且來幫它增加四個屬性 Name、Tel、Email、Address。

暫時利用自動屬性這樣完成設計之後，就可以先用來撰寫 ListView 的資料繫結的部分，但因為之後還可能會針對 Person 的資料直接跟 "編輯" 或 "新增" 的頁面作繫結的處理，所以它還會再作一些修正，不過就到時候再修正吧!

接著回到 PeoplePage.xmal 之後找到 ListView 的標記，並且先修改成完整的對稱式標記。

並且開始再其中增加 ListView.ItemTemplate 標記之後再繼續增加 DataTemplate 的標記。

完成之後，我們可以在這邊思考一下是否有需要用到額外已經設計好的 ViewCell 樣板，很有可能在這個專案裡面有類似的 ViewCell 要呈現在不同頁面的 ListView 或其他的多資料呈現元件。不過在這邊，我們畢竟是 "Re: 從零..." 系列文，所以就直接在這邊設計下去吧，鳩咪^_<

寫上 ViewCell 標記後，在腦海裡大概想像了一下之後想要呈現的項目樣式。

這邊的 ViewCell 當中的版型規劃就透過 Grid ，看起來會是比較快速簡便的方式來切劃。

那接著就動手來編纂相關的 XAML 標記，來...三步驟，握...折...搭啦~~~

完成!

接著再繼續來編纂 ViewCell 內部要呈現的相關控制項，並且配合 Grid 的版型設計來完成所放置的位置。

第一個為 Label 標記，來...三步驟，握...折...搭啦~~~

Good~~~

第二個為 Label 標記，來...三步驟，握...折...搭啦~~~

Awesome~~~

第三個為 Label 標記，來...三步驟，握...折...搭啦~~~

Perfet~~~

第四個為 Button 標記，來...三步驟，握...折...搭啦~~~

Wonderful~~~

以上這四個控制項的前三個 Label 控制項，其標記的撰寫都會將 Text 屬性，透過 Binding (繫結)的方式來完成資料的設定。可能各位會問到說 Button 怎麼沒有繫結到電話的資料?

這裡並不需要顯示電話的資訊來顯示，就沒有需要在這邊處理繫結的動作，反倒是需要一篇專門的 EP 來介紹這個部分。(想先睹為快的話請跳到 EP15)

完成 PeoplePage 的 XAML 編纂之後，接著我們就到 PeoplePageViewModel 當中來透過 Constructor 建立預設的 People 的假資料(MockData)。

Tab 兩下

new 出新滋味 ObservableCollection<Person> 的物件設定給 People 屬性。

來...三步驟，握...折...搭啦~~~

這邊只是為了能夠在 PeoplePage 的畫面呈現時，在 LiveView 當中能有資料的呈現出來，所以不要太在意當中的資料產生的方式。當然可以規劃設計到專屬的 MockData 類別當中去，以防擾亂我們 ViewModel 程式中的邏輯理解，又或者是之後要抽換成透過永久儲存的方式來處理也比較方便，但在本 EP7 的部分我們就先不談這麼多了。

BTW, 如果嫌資料產生很麻煩，可以透過 Generatedata 這個網站來協助你產生假資料(雖然有 "中" 文...但你知道的，還是建議用英文):
https://generatedata3.com/

好的，都撰寫完成後我們就將專案重新建置 "Ctrl + F5"(執行但不偵錯) 到雙平台(iOS、Android)上跑看看，確認到目前為止所變更的效果如何。

所以當今天畫面雙平台(iOS、Android) 呈現的效果完成時，我們回頭來檢視 PeoplePage 裡的 ListView 每個項目所呈現的效果是否符合前面所提及的版型規劃。

首先各位可以看到在第一個 Row 當中的兩個 Label 所呈現的寬度比例大約是 2:3，這個沒有問題。

再來可以看到在第二個 Row 當中的 Label 所呈現的位置橫跨了兩個 Column，這個也沒有問題。

再來可以看到在第三個 Column 當中的 Button 所呈現的位置縱跨了兩個 Row，這個也沒有問題。

不過呢，由於 iOS 跟 Android 在原生 UI 控制項的一些處理上，對於我們設計 Button 所在 Grid 的 Column 將寬度設定 Auto 時，兩個平台對於 Button 呈現的解釋有所的不同，所以會看到在畫面上 iOS 在按鈕的呈現上比較怪異一些，然後感覺 Android 似乎比較正常，但這都是可以在後續的處理上去做畫面的調整。

這邊就先按照我們原先的設計規劃來結束這篇 EP7 吧，鳩咪^_<

甘溫各位~~~