Nested ListBox binding in Silverlight and Windows Phone 7

While creating an application I came across a requirement when I had to put a listbox inside a list box and then I had bind that nested listbox dynamically.

For example say, entity class called Roles as below,

    public class Roles
    {
        public string RollName { get; set; }
    }

And you are using Role class in another entity class called Subscription as property

  public class Subscription
    {
        public string SubscriptionName { get; set; }
        public List<Roles> lstRoles { get; set; }
    }

We need to achieve,

There is function to return Data to bind to nested list box as below,

List<Subscription> GetDataToBind()
        {
           List<Subscription> lstSubscriptions = new List<Subscription>
                                                {
                                                   new Subscription
                                                   {
                                                       SubscriptionName ="Susbcription1",
                                                       lstRoles = new List<Roles>
                                                       {
                                                            new Roles
                                                            {
                                                                RollName = "Role1"
                                                            },
                                                             new Roles
                                                            {
                                                                RollName = "Role2"
                                                            },
                                                             new Roles
                                                            {
                                                                RollName = "Role3"
                                                            }
                                                       }
                                                   },
                                                   new Subscription
                                                   {
                                                   SubscriptionName ="Susbcription2",
                                                       lstRoles = new List<Roles>
                                                       {
                                                            new Roles
                                                            {
                                                                RollName = "Role1"
                                                            },
                                                             new Roles
                                                            {
                                                                RollName = "Role2"
                                                            },
                                                             new Roles
                                                            {
                                                                RollName = "Role3"
                                                            }
                                                       }
                                                   }
                                                };
           return lstSubscriptions;

        }

As of now we are ready with

1. Entity class
2. Data source

And there is one more property in of generic list type in entity class. To bind that you need to set item source of internal list box as binding.

Final XAML will be as below,

<ListBox Height="646" HorizontalAlignment="Left" Margin="6,19,0,0" Name="listBox1" VerticalAlignment="Top" Width="444" >

                <ListBox.ItemTemplate>
                    <DataTemplate>
                    <Grid x:Name="grdListItem" Width="440">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="201*"/>
                            <ColumnDefinition Width="239*" />
                        </Grid.ColumnDefinitions>
                            <Image Source="AzureLogo.png" Height="100" Width="100" Grid.Column="0" />
                            <TextBlock x:Name="txtSubscription" Grid.Column="1" Height="100" Margin="6,0" Text="{Binding SubscriptionName}" />

                        <ListBox x:Name="lstWebRoles" Grid.Column="1" Margin="10,0,0,0" ItemsSource="{Binding lstRoles}" >
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical" >
                                    <TextBlock x:Name="txtRoles" Height="80" Width="220" Text="{Binding RollName}" />
                                </StackPanel>
                                  </DataTemplate>
                                 </ListBox.ItemTemplate>
                           </ListBox>

                    </Grid>
                    </DataTemplate>
                    </ListBox.ItemTemplate>
            </ListBox>

Eventually put item source of external list box as,

public MainPage()
        {
            InitializeComponent();
            listBox1.ItemsSource = GetDataToBind();
        }

In this post we discussed binding of nested listbox in Silverlight. I hope this post was useful. Thanks for reading.