縹緲's blog

ListView 與 ListBox 是兩個在 mobile 的世界中，主要用來顯示條列式資訊的元件，ListView 相對於 ListBox 來說，耗用的資源比較少，實際使用的狀況就反映在操作上，捲動的速度會比較流暢，缺點則是客製化的顯示沒有辦法那麼豐富(應該算追求顯示速度的代價吧..)，這次先介紹的是 ListView

其實之前「讀取資料庫資料顯示在手機上」這部分的時候，已經用過 ListView 元件了，不過在這邊還是交代一些基本的屬性

首先先放一個 ListView 在 Form 上，並且將 Align 設定為 alClient，然後為了讓 ListView 有資料可以顯示，我們借用 TPrototypeBindSource 這個元件，這個元件的目的就如同其名，是在建立 Prototype 的程式時，為了看起來比較貼近真實的畫面，因此可以事先模擬資料庫的資料，建立在 TPrototypeBindSource 這個元件中，當然也可以透過 TPrototypeBindSource 本身提供的一些功能，就不用從頭到尾自己建立模擬資料(缺點就是只有英文的...)，如果都完成的話，畫面應該像這樣

接下來在 PrototypeBindSource1 這個元件上用滑鼠左鍵點兩下，會開出如下視窗

這部分就是讓你建立需要模擬的欄位(數量與型態)，在這邊我們只需要先建立一個 string 型態的模擬欄位即可，所以點選左上角的 後， Field Data 選擇產生 ContractTitles 的欄位，然後選擇 OK

完成之後回到 Form 的畫面，按下滑鼠右鍵選擇 Bind Visually，準備做資料繫結(Data Binding)

接下來把 PrototypeBindSource1 的 ContractTitle1 這個欄位跟 ListView1 的 Item.Text 欄位做資料繫結，都設定正確的話，你應該已經可以看到 ListView1 上已經顯示出資料，如下圖

ListView 中比較特別的屬性，以 ListView.ItemAppearanceObjects.ItemObjects.Accessory.AccessoryType 為代表，以下分別是選擇不同的屬性質，右邊的圖示就會有對應的改變

選擇 More (預設)

選擇 Checkmark

選擇 Detail

另外如果你想顯示的資料中包含圖片，那你也可以調整 Listview1.ItemAppearance.ItemAppearance 的屬性為 ImageListItem，然後先在 PrototypeBindSource1 建立一個模擬圖片的欄位，重新設定 DataBinding 如下

當然你也可以玩看看 Listview1.ItemAppearance.ItemAppearance 其他的設定值，各有不一樣的效果…

比賽結束...again

to be continued...