ComboBox Control in WPF - Part 12

We can use the ComboBox control in case when we have multiple options and we have to choose one from them. Except the selected item other items inside ComboBox control becomes hidden. Due to this feature ComboBox takes less space than the listbox control.

To create a simple ComboBox we can use the following syntax.

<Window x:Class="WpfTutorials.ComboBoxExample"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="ComboBoxExample" Height="300" Width="300">

    <Grid>

        <ComboBox Height="30">

            <ComboBoxItem>Sample Item 1</ComboBoxItem>

            <ComboBoxItem>Sample Item 2</ComboBoxItem>

            <ComboBoxItem>Sample Item 3</ComboBoxItem>

        </ComboBox>

    </Grid>

</Window>

The above code will create a simple ComboBox control. Which is very straightforward.

Custom Content in ComboBox :

Apart from the above, WPF provides us a way through which we can create a very rich ComboBox control. The ComboBox is a Content Control so we can make our own design interface inside ComboBox.

The following example creates a ComboBox which has ColorNames and ColorBox next to the ColorNames.

<Window x:Class="WpfTutorials.ComboBoxExample"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="ComboBoxExample" Height="300" Width="300">

    <Grid>

        <ComboBox Height="30">

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Rectangle Fill="Red" Height="10" Width="10" />

                    <TextBlock Padding="10,0,0,0">Red</TextBlock>

                </StackPanel>

            </ComboBoxItem>

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Rectangle Fill="Green" Height="10" Width="10" />

                    <TextBlock Padding="10,0,0,0">Green</TextBlock>

                </StackPanel>

            </ComboBoxItem>

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Rectangle Fill="Blue" Height="10" Width="10" />

                    <TextBlock Padding="10,0,0,0">Blue</TextBlock>

                </StackPanel>

            </ComboBoxItem>

        </ComboBox>

    </Grid>

</Window>

 IsEditable Property :

IsEditable Property provides the facility to user to enter an option in ComboBox which is not present inside that. Suppose there is a list of cities in the ColorBox but there is no such City name inside that from where user belongs. In this case user can write his/her own city name. This functionality can be achieved by doing IsEditable Property set to True of ComboBox. Following code creates an editable ColorBox.

<Window x:Class="WpfTutorials.ComboBoxExample"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Title="ComboBoxExample" Height="300" Width="300">

    <Grid>

        <ComboBox Height="30" IsEditable="True">

            <ComboBoxItem>NewYork</ComboBoxItem>

            <ComboBoxItem>London</ComboBoxItem>

            <ComboBoxItem>New Castle</ComboBoxItem>

        </ComboBox>

    </Grid>

</Window>