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