Current filter:
          You should refresh the page.
          Not Logged In

          How to customize the appearance of the in-place combo box editor

          0

          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 in the drop-down list is specified via the editors' ItemTemplate property.
          The combo boxes' text fields are not editable, as they display the selected color when the editors are active. The text fields' appearance is specified via the EditNonEditableTemplate property.

          Leave a comment
          You must  log in  or  register  to leave comments
          Select file
          • Window1.xaml
          • Window1.xaml.cs
          Select language
          • C#
          • VB.NET
          Select version
          • v2010 vol 1.4 - v2012 vol 1.2
          • v2009 vol 3.2 - v2009 vol 3.7
          <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" Height="200" Width="300">
    <Grid>
        <dxg:GridControl Loaded="gridControl1_Loaded" Name="gridControl1" Grid.Column="0" Grid.Row="0">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="Name" />
                <dxg:GridColumn FieldName="CardColor" Header="Access Card Color">
                    <dxg:GridColumn.EditTemplate>
                        <ControlTemplate>
                            <dxe:ComboBoxEdit ApplyItemTemplateToSelectedItem="True" 
                                              EditValue="{Binding Path=EditValue, RelativeSource={RelativeSource TemplatedParent}}" 
                                              SelectedItem="{Binding Path=EditValue, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" 
                                              IsTextEditable="False" Grid.Row="1" Grid.Column="1">
                                <dxe:ComboBoxEdit.ItemTemplate>
                                    <DataTemplate>
                                        <Border Background="Transparent">
                                            <StackPanel Orientation="Horizontal">
                                                <Rectangle Fill="{Binding}" Margin="6,0,6,0" 
                                                           RadiusX="2" RadiusY="2" 
                                                           Width="10" Height="10" />
                                                <TextBlock Text="{Binding}" />
                                            </StackPanel>
                                        </Border>
                                    </DataTemplate>
                                </dxe:ComboBoxEdit.ItemTemplate>
                                <dxe:ComboBoxEdit.EditNonEditableTemplate>
                                    <ControlTemplate>
                                        <Rectangle Fill="{Binding Path=SelectedItem}" />
                                    </ControlTemplate>
                                </dxe:ComboBoxEdit.EditNonEditableTemplate>
                                <dxe:ComboBoxEdit.Items>
                                    <sys:String>Red</sys:String>
                                    <sys:String>Green</sys:String>
                                    <sys:String>Blue</sys:String>
                                </dxe:ComboBoxEdit.Items>
                            </dxe:ComboBoxEdit>
                        </ControlTemplate>
                    </dxg:GridColumn.EditTemplate>
                </dxg:GridColumn>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView />
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>