Home  separator  Controls  separator  ListBox
Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  


WPF ListBox Control

Introduction

The ListBox control displays a list of items. The user can select one or multiple items depending on the selection mode. The typical usage of a listbox in WPF is to bind its items to a list of business objects and display them by applying a data template.


 
<ListBox Margin="20">
    <ListBoxItem>New York</ListBoxItem>
    <ListBoxItem>Los Angeles</ListBoxItem>
    <ListBoxItem>Paris</ListBoxItem>
    <ListBoxItem>Zurich</ListBoxItem>
</ListBox>
 
 

How to define a Trigger for IsSelected in the DataTemplate

If you want to change the appearance of a ListBoxItem when it is selected, you have to bind the IsSelected property of the ListBoxItem. But this is a bit tricky, you have to use a relative source with FindAcestor to navigate up the visual tree until you reach the ListBoxItem.

 
<DataTemplate x:Key="myDataTemplate">
    <Border x:Name="border" Height="50">
        <TextBlock Text="{Binding Text}" />
    </Border>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding RelativeSource=
            {RelativeSource Mode=FindAncestor, AncestorType=
                {x:Type ListBoxItem}},Path=IsSelected}" Value="True">
            <Setter TargetName="border" Property="Height" Value="100"/>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>
 
 

More articles about the ListBox

Apply a DataTemplate
Strech an Item
Selected Item Background
Layout of Items




Last modified: 2011-05-23 08:36:27
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Prasad
Commented on 28.October 2009
hi , i am very new to WPF. i want to bind the data which is retrieved from the database onto listbox. example, there is customer table in database and i want to retrive the details of all the customers and want to display onto liztbox.
and also want to add the images to each customer.
plese help me if you could.
Thank you in advance....

yuriy-k
Commented on 28.October 2009
Looks like it doesn't work (VS2008).

Errors:

Step into: Stepping over method without symbols 'WpfDataTemplate.App.App'
System.Windows.Data Error: 25 : ItemTemplate and ItemTemplateSelector are not valid for item.; Type='ListBoxItem'
System.Windows.Data Error: 25 : ItemTemplate and ItemTemplateSelector are not valid for item.; Type='ListBoxItem'
System.Windows.Data Error: 25 : ItemTemplate and ItemTemplateSelector are not valid for item.; Type='ListBoxItem'
System.Windows.Data Error: 25 : ItemTemplate and ItemTemplateSelector are not valid for item.; Type='ListBoxItem'


-------------------------------- code :

<Window
x:Class="WpfDataTemplate.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">

<Window.Resources>
<DataTemplate x:Key="myDataTemplate" >
<Border x:Name="border" Height="50">
<TextBlock Text="{Binding Text}" />
</Border>
<DataTemplate.Triggers>
<DataTrigger
Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}},Path=IsSelected}" Value="True">
<Setter TargetName="border" Property="Height" Value="100"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>

<ListBox
Margin="20"
ItemTemplate="{StaticResource myDataTemplate}"
>

<ListBoxItem>New York</ListBoxItem>
<ListBoxItem>Los Angeles</ListBoxItem>
<ListBoxItem>Paris</ListBoxItem>
<ListBoxItem>Zürich</ListBoxItem>
</ListBox>
</Window>


monika Bisht
Commented on 27.November 2009
hi.. first af all i want to appreciate your work. very nice. its dificult to get any tutorial on simple languges. that u soo much .
but i want to suggest smthing if u cant specify all the term y r using like what does hey do.. so that would be very help full to us for more understanding and clear picture. e.g( <DataTrigger Binding="{Binding RelativeSource=
{RelativeSource Mode=FindAncestor, AncestorType=
{x:Type ListBoxItem}},Path=IsSelected}" Value="True">
<Setter TargetName="border" Property="Height" Value="100"/>
</DataTrigger>


)
specify all the teram u have used in this. just a expamle.. i mean in breif need more discription.
HC
Commented on 5.January 2010
Error 1 The Key attribute can only be used on a tag contained in a Dictionary (such as a ResourceDictionary). Line 13 Position 23. C:\Codes\C#08\WPFTest\WPFTest\WPFTest\Lists.xaml 13 23 WPFTest
HC
Commented on 5.January 2010
problem occurs at line <DataTemplate x:Key="myDataTemplate">
Witschi
Commented on 14.January 2010
Hi, very nice tutorials. But I have some troubles with this one. I'm trying to do this :

<Window x:Class="WpfDataTemplate.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">

<Window.Resources>
<DataTemplate x:Key="myDataTemplate" >
<Border x:Name="border" Height="50">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Text}" />
<TextBlock Text="Kikoo" />
</StackPanel>
</Border>
</DataTemplate>
</Window.Resources>

<ListBox Margin="20" ItemTemplate="{StaticResource myDataTemplate}" >
<ListBoxItem>New York</ListBoxItem>
<ListBoxItem>Los Angeles</ListBoxItem>
</ListBox>
</Window>

But the result of my items isn't New york Kikoo.
But just New york, it semms like he doesn't look myDataTemplate
arrayss
Commented on 13.July 2010
how to bind a database in listbox in wpf application
pls give example
rajasekar
Commented on 19.July 2010


Hello.

In my XAML file, I have a ListBox declared like this :

<ListBox x:Name="lstDeck" Height="280" ItemsSource="{Binding Path=Deck}" >
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem Content="{Binding}" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

In my view model, Deck is an ObservableCollection, so that binding directly displays the content of my collection.

But when I have several value that hold the same value (for example "10" six times), the selection in the ListBox has a weird behaviour : it select 2-3 elements instead of the only the one on which I clicked.

Moreover, when I click to another listBoxItem, it doesn't unfocus the previous selected one.

Then it is impossible to see which item is actually selected, and impossible to get the SelectedIndex value.

Has someone an idea?

Josh
Commented on 29.July 2010
@rajasekar:

The item template is used to create visuals (controls) for each data item in the list box. Your data template contains a ListBoxItem, which is going to be wrapped by the inside of ANOTHER ListBoxItem because of the item container generation process.

Solution: Don't put a ListBoxItem inside of a DataTemplate. It just doesn't work well. Trying changing this to a ContentControl for the same results.
Doudy
Commented on 13.September 2010
Hi, thnx 4 this Tutorial, but with this one gave error when I try to define Trigger to DataTemplate:

Error 1 The Key attribute can only be used on a tag contained in a Dictionary (such as a ResourceDictionary). Line 11 Position 27. D:\Visual Studio\Projects\WPF\WPF IN C#\ListBoxInWPF\ListBoxInWPF\MainWindow.xaml 11 27 ListBoxInWPF
I hope you
Aaron
Commented on 13.December 2010
Great and useful Tutorial.... A superb way to tweak the trigger, which is not given in much other tutorial websites but really comes very handy. Solved a lot of my problems...Thanks
gffd
Commented on 24.February 2011
cxvxvcx
nadidbadid
Commented on 17.September 2011
You are very handsome :)
The header image induces that you are standing at the horizon of success
Nice design ;)

Name
E-Mail (optional)
Comment