How to get handle of controls in ViewModel (MVVM) - mvvm

Question

I am new to MVVM and need help on below scenario.
I have a Stack panel added on my view, now I have to add few controls dynamically to this stack panel through viewmodel. For this I need a handle of stack panel in my viewmodel. Can anybody please guide me how I can access stack panel in my viewmodel.
I read in other bloges that it can be done by using Dependency property. but still I am not able to find way to solve this issue.

Answer 1

Couple of things to note first. The intention of the ViewModel in the MVVM pattern is to provide separation from the View. Therefore, your ViewModel should have no knowledge of the View itself nor the controls contained in the View. Secondly, what you should be attempting to do is have your View bind to a property of your ViewModel (with the understanding that your ViewModel serves as the DataContext of your View). Normally, you would bind a control's ItemsSource property to some collection in the ViewModel. However, you will notice the StackPanel does not implement the ItemsSource dependency property. Instead, use ItemsControl in place of your StackPanel. I would suggest some additional reading on the MVVM pattern and the binding mechanics for additional clarification.

Answer 2

Totally agreed with Backlash,
It seems that your ViewModel and your View are too much coupled;
There are a bunch of resources on the Internet, but here are some I preferred:
Jason Dolinger presentation video on MVVM
John Smith article introducing MVVM

Answer 3

I have done this before with a user control. I've had a collection of objects that i needed to dynamically to controls in a StackPanel. You can also do it with any control...I'll use a TextBlock in this example.
Create a data template with the control you want wrapped in a stack panel:
(MyText is a property in the object of the collection... see below)
<DataTemplate x:Key="MyTemplate">
<Grid Margin="0">
<StackPanel>
<TextBlock Text="{Binding Path=MyText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
</TextBlock>
</StackPanel>
</Grid>
</DataTemplate>
Then the key is to bind to a collection of objects using an ItemsControl:
(The collection is on your viewModel)
<ItemsControl
ItemsSource="{Binding ACollection, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
ItemTemplate=" {StaticResource MyTemplate}" Background="Transparent">
</ItemsControl>
So for example if there are 3 items in "ACollection" there will be 3 TextBlocks stacked on top of each other if there are 5 in the collection there will be 5 TextBlocks etc.

Answer 4

Thanks All for your help, Here I solved the problem
In view model I have created ObservableCollection of FrameWorkElement type, which can hold any other controls which will be decided at runtime. Control can be a text box or button.
Public ObservableCollection < FrameWorkElement > Test
{
get{....} set{...}
}
Now I can add/set any other control to Test
Tets.Add(new TextBox()); Or Button , this will be decided at runtime.
Now bind this "Test" to ItemsControl.
<ItemsControl x:Name="itemsControl" ItemsSource={Biding Test}>
</ItemsControl>