用 ListBox 和 DataBinding 顯示列表數據 (木野狐譯)

做者: 

Scott Guthrie

出處: 

[url]http://blog.joycode.com/scottgu/[/url]

【原文地址】 Silverlight Tutorial Part 5: Using the ListBox and DataBinding to Display List Data
【原文發表日期】 Friday, February 22, 2008 5:51 AM

這是8個系列教程的第5部分，這個系列示範如何使用 Silverlight 2 的 Beta1 版原本建立一個簡單的 Digg 客戶端應用。這些教程請依次閱讀，將有助於您理解 Silverlight 的一些核心編程概念。

用 ListBox 和 DataBinding 顯示咱們的 Digg 故事

前面咱們使用了 DataGrid 控件來顯示咱們的 Digg 故事。當咱們想用多列的格式來顯示內容時，它很適合。然而對咱們的 Digg 應用程序而言，也許咱們想稍微改變一下頁面的顯示方式，讓它看起來不太像網格，而更像一個列表。好消息是，這很容易實現 - 而且咱們不須要改變任何程序代碼。

首先咱們將 DataGrid 控件替換爲 <ListBox> 控件。咱們保持原有的控件名稱 ("StoriesList")：

從新運行一下程序，搜索故事，ListBox 會顯示搜索結果以下：

你可能以爲奇怪 - 爲何每一個條目都變成了 "DiggSample.DiggStory"? 這是由於咱們把 DiggStory 對象綁定給了 ListBox（而綁定的默認行爲會調用這些對象的 ToString() 方法）。若是咱們想改用每一個 DiggStory 對象的 Title 屬性來顯示條目，能夠設置 ListBox 的 DisplayMemberPath 屬性：

這樣作以後的效果以下：

若是要每次顯示不止一個值，或者定製每一個條目的佈局，咱們能夠覆蓋 ListBox 控件的 ItemTemplate，並提供一個自定義的 DataTemplate. 而後在這個 DataTemplate 內，定製每一個 DiggStory 對象如何顯示。

例如，咱們能夠用 DataTemplate 同時顯示 DiggStory 的 Title 和 NumDiggs 值，以下所示：

在 DataTemplate 中，咱們能夠綁定 DiggStory 對象中咱們所需的任何公共屬性。注意上面咱們是如何用 {Binding 屬性名} 語法，配合兩個 TextBlock 控件來完成這一點的。

設置了上述 DataTemplate 後，咱們的 ListBox 會顯示以下：

讓咱們再進一步，修改 DataTemplate 的定義以下。其中使用了兩個 StackPanel - 一個用於水平地堆疊行，另外一個用來垂直地堆疊文本塊(TextBlock)。

上述 DataTemplate 會使咱們的 ListBox 用以下方式顯示條目：

咱們在 App.xaml 文件中定義以下的 Style 規則（注意如何使用 LinearGradientBrush 來得到 DiggPanel 上的好看的漸變背景效果）：

關於 ListBox 有一點值得注意 - 即便咱們定製了其條目的顯示方式，它仍然會提供懸浮以及選中狀態的語義，無論你使用的是鼠標仍是鍵盤（上/下方向鍵，Home/End，等）：

ListBox 還支持完整的流式改變大小的功能 - 並在須要的時候提供內容的自動捲動功能（注意當窗口變小時，水平滾動條是如何出現的）：

下一步

咱們如今已經把數據的顯示切換成了基於列表的方式，並清理了其內容列表。

如今讓咱們來完成這個程序的最後一點功能性行爲 - 實現一個主/從工做流程，讓用戶在列表中選擇某個文章時能查看其細節。