Embedding a xamEditor in a Field

Before You Begin

The xamDataPresenter™, xamDataGrid™, and xamDataCarousel™ controls embed a default ValueEditor derived control in a field based on a field’s data type. However, you can change the xamEditor control that xamDataPresenter embeds in a field by setting the EditorType property of the FieldSettings object. To set properties on an embedded editor control, you have to create a Style that targets the editor control and then assign the Style to the EditorStyle property of the FieldSettings object. For more information on default xamEditor controls and data types, see About xamDataPresenter and xamEditors.

What You Will Accomplish

You will embed xamCurrencyEditor™ to edit the salary field in xamDataGrid’s built-in sample data. You will also set the NullText property of the embedded xamCurrencyEditor control using a Style.

Note	Note Even though the example code in this topic is for the xamCurrencyEditor control, you can still apply the basic ideas presented in this topic to embed any other xamEditor control.

Follow these Steps

Add the following three XML namespace declarations and using/Imports directives in your code-behind so you don’t need to type out a member’s fully qualified name.

In XAML:

xmlns:igDP="http://infragistics.com/DataPresenter"
xmlns:igEditors="http://infragistics.com/Editors"
xmlns:sys="clr-namespace:System;assembly=mscorlib"

In Visual Basic:

Imports Infragistics.Windows.Editors
Imports Infragistics.Windows.DataPresenter

In C#:

using Infragistics.Windows.Editors;
using Infragistics.Windows.DataPresenter;

Add tags for the Window’s local resource dictionary. Create a Style that targets the xamCurrencyEditor control in the Window’s local resource dictionary. Add a Setter to the Style to set the NullText property of the xamCurrencyEditor control.

In XAML:
```
<Window.Resources>
    <Style
        x:Key="currencyEditorStyle"
        TargetType="{x:Type igEditors:XamCurrencyEditor}">
        <Setter Property="NullText" Value="No Salary" />
    </Style>
</Window.Resources>
```

Add a xamDataGrid, xamDataCarousel, or xamDataPresenter control to a layout panel in your Window.

Name the controls so you can reference it in the code-behind.
Set the BindToSampleData property to True.
Attach an event handler to the FieldLayoutInitialized event if you are going to use the code-behind.

In XAML:

<!--XAML for xamDataGrid-->
<igDP:XamDataGrid
    Name="xamDataGrid1"
    BindToSampleData="True"
    FieldLayoutInitialized="xamData_FieldLayoutInitialized">
    <!--TODO: Add FieldLayouts here-->
</igDP:XamDataGrid>
<!--XAML for xamDataCarousel-->
<igDP:XamDataCarousel
    Name="xamDataCarousel1"
    BindToSampleData="True"
    FieldLayoutInitialized="xamData_FieldLayoutInitialized">
    <!--TODO: Add FieldLayouts here-->
</igDP:XamDataCarousel>
<!--XAML for xamDataPresenter-->
<igDP:XamDataPresenter
    Name="xamDataPresenter1"
    BindToSampleData="True"
    FieldLayoutInitialized="xamData_FieldLayoutInitialized">
    <!--TODO: Add FieldLayouts here-->
</igDP:XamDataPresenter>

Add a FieldLayout object to the controls and then a Field object to field layout.

You can also add fields to the field layout for the remaining three fields, name, email, and department. Since we did not turn off the auto-generate fields feature, xamDataGrid will automatically generate the remaining three fields.

In XAML:

<!--XAML for xamDataGrid-->
<igDP:XamDataGrid.FieldLayouts>
    <igDP:FieldLayout>
        <!--Adding Fields here-->
        <igDP:FieldLayout.Fields>
            <igDP:Field Name="salary" Label="Salary">
                <!--TODO: Add FieldSettings here-->
            </igDP:Field>
        </igDP:FieldLayout.Fields>
    </igDP:FieldLayout>
</igDP:XamDataGrid.FieldLayouts>
<!--XAML for xamDataCarousel-->
<igDP:XamDataCarousel.FieldLayouts>
    <igDP:FieldLayout>
        <!--Adding Fields here-->
        <igDP:FieldLayout.Fields>
            <igDP:Field Name="salary" Label="Salary">
               <!--TODO: Add FieldSettings here-->
            </igDP:Field>
        </igDP:FieldLayout.Fields>
    </igDP:FieldLayout>
</igDP:XamDataCarousel.FieldLayouts>
<!--XAML for xamDataPresenter-->
<igDP:XamDataPresenter.FieldLayouts>
    <igDP:FieldLayout>
        <!--Adding Fields here-->
        <igDP:FieldLayout.Fields>
            <igDP:Field Name="salary" Label="Salary">
                <!--TODO: Add FieldSettings here-->
            </igDP:Field>
        </igDP:FieldLayout.Fields>
    </igDP:FieldLayout>
</igDP:XamDataPresenter.FieldLayouts>

In Visual Basic:

Private Sub xamData_FieldLayoutInitialized(ByVal sender As Object, ByVal e As Infragistics.Windows.DataPresenter.Events.FieldLayoutInitializedEventArgs)
    'TODO: Add field layout related code here
    e.FieldLayout.Fields("salary").Settings.EditorType = _
        GetType(XamCurrencyEditor)
    Dim _style1 As Style =
        DirectCast(Me.TryFindResource("currencyEditorStyle"), Style)
End Sub

In C#:

private void xamData_FieldLayoutInitialized(object sender, Infragistics.Windows.DataPresenter.Events.FieldLayoutInitializedEventArgs e)
{
    //TODO: Add field layout related code here
    e.FieldLayout.Fields["salary"].Settings.EditorType =
        typeof(XamCurrencyEditor);
    Style _style1 =
        (Style)this.TryFindResource("currencyEditorStyle");
}

Set the EditorStyle property of the Settings property on the salary field. Set the EditAsType property of the Settings property on the salary field.

Since the built-in sample data is XML data, all data types for the data bound fields are strings. In order to edit these string values as decimal values using the xamCurrencyEditor control, you have to set the EditAsType property to decimal. However, if the data type of a data bound field in your field layout matches the data type that you want the editor to edit, you can skip this step.

In XAML:

<igDP:FieldLayout.Fields>
    <igDP:Field Name="salary" Label="Salary">
        <!--TODO: Add FieldSettings here-->
        <igDP:Field.Settings>
            <igDP:FieldSettings
                EditorType="{x:Type igEditors:XamCurrencyEditor}"
                EditorStyle="{StaticResource currencyEditorStyle}"
                EditAsType="{x:Type sys:Decimal}" />
        </igDP:Field.Settings>
    </igDP:Field>
</igDP:FieldLayout.Fields>

In Visual Basic:

e.FieldLayout.Fields("salary").Settings.EditorStyle = _style1
e.FieldLayout.Fields("salary").Settings.EditAsType = GetType(Decimal)

In C#:

e.FieldLayout.Fields["salary"].Settings.EditorStyle = _style1;
e.FieldLayout.Fields["salary"].Settings.EditAsType = typeof(decimal);

Run the project.

The xamDataPresenter control is using xamCurrencyEditor to edit the salary field. If you delete a value in the salary field, the xamCurrencyEditor displays the null text that you set in the Style.

WPF | Help Topics

Embedding a xamEditor in a Field

Before You Begin

What You Will Accomplish

Follow these Steps