您现在的位置：程式碼之家 >> 編程語言 > >> .NET 網頁程式設計 >> 關於.NET

WPF 4 DataGrid 基礎功能完全指南：自定義列、選擇模式、編輯控制與內建列類型

編輯：關於.NET

DataGrid 是 WPF 數據展示與編輯的核心控件。本文系統介紹四大基礎支柱：自定義列定義、四種內建列類型、靈活選擇模式、編輯與只讀控制，建立扎實的 DataGrid 開發基礎。

1. 內建列類型對照表

設定 `AutoGenerateColumns="False"` 後，手動定義列以獲得完全控制權：

列類型	適用資料型別	核心屬性	典型場景
`DataGridTextColumn`	string, int, double, DateTime 等	`Binding`	一般文字/數值顯示與編輯
`DataGridCheckBoxColumn`	bool	`Binding`	布林值勾選（True/False/Null）
`DataGridComboBoxColumn`	Enum, List<T> 等	`SelectedItemBinding`, `ItemsSource`	下拉單選（性別、狀態、分類）
`DataGridHyperlinkColumn`	Uri, string	`Binding`	超連結點擊導航

四種內建列類型對照表

2. 完整自定義列範例

XAML 定義

<Window x:Class="WPF4ControlTest.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WPF4ControlTest"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="DataGrid Demo" Height="200" Width="500">
    <Window.Resources>
        <!-- Enum 綁定輔助：ObjectDataProvider 取得 Enum 值陣列 -->
        <ObjectDataProvider x:Key="sexEnum" MethodName="GetValues" ObjectType="{x:Type sys:Enum}">
            <ObjectDataProvider.MethodParameters>
                <x:Type Type="local:SexOpt"/>
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>
    </Window.Resources>
    
    <Grid>
        <DataGrid x:Name="dataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Name" Width="80" Binding="{Binding Name}"/>
                <DataGridTextColumn Header="Age" Width="50" Binding="{Binding Age}"/>
                <DataGridComboBoxColumn Header="Sex" Width="80"
                    SelectedItemBinding="{Binding Sex}"
                    ItemsSource="{Binding Source={StaticResource sexEnum}}"/>
                <DataGridCheckBoxColumn Header="Pass Exam?" Width="100" Binding="{Binding Pass}"/>
                <DataGridHyperlinkColumn Header="Email" Width="150" Binding="{Binding Email}"/>
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</Window>

C# 後端代碼

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();
        var memberData = new ObservableCollection<Member>();
        memberData.Add(new Member { Name = "Joe", Age = "23", Sex = SexOpt.Male, Pass = true, Email = new Uri("mailto:Joe@school.com") });
        memberData.Add(new Member { Name = "Mike", Age = "20", Sex = SexOpt.Male, Pass = false, Email = new Uri("mailto:Mike@school.com") });
        memberData.Add(new Member { Name = "Lucy", Age = "25", Sex = SexOpt.Female, Pass = true, Email = new Uri("mailto:Lucy@school.com") });
        dataGrid.DataContext = memberData;
    }
}

public enum SexOpt { Male, Female }

public class Member {
    public string Name { get; set; }
    public string Age { get; set; }
    public SexOpt Sex { get; set; }
    public bool Pass { get; set; }
    public Uri Email { get; set; }
}

執行效果

DataGrid 自定義列效果：文字、下拉、勾選、超連結

3. 選擇模式：SelectionUnit + SelectionMode

預設：整行選擇、多選。可精確控制選擇粒度與數量：

SelectionUnit	說明
`FullRow`	整行選擇（預設）
`Cell`	單一單元格選擇
`CellOrRowHeader`	單元格選擇 + 點擊行首選整行

SelectionMode	說明
`Extended`	多選（Ctrl/Shift 輔助，預設）
`Single`	單選

組合範例：單元格多選

<DataGrid x:Name="dataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False"
          SelectionUnit="Cell" SelectionMode="Extended">

預設整行多選

SelectionUnit=Cell, SelectionMode=Extended 動態效果

4. 編輯控制：IsReadOnly 與內建編輯命令

全域唯讀

<DataGrid ... IsReadOnly="True">

內建編輯鍵盤命令（預設啟用）

按鍵	動作
F2 / 雙擊	進入編輯模式
Enter / Tab	提交編輯、移至下一單元格
Esc	取消編輯、恢復原值
Delete	清空單元格值
Ctrl+C / Ctrl+V	複製/貼上（需啟用 ClipboardCopyMode）

編輯命令對照表

列寬度控制

Width 設定	行為
`Width="80"`	固定 80 像素
`Width="*"`	星號比例分配剩餘空間
`Width="Auto"`	根據標題/內容自動調整
`Width="SizeToHeader"`	適應標題寬度
`Width="SizeToCells"`	適應內容寬度

資料綁定最佳實踐

集合類型：使用 `ObservableCollection<T>` 支援增刪自動刷新 UI
實體類別：實作 `INotifyPropertyChanged` 確保屬性變更通知
驗證：實作 `IDataErrorInfo` 或 `INotifyDataErrorInfo` 整合驗證錯誤視覺化
排序：預設支援點擊列標題排序，可透過 `CanUserSort="False"` 禁用特定列

常見入門問題

問題	解決方案
Enum 不顯示在 ComboBox	使用 ObjectDataProvider + MethodName=GetValues 包裝 Enum
Hyperlink 點擊無反應	處理 DataGrid.HyperlinkClick 事件或 ViewModel 命令綁定
編輯後資料不更新	確認 Binding Mode=TwoWay、實體實作 INotifyPropertyChanged
自動生成列順序亂	設定 AutoGenerateColumns=False 手動定義順序

總結

DataGrid 基礎四大支柱：

列定義：`AutoGenerateColumns=False` + 四大內建列類型 + `DataGridTemplateColumn` 擴展
選擇模式：`SelectionUnit` (Cell/Row/CellOrRowHeader) × `SelectionMode` (Single/Extended)
編輯控制：`IsReadOnly` 全域開關 + 內建鍵盤命令 + `BeginEdit`/`CommitEdit`/`CancelEdit` 程式化控制
資料綁定：`ObservableCollection` + `INotifyPropertyChanged` + 驗證介面

掌握這些基礎，即可構建功能完整、交互流暢的數據網格應用。進階主題請參考後續文章：樣式自定義、TemplateColumn、RowDetailsTemplate 等。