ListBox Control in WPF - Part 11

We can use the ListBox control in case when we have multiple options and we have to choose one from them. 

To create a simple ListBox Control we can use the following syntax.

<Window x:Class="WpfTutorials.ListBoxExample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListBoxExample" Height="300" Width="300">
    <Grid>
        <ListBox Height="100" Width="200">
            <ListBoxItem>
                List box item 1
            </ListBoxItem>
            <ListBoxItem>
                List box item 2
            </ListBoxItem>
            <ListBoxItem>
                List box item 3
            </ListBoxItem>
            <ListBoxItem>
                List box item 4
            </ListBoxItem>
            <ListBoxItem>
                List box item 5
            </ListBoxItem>
            <ListBoxItem>
                List box item 6
            </ListBoxItem>
        </ListBox>
    </Grid>

</Window>

The output should be

Custom Content in ComboBox :

Apart from the above, WPF provides us a way through which we can create a very rich ListBox control. The ListBox is a Content Control so we can make our own design interface inside ListBox.

The following example creates a ListBox which has ColorNames and ColorBox next to the ColorNames.

<Window x:Class="WpfTutorials.ListBoxExample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ListBoxExample" Height="300" Width="300">
    <Grid>
        <ListBox Height="100" Width="200">
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Pink" Height="20" Width="20" Margin="0,0,10,0"></Rectangle>
                    <TextBlock>Pink</TextBlock>
                </StackPanel>

            </ListBoxItem>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Red" Height="20" Width="20" Margin="0,0,10,0"></Rectangle>
                    <TextBlock>Red</TextBlock>
                </StackPanel>
                
            </ListBoxItem>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Green" Height="20" Width="20" Margin="0,0,10,0"></Rectangle>
                    <TextBlock>Green</TextBlock>
                </StackPanel>

            </ListBoxItem>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Rectangle Fill="Yellow" Height="20" Width="20" Margin="0,0,10,0"></Rectangle>
                    <TextBlock>Yellow</TextBlock>
                </StackPanel>

            </ListBoxItem>
        </ListBox>
    </Grid>

</Window>

The above code will produce the following output.

Let's look this in action