共用方式為


使用 DataGrid 控制項

DataGrid 控制項會在多個欄與列中顯示資料集合。它包含依照欄排序的功能。

如需有關 DataGrid 控制項的詳細資訊,請參閱 MSDN 上的 DataGrid Class (System.Windows.Controls) (DataGrid 類別 (System.Windows.Controls))。

建立範例資料以便在 DataGrid 控制項中顯示

在 DataGrid 控制項中,您可以使用任何類型的資料。如果您還沒有資料可用於本主題稍後的「填入 DataGrid 控制項」程序,請依照下列程序來設定可完整呈現 DataGrid 控制項功能的範例資料。

  1. 如果看不到 [資料] 面板,請按一下 [視窗] 功能表上的 [資料]。

  2. 在 [資料] 面板中,按一下 [新增範例資料來源]Ee341396.30540d76-7256-43ce-b5d9-4b2edf3d339f(ZH-TW,Expression.30).png,然後按一下 [定義新的範例資料]。

  3. 在 [定義新的範例資料] 對話方塊中,可以變更資料集的預設名稱,並選取要將資料提供給專案的哪個組件使用。

  4. 選取 [應用程式執行時啟用範例資料] 方塊。

    Ee341396.alert_tip(ZH-TW,Expression.30).gif秘訣:

    [應用程式執行時啟用範例資料] 方塊可讓專案在執行應用程式時顯示範例資料。若未選取此方塊,則 Microsoft Expression Blend 只會在畫板上顯示範例資料。

    如需詳細資訊,請參閱使您的應用程式在執行時顯示範例資料

  5. 按一下 [確定]。

    包含三種屬性類型 (字串 Ee341396.0baebca0-a722-4aa2-ad58-a96325a0536d(ZH-TW,Expression.30).png、數字 Ee341396.3a9d424b-3e04-443e-8c96-2bcb744fd037(ZH-TW,Expression.30).png 和布林值 Ee341396.b09651ed-c8ae-4f66-b10c-d8478c5337c7(ZH-TW,Expression.30).png) 之集合 Ee341396.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(ZH-TW,Expression.30).png 的範例資料來源隨即建立。

    Ee341396.496d7ebc-fe46-42f6-95a8-57b0e5be5d49(ZH-TW,Expression.30).png

    若要完整探索範例資料和 DataGrid 控制項的功能,請將影像屬性新增至集合。

  6. 在 [集合]Ee341396.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(ZH-TW,Expression.30).png 旁邊,按一下 [新增簡單屬性] Ee341396.203a14a5-0db2-486e-9b94-4fdf658d531b(ZH-TW,Expression.30).png,將新屬性新增至集合。

    Ee341396.alert_tip(ZH-TW,Expression.30).gif秘訣:

    您可以按一下 [新增簡單屬性] 按鈕 Ee341396.203a14a5-0db2-486e-9b94-4fdf658d531b(ZH-TW,Expression.30).png 旁的下拉式箭號,選取要新增的不同屬性類型:簡單、複雜和集合。

  7. 在新屬性 ([Property4]) 旁邊,按一下 [變更屬性類型]Ee341396.c4968582-0dae-407e-961b-80ffa2838f3b(ZH-TW,Expression.30).png。在出現的編輯器中,按一下 [類型] 旁邊的下拉式箭號,然後按一下 [影像]。

  8. 按一下編輯器以外的任何位置,將它關閉。

    [Property4] 旁邊的圖示會更新,以將它識別為影像 Ee341396.675c8aad-5da1-4df3-8a7a-b26418c4e8cf(ZH-TW,Expression.30).png 屬性。

現在您已準備好可以在 DataGrid 控制項中顯示的範例資料集合。

如需有關修改範例資料與新增更多資料屬性的詳細資訊,請參閱修改範例資料

填入 DataGrid 控制項

有許多方法可以將資料繫結至畫板上的控制項。下列程序會顯示當您使用 DataGrid 控制項時,將資料繫結至畫板上的控制項的最快方法。

如需其他選項,請參閱將物件繫結至資料

  1. 在 [工具] 面板中,按一下 [資產]Ee341396.0d8b8d29-1af9-418f-8741-be3097d76eab(ZH-TW,Expression.30).png

    Ee341396.alert_tip(ZH-TW,Expression.30).gif秘訣:

    您也可以按一下 [視窗] 功能表上的 [資產],在固定面板中顯示 [資產] 面板。

  2. 在 [資產] 面板中,展開 [控制項],按一下 [全部],然後按一下 [DataGrid]Ee341396.55bfb0df-05d2-4b58-8312-24a3aed103e3(ZH-TW,Expression.30).png 控制項。

    [工具] 面板中的 [資產]Ee341396.0d8b8d29-1af9-418f-8741-be3097d76eab(ZH-TW,Expression.30).png 之下的按鈕會顯示 DataGrid 控制項的圖示,而且呈選取狀態。

  3. 使用滑鼠在主文件中的畫板上繪製稍大的 DataGrid 物件。

  4. 在 [資料] 面板中,將您的範例資料集合 (Ee341396.94dad06c-7ddb-4c5e-b2ee-74b394c713ff(ZH-TW,Expression.30).png [集合]) 拖曳至新的資料格線物件上。

    資料格線會顯示範例資料來源中的集合,並將影像屬性轉換為影像物件,以及將布林值屬性轉換為核取方塊。

  5. 按 F5 執行應用程式。

    如果您使用的是前一個程序的範例資料,而且在測試應用程式時啟用了範例資料,那麼應該會看到以下畫面:

    Ee341396.c5466ecc-fe83-4d23-96c0-ca058daa29d0(ZH-TW,Expression.30).png

    Ee341396.alert_tip(ZH-TW,Expression.30).gif秘訣:

    若要在修改 DataGrid 物件所顯示的範例資料後,更新畫板上的 DataGrid 物件,您可以將個別的資料屬性拖曳至控制項以增加新欄,也可以再次拖曳整個集合。在 [物件與時間軸] 面板中,您可以展開 DataGrid 物件的 [欄] 節點來刪除和重新排序欄。

