Infragistics｜Ultimate UI WPF｜在 XamDataGrid 單元格（模板字段）中嵌入任意控件

在考慮網格中的編輯功能時，將哪些項目要編輯，哪些項目要讓最終用戶顯示出來，會帶來更好的操作感。在這裡，我們將使用 XamDataGrid 的模板字段來表示最終用戶可以可視化編輯的項目。

何時不使用模板字段

發生滑鼠或鍵盤操作之前，無法判斷哪些項目可以編輯。

使用模板字段

觀察現在顯示“產品名稱”、“庫存”和“訂單數量”列是可編輯的。

現在讓我們實現模板字段。

定義模板字段

在 XamDataGrid 中顯示數據相關的列時，基本是在 FieldLayout.Fields 集合中定義 Field 對象，而模板字段定義 TemplateField 對象。

 <igDP:XamDataGrid DataSource="{Binding Path=Data.Products}"> 
     <!--AutoGenerateFields 為 False 並顯式聲明列--> 
     <igDP:XamDataGrid.FieldLayoutSettings> 
         <igDP:FieldLayoutSettings AutoGenerateFields="False" /> 
     </igDP:XamDataGrid.FieldLayoutSettings> 
     <igDP:XamDataGrid.FieldLayouts> 
         <igDP:FieldLayout> 
             <igDP:FieldLayout.Fields> 
                 <igDP:Field Name="ProductID" Label="製品 ID" 
                             AllowEdit="False" IsTabStop="False" Width="53"/> 
                 <!--模板字段--> 
                 <igDP:TemplateField Name="ProductName" Label="製品名" 
                                     Settings="{StaticResource FieldSetting}" 
                                     DisplayTemplate="{StaticResource FieldDisplayTemplate}" 
                                     EditTemplate="{StaticResource FieldEditorTemplate}"/> 
                ...
                 <!--模板字段--> 
                 <igDP:TemplateField Name="UnitsInStock" Label="在庫" Width="80" 
                                     Settings="{StaticResource FieldSetting}" 
                                     DisplayTemplate="{StaticResource FieldDisplayTemplate}" 
                                     EditTemplate="{StaticResource FieldEditorTemplate}"/> 
                 <!--模板字段--> 
                 <igDP:TemplateField Name="UnitsOnOrder" Label="発注数" Width="80" 
                                     Settings="{StaticResource FieldSetting}" 
                                     DisplayTemplate="{StaticResource FieldDisplayTemplate}" 
                                     EditTemplate="{StaticResource FieldEditorTemplate}"/> 
                ...
             </igDP:FieldLayout.Fields> 
         </igDP:FieldLayout> 
     </igDP:XamDataGrid.FieldLayouts> 
 </igDP:XamDataGrid> 

模板定義

在模板字段中，您可以為每個“顯示狀態”和“編輯狀態”定義 UI。將 DataTemplate 分配給“顯示狀態”的 DisplayTemplate 和“編輯狀態”的 EditTemplate。這次，我們使用以下 DataTemplate。由於 DisplayTemplate 和 EditTemplate 都使用了 TextBox，因此 EditTemplate 中使用的 FieldEditorTemplate 指定了一種不同於默認背景色的顏色來確定啟用哪一種。

 <Window.Resources> 
    ...
     <!--顯示控件--> 
     <DataTemplate x:Key="FieldDisplayTemplate"> 
         <TextBox Text="{igEditors:TemplateEditorValueBinding}" /> 
     </DataTemplate> 
     <!--用於編輯的編輯器--> 
     <DataTemplate x:Key="FieldEditorTemplate"> 
         <TextBox Text="{igEditors:TemplateEditorValueBinding}" Background="#FFF2A5A5" /> 
     </DataTemplate> 
 </Window.Resources> 

執行結果

“產品名稱”是焦點在コーラ上的狀態。您可以看到 EditTemplate 顯示的背景顏色與其他 TextBox 不同。