Home > DeveloperSection > Beginner > ListBox control in WPF

ListBox control in WPF


WPF WPF 
Ratings:
0 Comment(s)
 5529  View(s)
Rate this:

ListBox control in WPF

In WPF ListBox control provides you a functionality to select values from available list. ListBox control provides same functionality as well as combo box control except that in list box control we can select multiple items depending upon requirements while we cannot select multiple items in combo box control. Another difference between list box and combo box control is that combo box control provides a functionality to enter new content but list box control does not provide this functionality.
In this demonstration am showing you how to use list box control in WPF.

Some Common properties related with ListBox control

Ø  Name—Name property provides a unique identifier to your list box control.

Ø  FlowDirection—FlowDirection property is used to set direction of text in list box control. It has two values LeftToRight or RightToLeft.

Ø  Margin—Margin property is used to set alignment of your list box control.

Ø  SelectionMode—SelectionMode property is used to set selection of values in list box control. It has three values. Single, Multiple and Extended. When SelectionMode property of list box control is set to single the user can select only one value from list while when the SelectionMode property of list box control is set to Multiple or Extended then user can select multiple values from list box control. The default value of SelectionMode property is one.

Ø  SelectedItem—SelectedItem property returns the selected item of list box control.

Ø  SelectedValue—SelectedValue properties returns the value of the selectedItem in list box control.

The following code snippets represent use of listbox control

<ListBox Height="72" HorizontalAlignment="Left" Margin="151,72,0,0" Name="listBox1"

VerticalAlignment="Top" Width="222" FlowDirection="LeftToRight">

            <ListBoxItem Content="India" />

            <ListBoxItem Content="Australia" />

            <ListBoxItem Content="France" />

            <ListBoxItem Content="Briten" />

            <ListBoxItem Content="Japan" />

            <ListBoxItem Content="China" />

            <ListBoxItem Content="Koria" />

</ListBox>

 

Output of the above code is as follows

ListBox control in WPF

Adding values in ListBox control dynamically

Following are the code snippet to create the user interface.
<Grid Width="492">

        <ListBox Height="116" HorizontalAlignment="Left" Margin="150,22,0,0" Name="listBox1" VerticalAlignment="Top" Width="222" FlowDirection="LeftToRight" />

        <Label Content="Enter Country Name" Height="28" HorizontalAlignment="Left" Margin="38,154,0,0" x:Name="lblCountryName" VerticalAlignment="Top" Width="129" />

        <TextBox Height="23" HorizontalAlignment="Left" Margin="212,156,0,0" x:Name="txtCountryName" VerticalAlignment="Top" Width="248" />

        <Button Content="Add Country" Height="23" Margin="83,199,66,0" x:Name="btnAddCountry" VerticalAlignment="Top" Click="btnAddCountry_Click" />

        <Button Content="Remove Country" Height="23" Margin="83,248,66,0" x:Name="btnRemoveCountry" VerticalAlignment="Top" Click="btnRemoveCountry_Click" />

</Grid>

Code for adding and removing country

/// <summary>

        /// This event is raised when user click on Add Country button.

        /// This event is used to add country in list box control.

        /// The country name is provided in list box control.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

 

        private void btnAddCountry_Click(object sender, RoutedEventArgs e)

        {

            if (txtCountryName.Text.Trim().Length != 0)

            {

                listBox1.Items.Add(txtCountryName.Text);

                txtCountryName.Clear();

            }

        }

 

        /// <summary>

        /// This event is raised when user click on Renove country button.

        /// This event is used to remove country in list box control.

        /// When user select any values in listbox and click on remove country button

        /// then that value is removed from list box control.

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

 

        private void btnRemoveCountry_Click(object sender, RoutedEventArgs e)

        {

            if (listBox1.SelectedItem != null)

            {

                listBox1.Items.RemoveAt(listBox1.Items.IndexOf(listBox1.SelectedItem));

            }

        }

The output of above code snippet is as follows

ListBox control in WPF

 


Don't want to miss updates? Please click the below button!

Follow MindStick