Programmatically populate a stackpanel with an observablecollection of user controls using MVVM - mvvm

Question

I have an observablecollection of type frameworkelement that I would like to display in a stackpanel or something similar. Every item in the observablecollection is a usercontrol that I have created. I'm pretty new to WPF and I don't have any idea how to do this. An example would be much appreciated

Answer 1

I'm borrowing rhe1980's answer a bit here, but the point is that the code in the codebehind will actually be in a viewmodel.
View:
<Window x:Class="Sandbox.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
Name="mainWindow">
<Grid>
<StackPanel>
<ItemsControl ItemsSource="{Binding Path=MyCollection}"/>
</StackPanel>
</Grid>
CodeBehind:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MyViewModel();
}
}
ViewModel:
public class MyViewModel: INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
if (!string.IsNullOrEmpty(propertyName))
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
this.OnObjectChanged();
}
private ObservableCollection<FrameworkElement> _myCollection;
public ObservableCollection<FrameworkElement> MyCollection
{
get
{
return _myCollection;
}
set
{
_myCollection = value;
OnPropertyChanged("MyCollection");
}
}
}

Answer 2

Use a ItemsControl for bind the ObservableCollection in the StackPanel:
View(xaml):
<Window x:Class="Sandbox.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
Name="mainWindow">
<Grid>
<StackPanel>
<ItemsControl ItemsSource="{Binding ElementName=mainWindow,Path=ObservableCollection}"/>
</StackPanel>
</Grid>
Codebehind(xaml.cs):
public partial class MainWindow : Window
{
public ObservableCollection<FrameworkElement> ObservableCollection { get; set; }
public MainWindow()
{
InitializeObservableCollection();
InitializeComponent();
}
private void InitializeObservableCollection()
{
ObservableCollection = new ObservableCollection<FrameworkElement>();
for (var ii = 0; ii < 10; ii++)
{
ObservableCollection.Add(new Button {Content = ii.ToString()});
}
}
}