MVVM and dynamic generation of controls

Question

i've written a tool that generates sql queries using GUI, i want to rewrite the tool using MVVM and WPF, every sql column type has a different control as you can see in the following image

i add a column filter control based on the sql column type, and i generate the controls using code, just like i used to do in windows forms.

1. in MVVM i've read that the view is writtien enteirly using XAML, does MVVM suite such application where i have to add different user controls dynamically to a stack panel?
2. The controls won't exist in the view unless some column is double clicked, that means the control won't be available in the xaml and won't be hidden or collapsed.
3. is there any way that i can avoid the bindings in the code behind?
4. should i create a user control for each column type?
5. in general what is the best approach to devlop such application with complex and dynamic ui using mvvm?

Answer 1

Guess I know how to achieve that, but it is very complex stuff. First you should comprehend MVVM basic concepts. Main ViewModel should be a class with ObservableCollection of ViewModels, each of them represents a column with its data and properties.

interface IViewModel : INotifyPropertyChanged,IDisposable
{
}

interface IColumnViewModel : IViewModel
{
}

class ViewModelBase : IViewModel
{
    // ... MVVM basics, PropertyChanged etc. ...
}

class MainViewModel : ViewModelBase
{
    ObservableCollection<IColumnViewModel> Columns {get; set}
}

In View I suppose something like ItemsControl with ItemTemplate, that should embed ContentControl with DataTemplate, that shall be automatically selected by WPF according to binded DataContext of list item. StackPanel itself is not suitable for that, but it can be invoked as ItemsPanelTemplate

<Window
    xmlns:v="clr-namespace:WpfApplication.Views"
    xmlns:vm="clr-namespace:WpfApplication.ViewModels">
    <Window.Resources>
        <DataTemplate DataType="{x:Type TypeName=vm:TextColumnViewModel}">
            <v:TextColumnView/>
        </DataTemplate>
    </Window.Resources>
    <ItemsControl
        ItemsSource="{Binding Columns}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <ContentControl Content="{Binding}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Window>

So, you should build View/ViewModel pair for every column type.

Hope, my example will help. Good luck with your girlfriend and MVVM :)

Answer 2

If I've understood your scenario correctly : You can use Data Templates & Items Templates For example I've written an application which loads Data into Collection and then shows each item of that collection in a Wrap Panel [ Or stack panel ] based on defined data template. And Wrap penel items are in sync by the collection itself within two way binding You should consider using Observable Collections to achieve this goal Then you can fill the collection and see the results on a view I hope this helps