Question

I have a customcontrol, need to be added as many times when clicing on a button. This has to achived from MVVM WPF pattern. i have pasted my code here. It will be great if you guys can help on this.

Please help me

<Window x:Class="DOCS_APP_ELEMENT.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:usercontrol="clr-namespace:DOCS_APP_ELEMENT"
    xmlns:viewModel="clr-namespace:DOCS_APP_ELEMENT.ViewModels"
    Title="MainWindow" Height="350" Width="400">
<Grid Margin="10" Name="myGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Border CornerRadius="5" BorderBrush="SteelBlue" BorderThickness="2" Grid.Row="0">
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <Label Content="Type:" Margin="20,0,4,0"></Label>
                <ComboBox Name="cmbQuestionType" Width="300" Style="{Binding ComboBoxStyle}" Margin="0,5,0,5" IsEnabled="False">                   </ComboBox>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,5,0,5">
                <Label Content="Question:" Margin="0,0,4,0"></Label>
                <TextBox Name="txtQuestion" Width="300" Height="50" Margin="0,2,0,0" AcceptsReturn="True"></TextBox>
            </StackPanel>
            <StackPanel Orientation="Horizontal" Margin="0,5,0,5" >
                <Label Content="Answer:" Margin="7,0,4,0"></Label>
                <TextBox Name="txtAnswer" Style="{StaticResource TextboxStyle}" Margin="0,2,0,0"></TextBox>
            </StackPanel>
        </StackPanel>
    </Border>
    <Border CornerRadius="5" BorderBrush="SteelBlue" BorderThickness="2" Grid.Row="1" Margin="0,10,0,0" >
        <ScrollViewer VerticalScrollBarVisibility="Auto" Height="100">
        <StackPanel Name="myCustom" Orientation="Vertical" >
                **<!--<ADD CUSTOM CONTROl HERE>-->**
            </StackPanel>
        </ScrollViewer>
    </Border>
    <Border CornerRadius="5" BorderBrush="SteelBlue" BorderThickness="2" Grid.Row="2" Margin="0,10,0,0">
        <Border.DataContext>
            <viewModel:ViewElements/>                    
        </Border.DataContext>
        <Button  Name="btnAdd" Content="Add" DataContext="{Binding }" Command="{Binding Path=AddInstace}"></Button>
    </Border>
</Grid>

Answer 1

I’d do it the following way:

have a ObservableCollection<CustomClass> in your ViewModel. The representation of your CustomClass is a DataTemplate with your above Markup.

Here’s a full working example:

  <Grid>
    <Grid.DataContext>
      <local:MyViewModel></local:MyViewModel>
    </Grid.DataContext>
      <StackPanel>
      <ScrollViewer VerticalScrollBarVisibility="Auto" Height="200">
        <ItemsControl ItemsSource="{Binding CustomControls}">
          <ItemsControl.ItemTemplate>
            <DataTemplate>
              <Border Background="Green"> 
                <StackPanel>
                  <TextBlock Text="I am a Custom Control"></TextBlock>
                  <TextBlock Text="{Binding DisplayValue}"></TextBlock>
                </StackPanel>
              </Border>
            </DataTemplate>
          </ItemsControl.ItemTemplate>
          <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
              <StackPanel/>
            </ItemsPanelTemplate>
          </ItemsControl.ItemsPanel>
          </ItemsControl>
      </ScrollViewer>
      <Button Width="200" Height="50" Command="{Binding AddControlCommand}">Add Control</Button>
      <Button Width="200" Height="50" Command="{Binding RemoveControlCommand}">Remove Control</Button>
    </StackPanel>
  </Grid>

ViewModel:

  public abstract class ViewModel : INotifyPropertyChanged
  {
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
      if (PropertyChanged != null)
      {
        PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
      }
    }
  }

  public class RelayCommand : ICommand
  {
    ... look that up yourself if you don't have a derived command class yet in your project... 
  }

  public class MyViewModel : ViewModel
  {
    public ICommand AddControlCommand
    {
      get
      {
        return new RelayCommand(x=>this.AddControl());
      }
    }

    public ICommand RemoveControlCommand
    {
      get
      {
        return new RelayCommand(x => this.RemoveControl());
      }
    }

    private void AddControl()
    {
      CustomControls.Add(new CustomControl() {DisplayValue = "newControl"});
    }

    private void RemoveControl()
    {
      if (CustomControls.Count > 0)
      {
        CustomControls.Remove(CustomControls.Last());
      }
    }

    private ObservableCollection<CustomControl> _customControls;

    public ObservableCollection<CustomControl> CustomControls
    {
      get
      {
        if (_customControls == null)
        {
        _customControls = new ObservableCollection<CustomControl>()
                 {
                   new CustomControl() {DisplayValue = "Control1"},
                   new CustomControl() {DisplayValue = "Control2"},
                   new CustomControl() {DisplayValue = "Control3"}
                 };
        }
        return _customControls;
      }
    }
  }

  public class CustomControl : ViewModel
  {
    public string DisplayValue { get; set; }
  }