Working with WP7 ListBox SelectedItem
published on: 4/20/2011 | Views: N/A | Tags: ListBox Binding
by WindowsPhoneGeek
In this post I am going to talk about different techniques of accessing(manipulating) the ListBox SelectedItem. Recently we`ve received lots of questions related to ListBox/ListPicker SelectedItem so in this article I will answer some of them with short examples.
NOTE: Generally ListBox is a kind of ItemControl together with ListPicker and other similar controls. This means that the basic structure is the same as well as the SelectedItem behavior.
When populating a ListBox with items you have two potions:![]()
- Option1 -You can use ListBoxItems
- Option2 - Data Binding
When using Option1 the SelectedItem is actually a ListBoxItem so it is easy to perform the desired manipulations. However when using Optio2 (which is actually 90% of the cases) the SelectedItem is the type of the business object (data class) which you use when performing data binding.
Lets say that we have a sample data bound ListBox where SampleData is our business object (data class) :
public class SampleData
{
public string Day { get; set; }
public string Temperature { get; set; }
}
<ListBox x:Name="listBox" FontSize="26" SelectionChanged="listBox_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Day}" Width="150"/>
<TextBlock Text="{Binding Temperature}"/>
<Button Click="Button_Click"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
List<SampleData> dataSource = new List<SampleData>();
...
dataSource.Add(new SampleData() { Day = "Wednesday", Temperature = "18 C" });
this.listBox.ItemsSource = dataSource;
Question 1: How to access the Selected ListBoxItem when having databound ListBox?
Answer: In order to get the selected ListBoxItem all you need to do is the following:
private void btnGetSelected_Click(object sender, RoutedEventArgs e)
{
ListBoxItem selectedItem = this.listBox.ItemContainerGenerator.ContainerFromItem(this.listBox.SelectedItem) as ListBoxItem;
}
Question 2: How to access the SelectedItem from a ListBox event handler?(when having databound ListBox)
Answer: Lets say that we have subscribed to the ListBox SelectionChanged event. At first we will get a reference to the current SelectedItem data object and after that we will get a reference to the SelectedItem container which is of type ListBoxItem.
private void listBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
//Get the data object that represents the current selected item
SampleData data = (sender as ListBox).SelectedItem as SampleData;
//Get the selected ListBoxItem container instance
ListBoxItem selectedItem = this.listBox.ItemContainerGenerator.ContainerFromItem(data) as ListBoxItem;
}
Question 3: How to access the SelectedItem from a control placed inside ListBox ItemTemplate?
Answer: In this case we will add a Button inside the ListBox ItemTemplate and will subscribe to its Click event. As you can see below you can get a reference to the SelectedItem data object through the DataContext and after that you can use this data object to get a reference to the Selected ListBoxItem:
private void Button_Click(object sender, RoutedEventArgs e)
{
SampleData data = (sender as Button).DataContext as SampleData;
ListBoxItem pressedItem = this.listBox.ItemContainerGenerator.ContainerFromItem(data) as ListBoxItem;
if (pressedItem != null)
{
//do something
}
}
Question 4: How to set the SelectedItem when having databound ListBox?
Answer: The easiest way to set the SelectedItem of a ListBox is to use its SelectedIndex property:
private void btnSetSelected_Click(object sender, RoutedEventArgs e)
{
this.listBox.SelectedIndex = 1;
}
Question 5: How to access the Selected ListBoxItem and its dataif I know the SelectedIndex? (when having databound ListBox)
Answer: In this case at first we will get a reference to the selected ListBoxItem using ItemContainerGenerator.ContainerFromIndex and after that we will get the real data through the DataContext:
private void btnSelectedIndex_Click(object sender, RoutedEventArgs e)
{
ListBoxItem selectedItem = this.listBox.ItemContainerGenerator.ContainerFromIndex(2) as ListBoxItem;
SampleData data = selectedItem.DataContext as SampleData;
}
That was all about the ListBox SelectedItem in Windows Phone 7. You can find the full source code here:
I hope that this post was helpful.
You may also may find interesting some of our previous articles related to WP7 ListBox:
- Animating ListBox SelectedItem with flipping effect in WP7
- How to customize the ListPicker selected item
- WP7 ListBox: answers to popular questions
- How to access a Control placed inside ListBox ItemTemplate in WP7
- Implementing a WP7 Checked ListBox in different ways
You can also follow us on Twitter @winphonegeek
Comments
Added to my 'useful' stack!
posted by: Ian Walker on 4/20/2011 2:17:57 PM
I was wondering about that .. thanks!
thanks!
posted by: Prabhu on 4/20/2011 5:57:10 PM
got to know about this a few days back, it's good to know all these details ;)
thanks please
posted by: quky on 5/11/2011 9:14:17 PM
would be fantastic is you show an example how to assign a selected item value to a textbox text control
thanks
HP
RE:TextBox
posted by: winphonegeek on 6/6/2011 3:24:01 PM
Once you get a reference to the selected item data you can use something like this:
SampleData data = listBox.SelectedItem as SampleData; ... Textbox tbx = new TextBox(); tbx.Text = data.Day;
RE:TextBox
posted by: winphonegeek on 6/6/2011 3:24:35 PM
Once you get a reference to the selected item data you can use something like this:
SampleData data = listBox.SelectedItem as SampleData; ... TextBox tbx = new TextBox(); tbx.Text = data.Day;
posted by: Darin on 7/14/2011 6:57:34 PM
Incredibly helpful post. I was scratching my head over how to resolve to the listboxitem from a button inside the itemtemplate. This is a nice clean solution! Thanks!
bound listboxtem delete?
posted by: Christian on 8/13/2011 12:09:16 PM
hello, a very good example. many thanks. But again as I delete an item from the listbox?
Many thanks for your help.
best regards, christian
superb website
posted by: Mayank Taneja on 10/8/2011 10:12:35 PM
this website is heaven!! :) :) thanks for the help!! :) :)
textblock in listbox
posted by: Udit Goel on 12/15/2011 9:06:44 PM
I want to show message box with text as textblock.text if the radio button is clicked. and set the listbox selected item as textblock on the radiobutton click...Help me Please..
Radiobutton and textblock in listblock
posted by: Udit Goel on 12/15/2011 9:12:11 PM
<ListBox x:Name="listBox7" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="20" >
<RadioButton x:Name="rbl2" GroupName="avr1" Checked="rbl2_Checked">
<TextBlock Text="{Binding ISpell}" TextWrapping="Wrap">
</RadioButton>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I want to show message box with text as textblock.text if the radio button is clicked. and set the listbox selected item as textblock on the radiobutton click...Help me Please..
Remove an entry
posted by: Kris on 12/23/2011 11:47:19 PM
So how would i then remove an entry from the listbox?
Thanks
posted by: Haq on 1/11/2012 4:37:16 PM
Hi, Thanks a lot for your post,it's very useful for reference.
Deleting selected Item
posted by: Mingu on 1/16/2012 5:47:00 PM
Great stuff. Trying to delete selected item and gets read-only error. Other suggestions pointed to observablecollection. I believe we can do this without it, just not using the right syntax. Allow me to seek your wisdom. Thank you again for your wonderful help.
ListBox selected item to textbox
posted by: Hazuzi on 1/17/2012 3:42:50 PM
private void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
textBox1.Text = listBox1.SelectedItem.ToString();
}
This not work at all. How should I change it to get it working? I don't understand how to make it using previous post...
Get value of selected item TextBloc in DataTemplate in ListBox
posted by: ManuelDevNet on 2/9/2012 12:53:39 PM
Hello, Can you help me to get the text of my TextBloc x:name="TblMain" in a event?
<ListBox x:Name="MainListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}" SelectionChanged="MainListBox_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,0,17" Width="Auto" Height="Auto">
<StackPanel Orientation="Horizontal" Width="Auto" Height="auto">
<Image Source="{Binding Img}" Width="72" Height="72" />
<TextBlock x:Name="TblMain" Text="{Binding Identifier}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" VerticalAlignment="Center" />
</StackPanel>
<TextBlock x:Name="TblSub" Text="Ici la description de la catégorie" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thank you / Merci
Solution: Get value of selected item TextBloc in DataTemplate in ListBox
posted by: ManuelDevNet on 2/9/2012 1:08:14 PM
I found!
private void MainListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ListBoxItem selectedItem = this.MainListBox.ItemContainerGenerator.ContainerFromIndex(MainListBox.SelectedIndex) as ListBoxItem;
GeolivesMenuItem data = selectedItem.DataContext as GeolivesMenuItem;
string Text = data.Identifier;
MessageBox.Show(Text);
}
Remove listboxitem from a databound listbox
posted by: Viacuda on 3/8/2012 2:13:37 AM
Does anyone know how or have an example of how to remove a selected listboxitem?
select iteam at page load
posted by: Bishal on 3/11/2012 8:51:52 AM
this.listBox.SelectedIndex = 3; how to use this code at page load event !!!
if i need the app to automatically select the 4th iteam as page load not at click event !
Compare ListPickerItem with string?
posted by: Thanos on 3/14/2012 9:14:57 AM
I have 3 ListPickers. When you select an Item fot the first one I want only some items to remain in the second one and the same for the second and third ListPickers. Anyone has any ideas? Posting the code below:
InitializeComponent();
List<DY> source = new List<DY>();
source.Add(new DY() { Perioxi = "mplahmplah" });
source.Add(new DY() { Perioxi = "mplahmplah" });
source.Add(new DY() { Perioxi = "mplahmplah" });
source.Add(new DY() { Perioxi = "mplahmplah" });
source.Add(new DY() { Perioxi = "mplahmplah" });
source.Add(new DY() { Perioxi = "mplahmplah" });
source.Add(new DY() { Perioxi = "mplahmplah" });
source.Add(new DY() { Perioxi = "mplahmplah" });
source.Add(new DY() { Perioxi = "mplahmplah" });
source.Add(new DY() { Perioxi = "mplahmplah" });
this.listPicker1.ItemsSource = source;
List<Hospitals> s = new List<Hospitals>();
s.Add(new Hospitals() { Name = "mplahmplah" });
s.Add(new Hospitals() { Name = "mplahmplah" });
s.Add(new Hospitals() { Name = "mplahmplah" });
s.Add(new Hospitals() { Name = "mplahmplah" });
s.Add(new Hospitals() { Name = "mplahmplah" });
s.Add(new Hospitals() { Name = "mplahmplah" });
s.Add(new Hospitals() { Name = "mplahmplah" });
s.Add(new Hospitals() { Name = "mplahmplah" });
this.listPicker2.ItemsSource = s;
ListPickerItem selectedItem = this.listPicker1.ItemContainerGenerator.ContainerFromIndex(listPicker1.SelectedIndex) as ListPickerItem;
DY data = listPicker1.SelectedItem as DY;
if (data.Perioxi == "mplahmplah")
{
//do something
}
if doesn't seem to work. Am I missing something or doing something wrong?
Files ?
posted by: Eric on 3/24/2012 1:01:48 AM
Hello thanks for the sample but do you have files I can download to test it ?
Thanks
Awesome example
posted by: TechnoTalkative on 5/2/2012 9:42:03 AM
Thanx for sharing this article and thanx for your time.
Our Top Articles & Free books
- Our FREE e-book: "Windows Phone Toolkit In Depth" 2nd edition
- 400+ Windows Phone Development articles in our Article Index
- 21 WP7 Toolkit in Depth articles covering all controls
- 12 WP7 Coding4Fun Toolkit in Depth articles covering all controls
- Performance Tips when creating WP7 apps
- Creating a WP7 Custom Control in 7 Steps
- WP7 working with VisualStates: How to make a ToggleSwitch from CheckBox
- What makes a WP7 App successful
- Creating theme friendly UI in WP7 using OpacityMask
- Implementing Windows Phone 7 DataTemplateSelector and CustomDataTemplateSelector
- All about Splash Screens in WP7 – Creating animated Splash Screen
- Getting Started with Unit Testing in Silverlight for WP7
- WP7 WatermarkedTextBox custom control
Our Top Tips & Samples
- All about WP7 Isolated Storage series
- WP7 Dynamically Generating DataTemplate in code
- 5 tips for a successful WP7 Marketplace submission
- WP7: Navigating to a page in different assembly
- WP7 ContextMenu: answers to popular questions
- WP7 ListBox: answers to popular questions
- WP7 working with Images: Content vs Resource build action
- WP7 Element Binding samples
- WP7 working with XML: reading, filtering and databinding
- Drawing in WP7: #2 Drawing shapes with finger
- WP7 TextBox Light theme problems - the solution
- Changing the WP7 Panorama Background Image dynamically with Animation
