WPF ComboBox

WPF ComboBox:

Combobox control is used to display items in the dropdown combobox. It is similar to ListBox control but only one item from the collection is visible at a time.

By default ComboBox is non editable .It only displays items but it can be made editable by setting IsEditable property to True

The element <comboBox> represents a comboBox control in the XAML
<comboBox></comboBox>
When we drag and drop a comboBox to the window this causes the visual studio to insert the comboBox element in the xaml file.

• Adding combo box in WPF window

<Window x:Class="ComboBoxDemo.MainWindow"

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

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

        Title="MainWindow" Height="350" Width="525">

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="Auto"></RowDefinition>

            <RowDefinition Height="*"></RowDefinition>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto"></ColumnDefinition>

            <ColumnDefinition Width="Auto"></ColumnDefinition>

            <ColumnDefinition Width="*"></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Label Name="CountryLabel" Content="Country" Grid.Row="0" Grid.Column="0" Height ="25" Margin="5"></Label>

        <ComboBox Name="CountryComboBox" Grid.Row="0" Grid.Column="1" Height="25" Width="100" Margin="5"></ComboBox>

    </Grid>

</Window>

• Adding items in the combo box 

<ComboBox Name="CountryComboBox" Grid.Row="0" Grid.Column="1" Height="25" Width="100" Margin="5">

     <ComboBoxItem Content="Austria"></ComboBoxItem>

     <ComboBoxItem Content="Belgium"></ComboBoxItem>

     <ComboBoxItem Content="China"></ComboBoxItem>

     <ComboBoxItem Content="Germany"></ComboBoxItem>

     <ComboBoxItem Content="India"></ComboBoxItem>

     <ComboBoxItem Content="Norway"></ComboBoxItem>

</ComboBox>

• Making a ComboBoxItem selected as default when loaded Eg: country Austria selected as default, do do that we use the property IsSelected="True" in the comboBoxItem

       <ComboBoxItem IsSelected="True" Content="Austria"></ComboBoxItem>

• Lets customize the combo box items by inserting the flag images along with the country name.

Eg:

        <ComboBox Name="CountryComboBox"  Grid.Row="0" Grid.Column="1" Height="25" Width="100" Margin="5">

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Image Source="Images/flag_of_Austria.gif"  Height="24" Width="24"></Image>

                    <TextBlock Text="Austria" ></TextBlock>

                </StackPanel>

            </ComboBoxItem>

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Image Source="Images/flag_of_Belgium.gif"  Height="24" Width="24"></Image>

                    <TextBlock Text="Belgium" ></TextBlock>

                </StackPanel>

            </ComboBoxItem>

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Image Source="Images/flag_of_China.gif"  Height="24" Width="24"></Image>

                    <TextBlock Text="China" ></TextBlock>

                </StackPanel>

            </ComboBoxItem>

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Image Source="Images/flag_of_Germany.gif"  Height="24" Width="24"></Image>

                    <TextBlock Text="Germany" ></TextBlock>

                </StackPanel>

            </ComboBoxItem>

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Image Source="Images/flag_of_India.gif"  Height="24" Width="24"></Image>

                    <TextBlock Text="India" ></TextBlock>

                </StackPanel>

            </ComboBoxItem>

            <ComboBoxItem>

                <StackPanel Orientation="Horizontal">

                    <Image Source="Images/flag_of_Norway.gif"  Height="24" Width="24"></Image>

                    <TextBlock Text="Norway" ></TextBlock>

                </StackPanel>

            </ComboBoxItem>

        </ComboBox>