Add Usercontrol as ListBoxItem from ViewModel - wpf

Question

I'm very new to MVVM (and WPF). I have a main view that has a ListBox with the same usercontrol added to it x times.No problem adding these controls. The UC conatins a ListBox that will hold an unknown number of items. Can these items be another UC ? How do I not break MVVM and add items to the ListBox of each UC added?
Can someone point me in the right direction?

Answer 1

You can add the usercontrol in a Datatemplate in the ItemTemplate of the listbox. refer the below sample.
<Window x:Class="MSDN15Jan2015_Learning.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MSDN15Jan2015_Learning"
Title="MainWindow" Height="350" Width="525">
<Grid>
<ListBox ItemsSource="{Binding PersonList}">
<ListBox.ItemTemplate>
<DataTemplate>
<local:ListBoxItemControl/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainViewModel();
}
}
class MainViewModel
{
private ObservableCollection<Person> perList = new ObservableCollection<Person>();
public ObservableCollection<Person> PersonList
{
get { return perList; }
set { perList = value; }
}
public MainViewModel()
{
perList.Add(new Person() { Age = 1, Name = "Test1"});
perList.Add(new Person() { Age = 2, Name = "Test2" });
perList.Add(new Person() { Age = 3, Name = "Test3" });
perList.Add(new Person() { Age = 4, Name = "Test4" });
}
}
public class Person
{
private int age;
public int Age
{
get { return age; }
set { age = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
}
<UserControl x:Class="MSDN15Jan2015_Learning.ListBoxItemControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<StackPanel>
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Age}"/>
</StackPanel>
</Grid>