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,
![Nested ListBox binding in Silverlight]()
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
- Entity class
- Data source
![Nested ListBox binding in Silverlight]()
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.
![Nested ListBox binding in Silverlight]()
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.