Programmatically populate a stackpanel with an observablecollection of user controls using 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

MVVM would generally frown on this technique as you're tightly coupling the viewmodel to the view, resulting in decreased testability, portability, etc. Where is this ObservableCollection of framework elements coming from? — Nick Heidke, Jul 13 '11 at 17:54
In a perfect world the viewmodel is a collection of properties that doesn't care how the front end is implemented. By having an observablecollection of FrameworkElement, you're coupling the VM to a specific presentation implementation. It's certainly functional. Let me know if the answer below solves your problem! :-) — Nick Heidke, Jul 13 '11 at 18:34

score 4 · Accepted Answer · answered Jul 13 '11 at 18:00

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");
        }
    }     
}

If you're using dependency injection of some sort, the VM may actually be passed into the constructor of the view, but that's a quick fix I can add if needed. — Nick Heidke, Jul 13 '11 at 18:06

score 2 · Answer 2 · answered Jul 13 '11 at 17:31

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()});
        }
    }
}

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

2 Answers2