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

240 瀏覽人次

2023-04-19 更新

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