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,

image

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

image

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.

image

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.  Smile

7 responses to “Nested ListBox binding in Silverlight and Windows Phone 7”

  1. […] Read original post by Dhananjay Kumar at Debug Mode […]

  2. […] Read original post by Dhananjay Kumar at Debug Mode […]

  3. […] Nested ListBox binding in Silverlight and Windows Phone 7 […]

  4. Simple. many thanks

  5. Sania Siddiqui

    I am using wcf service.When I bind textbox inside the nested listbox with the property of the class ,whose objects make my list for nested listbox .Its displays something like MyProject.MyReference.MyClassName .Although the no.of times this is displayed is correct as per no.of items in the list.Pls Help

  6. Can any one Help me How to Bind more than one data by dynamically in the below code

    List GetDataToBinds(List lstCategorieslist_in)
    {

    List lstSubscriptions = new List(lstCategorieslist_in)

    {

    new CategoryEntity
    {
    name =lstCategorieslist_in[0].name,
    id=”1″,
    subcats = new ObservableCollection
    {

    new Subcats
    {

    name=lstCategorieslist_in[0].subcats[0].name,
    }

    }

    },

    };

    //List newList = lstSubscriptions.Where(m =>m.subcats).ToList();
    return lstSubscriptions;

    }

  7. […] Nested ListBox binding in Silverlight and Windows Phone 7 – Dhananjay Kumar […]

Leave a comment

Create a website or blog at WordPress.com