Silverlight ListBox control in VB.NET

In this article we will learn how to use ListBox control in Silverlight 4.
  • 2010

In this article we will learn how to use ListBox control in Silverlight 4.

ListBox control

The Silverlight ListBox control provides all the functionality of a standard (web) ListBox.

The ListBox tag represents a Silverlight 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.

tb1.gif
 

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.

tb2.gif
 

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.


 

tb3.gif 

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.


 

tb4.gif 

Figure 4.

 

Displaying Images in a ListBox

 

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


 

tb5.gif 

Figure 5.

 

The form looks like this.


 

tb6.gif 

Figure 6.

 

XAML code

 

<ListBox Height="110" HorizontalAlignment="Left" Margin="10,10,0,0" Name="ListBox1"VerticalAlignment="Top" Width="255" Background="SpringGreen">

            <ListBoxItem Content="        Cricket" Foreground="Blue">

                <ListBoxItem.Background>

                    <ImageBrush />

                </ListBoxItem.Background>

            </ListBoxItem>

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

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

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

        </ListBox>

        <Image Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="Image1"Stretch="Fill" VerticalAlignment="Top" Width="26"Source="/SilverlightApplication45;component/Images/imagec26.jpg" />

        <Grid.Background>

            <ImageBrush />

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.