變更 DataGrid 控制項中的欄標籤

當您將資料集合拖曳至資料格線控制項上時,欄標籤會依照屬性名稱來設定。不過,在填入資料格線控制項之後,您可以變更欄標籤。

  1. 在 [物件與時間軸] 面板中,展開 [DataGrid] 物件以顯示欄物件。

  2. 選取第一個欄物件 ([DataGridTemplateColumn] "Property1")。在 [屬性] 面板中的 [Header] 屬性旁邊,輸入描述名稱,例如 "Description",然後按 ENTER。

  3. 選取另外兩個欄物件並變更其名稱。

  4. 按 F5 執行應用程式。

    如果您使用的是前一個程序的範例資料,而且在測試應用程式時啟用了範例資料,那麼應該會看到類似以下的畫面:

    Ee341396.749194f0-94df-4ceb-bdcb-30b35c6ae56b(ZH-TW,Expression.30).png

變更 DataGrid 控制項的外觀

您可以修改控制項的屬性,或修改用來設定其樣式的範本,以變更控制項的外觀。您可以修改整個範本、空的列範本,以及套用至個別儲存格、標題範本及其他的範本。

如需詳細資訊,請參閱建立或修改範本

變更欄標題的外觀

  1. 在 [物件與時間軸] 面板中或在畫板上,以滑鼠右鍵按一下 [DataGrid ] 物件,然後依序指向 [編輯其他範本] 及 [編輯 ColumnHeaderStyle],再按一下 [編輯複本]。

    Ee341396.976995f7-d28e-4af7-8bba-4b1555eaff54(ZH-TW,Expression.30).png

  2. 在 [建立樣式資源] 對話方塊中,按一下 [確定]。

    Expression Blend 會進入範本編輯模式。畫板頂端的階層連結列會顯示您正在 DataGrid 物件內編輯範本。

  3. 在 [物件與時間軸] 面板中,將其他物件新增至範本,或在 [屬性] 面板中修改現有物件的屬性。例如,在 [Grid] 物件中,有一個名為 [SortIcon] 的路徑代表排序按鈕的圖示。您可以將這個圖示變更為影像,或修改路徑。當您執行應用程式並按下欄標題時,就會顯示排序按鈕。

    Ee341396.alert_tip(ZH-TW,Expression.30).gif秘訣:

    有些屬性可能會顯示黃色週框方塊,以表示它們已繫結至資料或繫結至使用範本之控制項的屬性 (範本繫結)。

    如需範本繫結的詳細資訊,請參閱設定支援範本之控制項的樣式

變更含有影像之儲存格的外觀

  1. 在畫板上,以滑鼠右鍵按一下顯示影像之資料格線物件中的儲存格,依序指向 [編輯欄範本] 和 [編輯 CellTemplate],然後按一下 [編輯目前的項目]。

  2. 在 [物件與時間軸] 面板中,新增其他物件至 [StackPanel] 版面配置容器 (例如著作權符號),或選取 [Image] 物件並在 [屬性] 面板中修改其屬性。

    您所做的變更會影響所有包含影像的儲存格。

變更隔行資料列的色彩

  1. 在 [物件與時間軸] 面板中,選取 [DataGrid] 物件。

  2. 在 [屬性] 面板中的 [列] 下,按一下 [AlternatingRowBackground] 屬性旁邊的矩形內部。

    筆刷編輯器隨即出現。

  3. 按一下色彩編輯器頂端的其中一個索引標籤,以選取筆刷類型。如果您使用現有的筆刷 ([單色筆刷]Ee341396.b62aabb4-fad4-4a9b-a84c-16c98012cf27(ZH-TW,Expression.30).png) 並變更色彩,請確定增加 [Alpha] 屬性,如此一來色彩才不會透明。

  4. 您可以透過修改 [RowBackground] 屬性來變更其他列的色彩。

    如需有關修改筆刷的詳細資訊,請參閱設定色彩、筆刷與遮罩

請參閱

其他資源

建立範例資料

連接到即時資料

在控制項中顯示資料