Infragistics|Ultimate UI WPF|在 XamDataGrid 單元格(模板字段)中嵌入任意控件

infragistics log


在考慮網格中的編輯功能時,將哪些項目要編輯,哪些項目要讓最終用戶顯示出來,會帶來更好的操作感。在這裡,我們將使用 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 不同。




延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言