WPF 4 DataGrid 進階篇（一）：DataGridTemplateColumn 自定義列模板與編輯體驗

內建列類型（Text、CheckBox、ComboBox、Hyperlink）無法滿足所有業務場景。DataGridTemplateColumn 提供 CellTemplate（顯示模式）與 CellEditingTemplate（編輯模式）分離機制，支援任意視覺樹構建，是構建豐富數據網格的關鍵。

資料模型加入日期欄位

public class Member {
    public string Name { get; set; }
    public string Age { get; set; }
    public SexOpt Sex { get; set; }
    public bool Pass { get; set; }
    public DateTime ExamDate { get; set; }  // 新增：考試日期
    public Uri Email { get; set; }
}

測試資料

memberData.Add(new Member {
    Name = "Lucy", Age = "25", Sex = SexOpt.Female, Pass = true,
    ExamDate = new DateTime(2010, 4, 10),
    Email = new Uri("mailto:Lucy@school.com")
});
dataGrid.DataContext = memberData;

定義兩套 DataTemplate：顯示 vs 編輯

1. CellTemplate：顯示模式（自定義日期卡片樣式）

<Window.Resources>
    <DataTemplate x:Key="DateDisplayTemplate">
        <StackPanel Width="40" Height="30">
            <Border Background="Orange" BorderBrush="Black" BorderThickness="1">
                <TextBlock Text="{Binding ExamDate, StringFormat={}{0:MM-dd}}" 
                           FontSize="10" HorizontalAlignment="Center"/>
            </Border>
            <Border Background="White" BorderBrush="Black" BorderThickness="1">
                <TextBlock Text="{Binding ExamDate, StringFormat={}{0:yyyy}}" 
                           FontSize="10" HorizontalAlignment="Center"/>
            </Border>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

效果：上半部橙色背景顯示「月-日」，下半部白色背景顯示「年」，模擬日曆卡片視覺。

2. CellEditingTemplate：編輯模式（DatePicker 控件）

<DataTemplate x:Key="DateEditTemplate">
    <DatePicker SelectedDate="{Binding ExamDate, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</DataTemplate>

套用至 DataGridTemplateColumn

<DataGrid x:Name="dataGrid" ItemsSource="{Binding}" AutoGenerateColumns="False">
    <DataGrid.Columns>
        <DataGridTextColumn Header="Name" Binding="{Binding Name}"/>
        <DataGridTextColumn Header="Age" Binding="{Binding Age}"/>
        <DataGridComboBoxColumn Header="Sex" SelectedItemBinding="{Binding Sex}" 
            ItemsSource="{Binding Source={StaticResource sexEnum}}"/>
        <DataGridCheckBoxColumn Header="Pass" Binding="{Binding Pass}"/>
        <!-- 關鍵：TemplateColumn 雙模板 -->
        <DataGridTemplateColumn Header="Exam Date"
            CellTemplate="{StaticResource DateDisplayTemplate}"
            CellEditingTemplate="{StaticResource DateEditTemplate}"/>
        <DataGridHyperlinkColumn Header="Email" Binding="{Binding Email}"/>
    </DataGrid.Columns>
</DataGrid>

執行效果展示

顯示模式：日期欄呈現橙白雙層卡片

編輯模式：雙擊/進入編輯狀態 → 彈出 DatePicker 選擇日期

編輯確認後：恢復卡片顯示，日期已更新

DataGridTemplateColumn 核心屬性

進階應用場景

1. 複雜編輯器：ComboBox + TextBox 組合

<DataTemplate x:Key="ComplexEditTemplate">
    <StackPanel Orientation="Horizontal">
        <ComboBox ItemsSource="{Binding Source={StaticResource Categories}}" 
                  SelectedItem="{Binding Category}" Width="100"/>
        <TextBox Text="{Binding Detail}" Width="150" Margin="5,0,0,0"/>
    </StackPanel>
</DataTemplate>

2. 唯讀條件列：根據資料決定是否可編輯

<DataGridTemplateColumn.CellEditingTemplate>
    <DataTemplate>
        <TextBox Text="{Binding Value}" 
                 IsEnabled="{Binding IsEditable, Mode=OneWay}"/>
    </DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>

3. 按鈕操作列：每行內嵌動作按鈕

<DataTemplate x:Key="ActionTemplate">
    <StackPanel Orientation="Horizontal">
        <Button Content="編輯" Click="BtnEdit_Click" Tag="{Binding Id}" Margin="2"/>
        <Button Content="刪除" Click="BtnDelete_Click" Tag="{Binding Id}" Margin="2"/>
    </StackPanel>
</DataTemplate>
<!-- 僅設 CellTemplate，不設 CellEditingTemplate 即為唯讀操作列 -->
<DataGridTemplateColumn Header="Actions" CellTemplate="{StaticResource ActionTemplate}"/>

編輯提交與驗證流程

1. 使用者雙擊單元格或按 F2 進入編輯模式
2. DataGrid 實例化 CellEditingTemplate 視覺樹
3. 控件綁定 `Mode=TwoWay`，輸入即時更新資料源（或 `LostFocus` 提交）
4. 按 Enter/Tab/點擊其他處 → 結束編輯 → 實例化 CellTemplate 顯示新值
5. 若資料實作 `INotifyDataErrorInfo`，驗證錯誤會顯示紅色邊框與 ToolTip

源碼下載

https://cid-c75f4e27adfe5bbc.office.live.com/self.aspx/GnieTech/WPF4DataGridControl.zip

總結

DataGridTemplateColumn 以「雙模板分離」設計，完美解決「顯示要漂亮、編輯要好用」的雙重需求。顯示模式可構建任意豐富視覺化（卡片、圖表、進度條、狀態燈），編輯模式可嵌入任意輸入控件（DatePicker、ColorPicker、自定義 UserControl）。掌握這一機制，DataGrid 即可從簡單表格進化為強大的數據交互平台。