将DataGrid动态添加到视图（MVVM）

Question

I am trying to implement dynamic creation/removal of DataGrids. I want to achieve that a entire DataGrid is added or removed from the view when a certain property changes. My View constructor looks like this:

public Document(){
        InitializeComponent();
        ViewModel = new DocumentViewModel();
        ViewModel.PropertyChanged += (sender, e) => { Test2(); };
        Test();

    }

private void Test()
    {
        _grid = new DataGrid();
        _grid.Height = 100;
        _grid.Width = 100;


        DataGridTextColumn column = new DataGridTextColumn();
        column.Header = "test";
        _grid.Columns.Add(column);
        _panel.Children.Add(_grid);
        content.Children.Add(_panel);

    }

This is the corresponding XAML code:

     <UserControl ... >      

        <Grid Name="content"> 

        </Grid> 
</UserControl>

So, the method "Test2" is executed when a property changes in the ViewModel. I tried to add another grid in that method like this:

  private void Test2()
    {
        DataGrid grid2 = new DataGrid();
        grid2.Height = 100;
        grid2.Width = 100;
        ((StackPanel) content.Children[0]).Children.Add(grid2); 
        content.UpdateLayout(); 
    }

but that does not work. Also, if I do not call the "Test" method from the constructor but when a property is changed, nothing is created. What am I doing wrong?

Answer 1

Your code should work. Check whether the PropertyChanged event is fired (and whether the Test() method is called before the event is fired).

Check the size of your StackPanel - the second DataGrid maybe added, but can not be displayed because the StackPanel is not enough wide or high.

Answer 2

Like HighCore and others suggested, I ended up using ItemsControl and binding it to a collection of DataTables. This works in this particular case, however, I can not dynamically create custom columns (eg have one column contain only string values and another one combo box) which I was hoping to achieve.