建立清單/詳細資料繫結

發行項
10/11/2017

清單/詳細資料設計包括兩個部分：

顯示項目清單的清單檢視，通常是資料集合。
顯示有關清單中所選項目之詳細資料的詳細資料檢視。

本使用者指南便是清單/詳細資料設計的範例，其中的目錄是清單檢視，而顯示的主題則是詳細資料檢視。

Microsoft Expression Blend 透過提供兩種模式的 [資料] 面板，使您能夠輕鬆地在清單/詳細資料設計中，將資料新增至畫板：

在 [清單] 模式中，您從 [資料] 面板拖曳出來的項目會建立清單檢視。您可以將項目拖曳到 ListBox 、 DataGrid 或 TreeView 控制項上。如果您將項目拖曳至畫板的空白區域，則會自動建立 ListBox 。
在 [詳細資料] 模式中，您從 [資料] 面板拖曳出來的項目會在 Grid 版面配置面板中建立詳細資料檢視。您也可以建立不同的版面配置面板 (例如 Canvas 版面配置面板) 並將項目拖曳到其中。

在幕後過程中，Expression Blend 會將 Grid 物件的 DataContext 屬性設定為顯示清單檢視之物件的 SelectedItem 屬性，藉以自動設定清單檢視與詳細資料檢視之間的關係。您也可以手動設定此關係。

秘訣：
Expression Blend 隨附說明簡單清單/詳細資料設計，以及自訂清單與詳細資料物件之外觀的範例。若要開啟 Expression Blend 中的範例，請按一下 [說明] 功能表上的 [歡迎畫面]，然後按一下 [範例] 索引標籤，再按一下 [ColorSwatchSL]。

自動建立清單/詳細資料繫結

如果沒有可使用的資料來源，可以建立範例資料來源並使其可在執行階段使用。

如需詳細資訊，請參閱產生範例資料。
在 [資料] 面板中，按一下 [清單模式] 。

秘訣：

在 [清單模式] 中，您拖曳至畫板上的資料項目會視為獨立資料繫結或清單檢視的一部分。這是 [資料] 面板的預設模式。
在 [資料] 面板中，從資料集合內部拖曳一或多個屬性到畫板上 (以建立 ListBox 物件)，或拖曳到現有的 ListBox 、 DataGrid 或 TreeView 物件上。

注意：

如果出現 [建立資料繫結] 對話方塊，表示您可能是在 [詳細資料模式] 中，而不是 [清單模式] 中。

物件會顯示每個屬性的資料集合。

在清單模式中將資料拖曳至 ListBox 物件

在清單模式中將資料拖曳至 DataGrid 物件

在清單模式中將資料拖曳至 TreeView 物件

秘訣：
在 [清單模式] 中，您拖曳至畫板上的資料項目會視為獨立資料繫結或清單檢視的一部分。這是 [資料] 面板的預設模式。

注意：
如果出現 [建立資料繫結] 對話方塊，表示您可能是在 [詳細資料模式] 中，而不是 [清單模式] 中。

在 [資料] 面板中，按一下 [詳細資料模式] Ee341499.7786ee28-da1d-41b2-93fd-b4caeb75ab98(zh-tw,Expression.40).png 。

秘訣：
在 [詳細資料模式] 中，您拖曳至畫板上的資料項目會視為詳細資料檢視的一部分。接著會建立 Grid 物件以顯示每個資料項目的子物件。 Grid 物件會自動設定為使用資料內容和在 [清單模式] 中建立之最後物件的選取項目。

在 [資料] 面板中，從資料集合內部拖曳一或多個屬性到畫板上 (以建立 Grid 版面配置面板)，或拖曳到現有的版面配置面板上。

該版面配置面板會顯示 TextBlock 控制項，其中包含每個屬性的名稱和值。

建立 ListBox 繫結之後在詳細資料模式中拖曳資料

