在考虑网格中的编辑功能时，将哪些项目要编辑，哪些项目要让最终用户显示出来，会带来更好的操作感。在这里，我们将使用 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"标签= "Product ID"

                           AllowEdit = "False" IsTabStop = "False"宽度= "53" />

               <!--模板字段-->

               < igDP:TemplateField名称= "产品名称"标签= "产品名称"

                                   设置= "{StaticResourceFieldSetting}"

                                   DisplayTemplate = "{StaticResource FieldDisplayTemplate}"

                                   EditTemplate = "{StaticResource FieldEditorTemplate}" />

               ...

               <!--模板字段-->

               < igDP:TemplateField名称= "UnitsInStock"标签= "InStock"宽度= "80"

                                   设置= "{StaticResourceFieldSetting}"

                                   DisplayTemplate = "{StaticResource FieldDisplayTemplate}"

                                   EditTemplate = "{StaticResource FieldEditorTemplate}" />

               <!--模板字段-->

               < igDP:TemplateField名称= "UnitsOnOrder"标签= "UnitsOnOrder"宽度= "80"

                                   设置= "{StaticResourceFieldSetting}"

                                   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 指定了一种不同于默认背景色的颜色，以便确定启用哪一种。

<窗口.资源>

   ...

   <!--显示控件-->

   < DataTemplate x:Key = "FieldDisplayTemplate" >

       < TextBox Text = "{igEditors:TemplateEditorValueBinding}" />

   </数据模板> _ _

   <!-- 用于编辑的编辑器 -->

   < DataTemplate x:Key = "FieldEditorTemplate" >

       < TextBox Text = "{igEditors:TemplateEditorValueBinding}" Background = "#FFF2A5A5" />

   </数据模板> _ _

< /Window.Resources >

执行结果

“产品名称”是焦点在可乐电池上的状态。您可以看到 EditTemplate 显示的背景颜色与其他 TextBox 不同。