Silverlight ListBox inside a ListBox

For something I was trying to implement on the Windows 7 phone, I wanted to have a ListBox inside a ListBox (i.e., a nested ListBox). So for example, if I have a ‘Patient Vitals’ ListBox with two items, where each item is a ListBox with a bunch of items, it’ll look like this:


I wanted to be able to select a row within the nested ListBox, ‘Sbp’ for instance. I searched online and came across a number of posts where people had asked the same question, and tried to implement this functionality, but I simply couldn’t find the solution I was looking for. I kept running into a couple of major issues – (1) the entire inner ListBox item (e.g., from ‘Chief_complaint’ to ‘O2_saturation’) would get selected instead of the single row, and (2) not being able to access the row no/value of the selected row. Anyway, here is a solution that works, and thanks to John Gillotte for helping me out with the solution.

Here’s the code snippet for the xaml:

<Grid> <ListBox x:Name="lstBoxMainGrid" ItemsSource="{Binding}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" SelectionChanged="lstBoxMainGrid_SelectionChanged" Margin="15,15,10,0" FontFamily="Segoe WP" FontSize="25"> <ListBox.ItemContainerStyle> <Style TargetType="ListBoxItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/> </ControlTemplate> </Setter.Value> </Setter> </Style> </ListBox.ItemContainerStyle> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <ItemsControl ItemsSource="{Binding UserViewColumns}"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Background="{StaticResource RectangleShadingBrush}"> <TextBlock x:Name="colName" Width="160" Text="{Binding ColName}" HorizontalAlignment="Left" Margin="0" TextWrapping="NoWrap"/> <TextBlock x:Name="colValue" Foreground="Gold" Text="{Binding ColValue}" TextWrapping="Wrap" FontWeight="Bold"/> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid>

and here are the helper methods/classes in C#:

private void lstBoxMainGrid_SelectionChanged(object sender, SelectionChangedEventArgs e) { currentUserViewDataRow = ((ListBox)sender).SelectedItem as GridDataRow; if (currentUserViewDataRow == null) { // handle condition } // do stuff } public class GridDataRow { private List<GridDataCol> userViewColumns; // getters, setters etc public List<GridDataCol> UserViewColumns { // return list; } } public class GridDataCol { public string ColName { get; set; } public string ColValue { get; set; } public GridDataCol(string name, string value) { ColName = name; ColValue = value; } }

Then you can set the main ListBox items using something like:

List<GridDataRow> rows = new List<GridDataRow>(); foreach(...) { // add GridDataRow instances to rows } lstBoxMainGrid.ItemsSource = rows;

Hope this will help someone out there 🙂

This entry was posted in Windows 7 phone development and tagged , , , . Bookmark the permalink.

One Response to Silverlight ListBox inside a ListBox

  1. Anonymous says:

    yes it helped me…after mugging up my head for 3 hours….this was of a lot help
    -Rahul Adwani, L&T Infotech

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s