Adding controls dynamically in WPF MVVM

Question

I am working on a dynamic search view wherein clicking a button should add a new row containing 3 combobox and 2 textboxes.

How should I go about doing this?

Answer 1

If you really want to do mvvm , try to forget "how can I add controls". You don't have to, just think about your viewmodels - WPF create the contols for you :)

In your case lets say we have a SearchViewModel and a SearchEntryViewmodel.

public class SearchEntryViewmodel
{
    //Properties for Binding to Combobox and Textbox goes here
}


public class SearchViewModel 
{
    public ObservableCollection<SearchEntryViewmodel> MySearchItems {get;set;}
    public ICommand AddSearchItem {get;}
}

Till now you dont have to think about usercontrols/view. In your SearchView you create an ItemsControl and bind the ItemsSource to MySearchItems.

<ItemsControl ItemsSource="{Binding MySearchItems}"/> 

You see now all of your SearchEntryViewmodels in the ItemsControl(just the ToString() atm).

To fit your requirements to show every SearchEntryViewmodel with 3Comboboxes and so on you just have to define a DataTemplate in your Resources

<DataTemplate DataType="{x:Type local:SearchEntryViewmodel}">
    <StackPanel Orientation="Horizontal">
        <Combobox ItemsSource="{Binding MyPropertyInSearchEntryViewmodel}"/>
        <!-- the other controls with bindings -->
    </StackPanel>
</DataTemplate>

That's all :) and you never have to think about "how can I add controls dynamically?". You just have to add new SearchEntryViewmodel to your collection.

This approach is called Viewmodel First and I think it's the easiest way to do MVVM.

Answer 2

One option is that you can create TextBoxes and comboboxes in backend by creating a new instanse. But the better option is that you can create one usercontrol which contains All texboxes and comboboxes which you want to add and in which format you want. After creating when the button is pressed you can create a instace of this usercontrol and set it in the grid or any other control by using SetValue property of the control.

If you are new to WPF and MVVM this read this blogs to understand this.

https://radhikakhacharia.wordpress.com/2012/06/01/wpf-tutorial-3/

https://radhikakhacharia.wordpress.com/2012/02/13/model-view-viewmodel/

Answer 3

If you are new to both MVVM and WPF, there is a really wonderful video tutorial on how to architect a C# / WPF / MVVM application by Jason Dollinger which is available here on lab49. All of the sourcecode he developes in this amazing video is available also right here on lab49.

After watching it, you will not have any problems developing your search view for sure.