开发者

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

开发者 https://www.devze.com 2023-03-19 20:37 出处:网络
I have an observablecollection of type frameworkelement that I would like to display in a stackpanel or something similar. Every item in the observabl开发者_StackOverflowecollection is a usercontrol t

I have an observablecollection of type frameworkelement that I would like to display in a stackpanel or something similar. Every item in the observabl开发者_StackOverflowecollection 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


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


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

精彩评论

暂无评论...
验证码 换一张
取 消