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

• Jun 07, 2019
• 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).

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-customize-the-appearance-of-the-in-place-combo-box-editor-e1978.

Window1.xaml

<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>

Window1.xaml.cs

using System.Collections.Generic;
using System.Windows;

namespace TextEdit_EditNonEditableTemplate {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
            List<Employee> data = new List<Employee>();
            data.Add(new Employee { Name = "Steven", CardColor = "Red" });
            data.Add(new Employee { Name = "Mary", CardColor = "Green" });
            data.Add(new Employee { Name = "John", CardColor = "Blue" });
            data.Add(new Employee { Name = "Claudia", CardColor = "Red" });
            gridControl1.ItemsSource = data;
        }
    }
    public class Employee {
        public string Name { get; set; }
        public string CardColor { get; set; }
    }
}

Application.xaml

<Application x:Class="TextEdit_EditNonEditableTemplate.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Window1.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

Window1.xaml.vb

Imports System.Collections.Generic
Imports System.Windows

Namespace TextEdit_EditNonEditableTemplate
    Partial Public Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
            Dim data As New List(Of Employee)()
            data.Add(New Employee With { _
                .Name = "Steven", _
                .CardColor = "Red" _
            })
            data.Add(New Employee With { _
                .Name = "Mary", _
                .CardColor = "Green" _
            })
            data.Add(New Employee With { _
                .Name = "John", _
                .CardColor = "Blue" _
            })
            data.Add(New Employee With { _
                .Name = "Claudia", _
                .CardColor = "Red" _
            })
            gridControl1.ItemsSource = data
        End Sub
    End Class
    Public Class Employee
        Public Property Name() As String
        Public Property CardColor() As String
    End Class
End Namespace