控制 DataGrid 系統由多種專門的元件類型組成，協同工作以顯示和管理表格資料。 了解這些元件及其與 的 DataGrid 關係，有助於你自訂資料網格的外觀與行為，以符合你的特定需求。
元素概述
該系統 DataGrid 包含以下主要元素：
- DataGridCell - 代表網格中顯示單一資料值的單一儲存格。
- DataGridRow - 代表網格內包含多個儲存格的資料列。
- DataGridRowHeader - 提供每列左側的列標頭區域，通常用於列選取指示器。
- DataGridColumnHeader - 代表欄位的標頭，通常顯示欄位標題並提供排序功能。
- DataGridColumnHeadersPresenter - 包含並呈現所有欄標題，列於網格頂端。
這些元素在 中 DataGrid 以階層式排列，形成熟悉的表格式佈局。 欄位 DataGridColumnHeadersPresenter 標題位於頂部，每個 DataGridRow 欄位包含多個 DataGridCell 元素及一個 DataGridRowHeader。
自訂元素
你可以透過套用樣式或修改範本來自訂每個元素。 例如：
- 使用屬性 CellStyle 來改變 DataGridCell 的儲存格外觀。
- 使用 RowStyle 屬性來設計 DataGridRow，以改變列的外觀。
- 用 Style 來 DataGridRowHeader 自訂列標頭，使用該 RowHeaderStyle 屬性。
- 將 DataGridColumnHeader 樣式化，以使用 ColumnHeaderStyle 屬性來自訂欄位標題。
欲了解更多關於樣式與模板的資訊，請參見 《樣式與模板》。
DataGridCell
該 DataGridCell 元素代表資料網格中的單一儲存格，並回應使用者的互動，如選取與編輯。
組件
這個 DataGridCell 元素不會定義任何命名的模板部分。
States
下表列出該 DataGridCell 元素的視覺狀態。
| VisualState 名稱 | VisualStateGroup 名稱 | Description |
|---|---|---|
| 正常 | CommonStates | 預設狀態。 |
| 滑鼠移轉 | CommonStates | 滑鼠指標會放在儲存格上方。 |
| Focused | FocusStates | 該儲存格已獲得焦點。 |
| 心不在焉 | FocusStates | 細胞沒有焦點。 |
| Current | 當前狀態 | 細胞就是目前的細胞。 |
| 定期的 | 當前狀態 | 這個細胞不是現在的細胞。 |
| Display | 互動狀態 | 該儲存格處於顯示模式。 |
| 編輯 | 互動狀態 | 儲存格處於編輯模式中。 |
| 已選擇 | 選擇狀態 | 選定了該儲存格。 |
| 未選取 | 選擇狀態 | 細胞沒有被選中。 |
| 焦點無效 | 驗證狀態 | 細胞本身就不有效，且有焦點。 |
| 無效未聚焦 | 驗證狀態 | 細胞本身就不有效，也沒有焦點。 |
| 有效 | 驗證狀態 | 這個細胞是有效的。 |
DataGridRow
元素 DataGridRow 代表網格中的一列資料。 每一列包含多個儲存格和一個列標頭。
組件
這個 DataGridRow 元素不會定義任何命名的模板部分。
States
下表列出該 DataGridRow 元素的視覺狀態。
| VisualState 名稱 | VisualStateGroup 名稱 | Description |
|---|---|---|
| 正常 | CommonStates | 預設狀態。 |
| 滑鼠移轉 | CommonStates | 滑鼠指標會放在該列上方。 |
| 滑鼠移過編輯 | CommonStates | 滑鼠指標會放在該列上，該列處於編輯模式。 |
| 鼠標懸停_已選取 | CommonStates | 當滑鼠指標懸停於該列上方時，該列會被選取。 |
| 滑鼠懸停_未聚焦_編輯 | CommonStates | 滑鼠指標放在該列上方，該列處於編輯模式，且沒有焦點。 |
| MouseOver_Unfocused_Selected (滑鼠懸停_未聚焦_已選中) | CommonStates | 滑鼠指標移到該列上，該列已被選取，但沒有被焦點鎖定。 |
| Normal_AlternatingRow | CommonStates | 這排是交替排列的。 |
| 正常_編輯 | CommonStates | 該列處於編輯模式。 |
| 正常_已選擇 | CommonStates | 已選取該列。 |
| 未聚焦編輯 | CommonStates | 那列是編輯模式，沒有對焦。 |
| 未聚焦_已選取 | CommonStates | 該列是被選取且沒有對焦的。 |
| 焦點無效 | 驗證狀態 | 控制項無效並具有焦點。 |
| 無效未聚焦 | 驗證狀態 | 控制不有效，也沒有焦點。 |
| 有效 | 驗證狀態 | 控制是有效的。 |
DataGridRowHeader
該 DataGridRowHeader 元素出現在每列的左側，通常顯示列選取指示器或列號。
組件
下表列出該 DataGridRowHeader 元素的命名部分。
| 部分 | 類型 | Description |
|---|---|---|
| PART_TopHeaderGripper | Thumb | 用來從上方調整列頭大小的元素。 |
| PART_BottomHeaderGripper | Thumb | 可從底部調整列標頭大小的元素。 |
States
下表列出該 DataGridRowHeader 元素的視覺狀態。
| VisualState 名稱 | VisualStateGroup 名稱 | Description |
|---|---|---|
| 正常 | CommonStates | 預設狀態。 |
| 滑鼠移轉 | CommonStates | 滑鼠指標會放在該列上方。 |
| 滑鼠移至_當前列 | CommonStates | 滑鼠指標位於該列上方，該列為當前列。 |
| 游標懸停_目前列_已選擇 | CommonStates | 滑鼠指標會放在該列上，該列是目前且已選取的。 |
| MouseOver_EditingRow | CommonStates | 滑鼠指標會放在該列上，該列處於編輯模式。 |
| 鼠標懸停_已選取 | CommonStates | 當滑鼠指標懸停於該列上方時，該列會被選取。 |
| 游標經過_未聚焦_當前列_已選取 | CommonStates | 滑鼠指標放在該列上方，該列目前已選取，且沒有焦點。 |
| MouseOver_Unfocused_EditingRow | CommonStates | 滑鼠指標放在該列上方，該列處於編輯模式，且沒有焦點。 |
| MouseOver_Unfocused_Selected (滑鼠懸停_未聚焦_已選中) | CommonStates | 滑鼠指標移到該列上，該列已被選取，但沒有被焦點鎖定。 |
| Normal_CurrentRow | CommonStates | 該列是當前列。 |
| Normal_CurrentRow_Selected | CommonStates | 該列為當前列，並被選取。 |
| Normal_EditingRow | CommonStates | 該列處於編輯模式。 |
| 正常_已選擇 | CommonStates | 已選取該列。 |
| 未聚焦_目前行_選擇 | CommonStates | 該列是目前的列，已被選取，且沒有焦點。 |
| Unfocused_EditingRow | CommonStates | 那列是編輯模式，沒有對焦。 |
| 未聚焦_已選取 | CommonStates | 該列是被選取且沒有對焦的。 |
| 焦點無效 | 驗證狀態 | 控制項無效並具有焦點。 |
| 無效未聚焦 | 驗證狀態 | 控制不有效，也沒有焦點。 |
| 有效 | 驗證狀態 | 控制是有效的。 |
DataGridColumnHeadersPresenter
該 DataGridColumnHeadersPresenter 元素包含所有欄位標頭，並將它們以一列顯示在資料網格頂端。
組件
下表列出該 DataGridColumnHeadersPresenter 元素的命名部分。
| 部分 | 類型 | Description |
|---|---|---|
| PART_FillerColumnHeader | DataGridColumnHeader | 欄位標題的佔位符。 |
States
下表列出該 DataGridColumnHeadersPresenter 元素的視覺狀態。
| VisualState 名稱 | VisualStateGroup 名稱 | Description |
|---|---|---|
| 焦點無效 | 驗證狀態 | 細胞本身就不有效，且有焦點。 |
| 無效未聚焦 | 驗證狀態 | 細胞本身就不有效，也沒有焦點。 |
| 有效 | 驗證狀態 | 這個細胞是有效的。 |
DataGridColumnHeader（資料網格欄頭）
該 DataGridColumnHeader 元素代表欄位的標頭。 欄位標題通常會顯示欄位標題，並在點擊時提供排序功能。
組件
下表列出該 DataGridColumnHeader 元素的命名部分。
| 部分 | 類型 | Description |
|---|---|---|
| PART_LeftHeaderGripper | Thumb | 用來從左邊調整欄位標題大小的元素。 |
| 右標頭夾持器部件 | Thumb | 用來從右側調整欄位標題大小的元素。 |
States
下表列出該 DataGridColumnHeader 元素的視覺狀態。
| VisualState 名稱 | VisualStateGroup 名稱 | Description |
|---|---|---|
| 正常 | CommonStates | 預設狀態。 |
| 滑鼠移轉 | CommonStates | 滑鼠指標位於控制器上方。 |
| 按下 | CommonStates | 控制項被按下。 |
| SortAscending | 狀態排序 | 欄位依升序排列。 |
| SortDescending | 排序狀態 | 欄位依遞減順序排列。 |
| 未分類 | 排序狀態 | 欄位沒有排序。 |
| 焦點無效 | 驗證狀態 | 控制項無效並具有焦點。 |
| 無效未聚焦 | 驗證狀態 | 控制不有效，也沒有焦點。 |
| 有效 | 驗證狀態 | 控制是有效的。 |
