articles

Home / DeveloperSection / Articles / Combo Box control in WPF

Combo Box control in WPF

Anonymous User15214 23-Mar-2011

In WPF a Combo Box control provides a facility to select items from a list. It works similar to list box control only expect that in list box control we can select multiple items while in combo box control we can select only one item. In this demonstration I will show you that how we can use combo box control in WPF as well as I will tell you that how can we add checkbox control in combo box.

Some Common Properties Related With Combo Box Control
  •  Name—Name property is used to provide a unique identifier to your combo box control.
  •  VerticalAlignment—VerticalAlignment property is used to set vertical alignment of your controls. Possible values are Center, Top, and Bottom etc.
  • HorizontalAlignment—HorizontalAlignment property is used to set horizontal alignment of your controls. Possible values are Left, Right, and Center etc.
  •  Width—Width property is used to set width of your combo box control.
  •  Height—Height property is used to set height of your combo box control.
  •  IsEditable—IsEditable property is used to set editable property of combo box control. Possible values are True and False. When the editable property is used to set true then user can enter new value and when false user cannot enter any value.
A code snipped which create a combo box control
<ComboBox x:Name="cmbSelectCity" VerticalAlignment="Center" Width="200" Height="30" Margin="0,0,0,70" HorizontalAlignment="Center" IsEditable="False">
            <ComboBoxItem Content="Bostan" IsSelected="True" />
            <ComboBoxItem Content="New Jearcy" />
            <ComboBoxItem Content="Alaska" />
            <ComboBoxItem Content="California" />
            <ComboBoxItem Content="Arizona" />
            <ComboBoxItem Content="Colorado" />
            <ComboBoxItem Content="Florida" />
</ComboBox>
Output of the above code snipped is as follows

Combo Box control in WPF

Adding and deleting items in combo box at runtime

Now am going to show you how to add and delete items in a combo box control at runtime. To perform this requirement I will make some modification in the UI of out sample such as I can add one textbox control and two button name Add City and Delete City. When user enter name of City in text box control and then click Add City button then the city is added in combo box control and when user select any city in combo box control and then click delete button then city removed and message successful show to the user.

Code snippet to create a UI of demonstration

<Grid>
        <ComboBox x:Name="cmbSelectCity" VerticalAlignment="Center" Width="200" Height="30" Margin="0,0,0,70" HorizontalAlignment="Center" IsEditable="False" />
        <Label x:Name="lblCityName" VerticalAlignment="Center" HorizontalAlignment="Left" Content="Enter City Name" Margin="100,30,0,0" />
        <TextBox x:Name="txtCityName" VerticalAlignment="Center" HorizontalAlignment="Right" Width="177" Margin="0,155,109,131" Height="25" />
        <Button x:Name="btnAddCity" VerticalAlignment="Center" HorizontalAlignment="Center" Width="130" Height="30" Content="Add City" Margin="112,201,261,80" />
        <Button x:Name="btnDeleteCity" VerticalAlignment="Center" HorizontalAlignment="Center" Width="130" Height="30" Content="Delete City" Margin="248,201,125,80" />
</Grid>

Output of the above code snippet is as follows

Combo Box control in WPF

Code snippet which perform addition and deletion of the city in combo box
/// <summary>
        /// This event is called when user clicks on Add City button.
        /// In this event am writing a code snippet which add city
        /// in the combo box control.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
 
        private void btnAddCity_Click(object sender, RoutedEventArgs e)
        {
            cmbSelectCity.Items.Add(txtCityName.Text);
            MessageBox.Show("City Added Successful.");
        }
 
        /// <summary>
        /// This event is called when user clicks on Delete City button.
        /// In thic event am writing a code snippet which remove city in
        /// yhe combo box control.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
 
        private void btnDeleteCity_Click(object sender, RoutedEventArgs e)
        {
            if (cmbSelectCity.SelectedItem != null) // If any item in combo box is selected.
            {
                //Here we find the index of selected item which needs to be deleted by
                //calling indexOf method.
                cmbSelectCity.Items.RemoveAt(cmbSelectCity.Items.IndexOf(cmbSelectCity.SelectedItem));
                MessageBox.Show("City Deleted Successful.");
            }
        }
Output of the above code snippet is as follows

Combo Box control in WPF

Adding Check Box control in Combo Box     
<Grid>
        <ComboBox x:Name="cmbSelectCity" VerticalAlignment="Center" Width="200" Height="30" Margin="0,0,0,70" HorizontalAlignment="Center" IsEditable="False" >
            <ComboBoxItem>
                <CheckBox x:Name="chkBostan" Content="Bostan" />
            </ComboBoxItem>
            <ComboBoxItem>
                <CheckBox x:Name="chkAlaska" Content="Alaska" />
            </ComboBoxItem>
            <ComboBoxItem>
                <CheckBox x:Name="chkArizona" Content="Arizona" />
            </ComboBoxItem>
            <ComboBoxItem>
                <CheckBox x:Name="chkFlorida" Content="Florida" />
            </ComboBoxItem>
            <ComboBoxItem>
                <CheckBox x:Name="chkCalifornia" Content="California" />
            </ComboBoxItem>
            <ComboBoxItem>
                <CheckBox x:Name="chkClorado" Content="Clorado" />
            </ComboBoxItem>
        </ComboBox>
</Grid>

Output of the above code snippet is as follows

Combo Box control in WPF

 Adding combo box control dynamically

/// <summary>
        /// In this code snippet am showing you how to add combo box dynamically
        /// to the window control.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            ComboBox cmb = new ComboBox();
            cmb.Name = "comboBox1";
            cmb.Width = 200;
            cmb.Height = 30;
            cmb.IsEditable = true;
            cmb.Items.Add("Bostan");
            cmb.Items.Add("California");
            cmb.Items.Add("Los Anjelis");
            this.Content = cmb;
        }

 

Output of the above code

Combo Box control in WPF

 


Updated 11-Dec-2019
I am a content writter !

Leave Comment

Comments

Liked By