Click here to Skip to main content
15,888,610 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello,
I have a window form in which i select a value from combobox.Now based on the selected value if i have 3 items for that 3 times a user control should be displayed with textboxes in each user control.How can i achieve creating multiple instance of same user control in mvvm
MAinWIndow.Xaml
 <ItemsControl ItemsSource="{Binding Bindgrid}" Margin="26,277,281,136">
            <itemscontrol.itemtemplate>
                <DataTemplate DataType="{x:Type VM:MRRUserViewModel}">
                    <local:MMRUserControl />
                
            
        

here bindgrid is the observable collection which hold the value to be displayed in the user control textbox
VM:MRRUserViewModel it is the view model of usercontrol which calls the method that gives the result of bindgrid


What I have tried:

I am able to show only one instance of User Control
Posted
Updated 27-Feb-18 21:30pm
v2

1 solution

Use an ObservableCollection holding Models or ViewModels of the data to be displayed in the multiple UserControls. Then in the XAML file, use an ItemsControl (wrapped inside a ScrollViewer control) or ListBox and set the DataTemple with the UserControl.

UPDATE: Here is a working example for you as requested...

Models and ViewModels may have properties that can change. Here is a base class that works with the INotifyPropertyChanged binding interface:
C#
public abstract class ObservableBase : INotifyPropertyChanged
{
    public void Set<TValue>(ref TValue field, TValue newValue, [CallerMemberName] string propertyName = "")
    {
        if (EqualityComparer<TValue>.Default.Equals(field, default(TValue)) || !field.Equals(newValue))
        {
            field = newValue;
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
}

NOTE: This is NOT required for this sample app but here for thoroughness for the Binding system.

For our sample app, we need a data model to bind each item in the ObservableCollection in the MainViewModel class:
C#
public class PersonModel : ObservableBase
{
    private string name;
    public string Name
    {
        get { return name; }
        set { Set(ref name, value); }
    }

    private int age;
    public int Age
    {
        get { return age; }
        set { Set(ref age, value); }
    }
}

Now we can define our MainViewModel that will hold our collection of objects to be displayed in the MainWindow UI
C#
public class MainViewModel
{
    public MainViewModel()
    {
        Mock();
    }

    public ObservableCollection<PersonModel> Persons { get; set; }
        = new ObservableCollection<PersonModel>();

    private Random rand = new Random();

    private void Mock()
    {
        for (int i = 0; i < 10; i++)
        {
            Persons.Add(new PersonModel
            {
                Name = string.Format("Person {0}", i),
                Age = rand.Next(20, 50)
            });
        }
    }
}

Now we define our item template in the UserControl as required in this question asked:
XML
<UserControl
    x:Class="ItemsControlSample.PersonUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding Name}" Margin="10 3"/>
        <TextBlock Text="{Binding Age}" Margin="10 3" Grid.Column="1"/>
    </Grid>

</UserControl>

Lastly, we are now ready to define our MainWindow UI view for the user:
XML
<Window
    x:Class="ItemsControlSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    mc:Ignorable="d"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    xmlns:local="clr-namespace:ItemsControlSample"

    Title="Basic ObservableCollection binding example"
    WindowStartupLocation="CenterScreen" Height="400" Width="360">

    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition />
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.Resources>
            <DataTemplate DataType="{x:Type local:PersonModel}">
                <local:PersonUserControl/>
            </DataTemplate>
        </Grid.Resources>

        <TextBlock Text="ItemsControl Example" FontWeight="Bold" Margin="4 10"/>
        <Border BorderThickness="1" BorderBrush="Silver" Margin="4" Grid.Row="1">
            <ScrollViewer HorizontalScrollBarVisibility="Hidden"
                          VerticalScrollBarVisibility="Auto">
                <ItemsControl ItemsSource="{Binding Persons}"/>
            </ScrollViewer>
        </Border>

        <TextBlock Text="ListBox Example" FontWeight="Bold" Margin="4 10" Grid.Column="1"/>
        <ListBox ItemsSource="{Binding Persons}" Margin="4" Grid.Row="1" Grid.Column="1">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                </Style>
            </ListBox.ItemContainerStyle>
        </ListBox>
    </Grid>

</Window>

The sample app shows how to display a list of Models contained in an ObservableCollection in the bound ViewModel using both an ItemsControl and a ListBox control using the MVVM Pattern and the WPF Binding system.
 
Share this answer
 
v2
Comments
Member 12008812 28-Feb-18 1:59am    
I did the same but i could not achieve it.Will u please help me out with a sample code snippet.I hope u got my query
Graeme_Grant 28-Feb-18 2:01am    
Update your question with a sample/mock code of what you have tried so we can see what you are doing first.
Graeme_Grant 28-Feb-18 2:39am    
Please update the question with, sample code, any error messages (including inner exception details), etc, by clicking on the Improve question widget.
Member 12008812 28-Feb-18 3:44am    
I updated the Question @Graeme
Graeme_Grant 28-Feb-18 5:52am    
Your VM (ViewModel) and Model classes are missing from your sample. So it is unclear if you are correctly working with the ObservableCollection class. It is possible to break the binding system if not done correctly.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900