How to: Create an Image ComboBox

• Jun 07, 2019

The following example shows how to create an image combobox via templates.

View Example

Window1.xaml

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="ComboBoxEdit_CreatingImageComboBox.Window1"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="Creating an Image ComboBox"
        Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="100" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="22" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <dxe:ComboBoxEdit ApplyItemTemplateToSelectedItem="True" IsTextEditable="False"
                          Text="(None)" Grid.Row="1" Grid.Column="1" Padding="5,2,5,2">
            <dxe:ComboBoxEdit.ItemTemplate>
                <DataTemplate>
                    <Border Background="Transparent">
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Width="10" Height="10" Fill="{Binding}"
                                       RadiusX="2" RadiusY="2"
                                       Margin="6,0,6,0" />
                            <TextBlock Text="{Binding}" />
                        </StackPanel>
                    </Border>
                </DataTemplate>
            </dxe:ComboBoxEdit.ItemTemplate>
            <sys:String>Red</sys:String>
            <sys:String>Green</sys:String>
            <sys:String>Blue</sys:String>
        </dxe:ComboBoxEdit>
    </Grid>
</Window>

Application.xaml

<Application x:Class="ComboBoxEdit_CreatingImageComboBox.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>

Application.xaml.vb

Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Windows

Namespace ComboBoxEdit_CreatingImageComboBox
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application

    End Class
End Namespace

Window1.xaml.vb

Imports System.Windows

Namespace ComboBoxEdit_CreatingImageComboBox
    ''' <summary>
    ''' Interaction logic for Window1.xaml
    ''' </summary>
    Partial Public Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
End Namespace

Window1.xaml.cs

using System.Windows;

namespace ComboBoxEdit_CreatingImageComboBox {
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
}