ListBox control in WPF using VB.NET

ListBox control

The WPF ListBox control Contains a list of selectable items.

The ListBox tag represents a WPF ListBox control in XAML.

<ListBox></ListBox>

The Width and Height attributes represent the width and the height of a ListBox.  The Control can be uniquely identified by x:Name attribute represents the name of the control.

The following XAML code sets the name, height and width  of ListBox control.

<ListBox Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1" VerticalAlignment="Top" Width="120" />

Properties - ListBox control has the following properties.

Figure 1.

Items - Items collection property is used to add the items in the ListBox control.

Foreground - The Foreground attributes of ListBoxItem represents the foreground colors of the item.

Background -  The Background attributes of ListBoxItem represents the background colors of the item.

Adding ListBox Items

To add ListBox items in the ListBox using items property of the ListBox control.

Figure 2.

XAML code

<ListBox Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1" VerticalAlignment="Top" Width="120">

            <ListBoxItem Content="Cricket" />

            <ListBoxItem Content="Football" />

            <ListBoxItem Content="Hockey" />

            <ListBoxItem Content="Tenis" />

        </ListBox>

Formatting ListBox Items

Select every items in the ListBox and set the foreground and background property.

Figure 3.

XAML code

<ListBox Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1" VerticalAlignment="Top" Width="120">

            <ListBoxItem Content="Cricket" Background="SpringGreen" Foreground="Blue" />

            <ListBoxItem Content="Football" Background="LightPink" Foreground="Blue" />

            <ListBoxItem Content="Hockey" Foreground="Green" Background="Yellow" />

            <ListBoxItem Content="Tenis" Background="Red" Foreground="BlueViolet" />

        </ListBox>

The form looks like this.

Figure 4. 

Displaying Images in a ListBox

Taking an Image control on the form and apply source property of image control.

Figure 5.

The form looks like this.

Figure 6.

XAML code

<ListBox Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1" VerticalAlignment="Top" Width="237">

            <ListBoxItem Content="Cricket" Background="SpringGreen" Foreground="Blue" />

            <ListBoxItem Content="Football" Background="LightPink" Foreground="Blue" Name="ListBoxItem1" />

            <ListBoxItem Content="Hockey" Foreground="Green" Background="Yellow" />

             <ListBoxItem Content="Tenis" Background="Red" Foreground="BlueViolet" />

        </ListBox>

        <Image Height="18" HorizontalAlignment="Left" Margin="12,12,0,0" Name="Image1" Stretch="Fill" VerticalAlignment="Top" Width="39" Source="/WpfApplication7;component/Images/flowers-image.jpg" />

        <Image Height="15" HorizontalAlignment="Left" Margin="12,28,0,0" Name="Image2" Stretch="Fill" VerticalAlignment="Top" Width="41" Source="/WpfApplication7;component/Images/imagec26.jpg" />

For example

Taking a ListBox control and TextBox control on the form.

The form looks like this.

Figure 7.

XAML code

<TextBox Name="TextBox1" Height="30" Margin="190,194,129,87"></TextBox>

        <ListBox Name="lb" Height="55" SelectionChanged="PrintText" SelectionMode="Single" Margin="190,106,129,150">

            <ListBoxItem>Item 1</ListBoxItem>

            <ListBoxItem Name="ListBoxItem1">Item 2</ListBoxItem>

            <ListBoxItem>Item 3</ListBoxItem>

            <ListBoxItem>Item 4</ListBoxItem>

            <ListBoxItem>Item 5</ListBoxItem>

            <ListBoxItem>Item 6</ListBoxItem>

            <ListBoxItem>Item 7</ListBoxItem>

            <ListBoxItem>Item 8</ListBoxItem>

            <ListBoxItem>Item 9</ListBoxItem>

            <ListBoxItem>Item 10</ListBoxItem>

        </ListBox>

Now select ListBox control and press F4 for event and choose SelectionChanged event.

Figure 8.

Now double click on the selected event and add the following code.

VB.NET code

Private Sub PrintText(ByVal sender As System.Object, ByVal e As System.Windows.Controls.SelectionChangedEventArgs)

        Dim lbsender As ListBox

        Dim li As ListBoxItem

        lbsender = CType(sender, ListBox)

        li = CType(lbsender.SelectedItem, ListBoxItem)

        TextBox1.Text = "   You selected " & li.Content.ToString & "."

    End Sub

Now run the application and test it.

Figure 9.