How to: Customize the Appearance of an In-place Editor

  • 2 minutes to read

The following example shows how to customize the in-place combo box editor's appearance when its text field is not editable. In this example, in-place combo boxes are used to edit the 'Access Card Color' column field values. The appearance of the editors' items on the drop-down list is specified via the ItemTemplate property. As for the edit box, you can either apply the same template by setting the ApplyItemTemplateToSelectedItem property to true or specify another template using the EditNonEditableTemplate property (in this example, we used the second approach).

<Window x:Class="TextEdit_EditNonEditableTemplate.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="Access Cards"
        Width="300"
        Height="200">

    <dxg:GridControl Name="gridControl1">
        <dxg:GridControl.Columns>
            <dxg:GridColumn FieldName="Name" />
            <dxg:GridColumn FieldName="CardColor" Header="Access Card Color">
                <dxg:GridColumn.EditSettings>
                    <dxe:ComboBoxEditSettings IsTextEditable="False">
                        <dxe:ComboBoxEditSettings.ItemTemplate>
                            <DataTemplate>
                                <Border Background="Transparent">
                                    <StackPanel Orientation="Horizontal">
                                        <Rectangle Width="10"
                                                   Height="10"
                                                   Margin="6,0,6,0"
                                                   Fill="{Binding TargetNullValue=Transparent}"
                                                   RadiusX="2"
                                                   RadiusY="2" />
                                        <TextBlock Text="{Binding}" />
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </dxe:ComboBoxEditSettings.ItemTemplate>
                        <dxe:ComboBoxEditSettings.EditNonEditableTemplate>
                            <ControlTemplate>
                                <Rectangle Margin="2"
                                           Fill="{Binding EditValue, RelativeSource={RelativeSource TemplatedParent}}"
                                           RadiusX="2"
                                           RadiusY="2" />
                            </ControlTemplate>
                        </dxe:ComboBoxEditSettings.EditNonEditableTemplate>
                        <dxe:ComboBoxEditSettings.Items>
                            <sys:String>Red</sys:String>
                            <sys:String>Green</sys:String>
                            <sys:String>Blue</sys:String>
                        </dxe:ComboBoxEditSettings.Items>
                    </dxe:ComboBoxEditSettings>
                </dxg:GridColumn.EditSettings>
            </dxg:GridColumn>
        </dxg:GridControl.Columns>
        <dxg:GridControl.View>
            <dxg:TableView AutoWidth="True" />
        </dxg:GridControl.View>
    </dxg:GridControl>

</Window>