建立 DataGrid 繫結之後在詳細資料模式中拖曳資料

建立 TreeView 繫結之後在詳細資料模式中拖曳資料
按 F5 來測試應用程式。在清單檢視中按一下項目，以檢視隨後的詳細資料檢視更新。

選取清單控制項中的項目以更新其詳細資料檢視

此程序示範如何建立有兩個層級深的清單/詳細資料檢視。您也可以建立有三個層級深的清單/詳細資料檢視。

如需詳細資訊，請參閱試試看：建立三個層級深的清單/詳細資料繫結。

手動建立清單/詳細資料繫結

如果沒有可使用的資料來源，可以建立範例資料來源並使其可在執行階段使用。

如需詳細資訊，請參閱產生範例資料。
在 [工具] 面板中，選取要用來顯示清單檢視的控制項，例如 [ComboBox] ，並將它繪製在畫板上。
在 [物件與時間軸] 面板中，以滑鼠右鍵按一下新物件，然後按一下 [重新命名]，輸入新的名稱，再按 ENTER。

秘訣：

當物件建立時，它並不會被賦予明確的名稱。透過重新命名物件，您所建立的名稱可以由詳細資料檢視物件的 DataContext 屬性所參照。
在 [資料] 面板中，按一下 [清單模式] 。
在 [資料] 面板中，從資料集合內部拖曳一或多個屬性到清單物件。

在清單模式中將資料拖曳至 ComboBox 物件
在 [資料] 面板中，按一下 [詳細資料模式] 。
在 [資料] 面板中，從資料集合內部拖曳一或多個屬性到畫板上 (以建立 Grid 版面配置面板)，或拖曳到現有的版面配置面板上。

該版面配置面板會顯示 TextBlock 控制項，其中包含每個屬性的名稱和值。

建立 ComboBox 繫結之後在詳細資料模式中拖曳資料
按 F5 來測試應用程式。如果在清單物件中選取不同項目並不會更新詳細資料檢視，請繼續下一個步驟。
選取代表詳細資料檢視的版面配置面板 (通常是 Grid 物件)。
在 [屬性] 面板中的 DataContext 屬性旁邊，按一下 [進階選項] ，然後按一下 [資料繫結]。
在 [建立資料繫結] 對話方塊中，按一下 [元素屬性] 索引標籤。
在 [場景元素] 下選取清單物件，然後在 [屬性] 下選取 SelectedItem 屬性。

建立詳細資料物件與清單物件之間的關係
請按一下 [確定] 關閉 [建立資料繫結] 對話方塊。

詳細資料版面配置面板中的所有子項目都會使用清單物件之選取項目的資料內容。
確認詳細資料版面配置面板的子項目已繫結至相關資料屬性。有些子項目並不會繫結至資料，因為它們僅顯示資料屬性的名稱。其他子項目都應該是與資料繫結的，因為它們會顯示與清單物件中選取項目有關的資料。例如，選取一個不顯示資料屬性名稱的 TextBlock 子項目，然後在 [屬性] 面板中尋找 Text 屬性。如果該屬性周圍沒有黃色週框方塊，就表示 TextBlock 物件不是與資料繫結的。若要繫結 TextBlock 物件：
1. 按一下 Text 屬性旁邊的 [進階選項] ，然後按一下 [資料繫結]。
2. 在 [建立資料繫結] 對話方塊中，按一下 [明確資料內容] 索引標籤。
3. 在 [欄位] 下，展開 [集合]，然後選取要在這個 TextBlock 物件中顯示的資料屬性。
4. 請按一下 [確定] 關閉 [建立資料繫結] 對話方塊。
  
  Text 屬性周圍會出現黃色週框方塊，表示該屬性現在已與資料繫結。
按 F5 來測試應用程式。

共用方式為

建立清單/詳細資料繫結

自動建立清單/詳細資料繫結

手動建立清單/詳細資料繫結

另請參閱

工作

概念

其他資源