Question

For each record (Name, Age, City, E-mail) in the table.

I need to have one stack panel (see in image below stack-panel with sky blue color).

And add such list of stack panel in to dock panel (see image below dock-panel with Light Gray color).

How could it be implementing in WPF?

Does user control can help me?

Then how could I add usercontrols inside dockpanel as much records congaing in table?

Is there any other better and standard way?

i needs to going with MVVM, so giving your answer by considering this point…..

Thanks……

Answer 1

<Window x:Class="WpfApplication7.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
  <ScrollViewer>
<ItemsControl ItemsSource="{Binding Persons}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid IsItemsHost="True"
                         Columns="2" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="Black" Margin="2" BorderThickness="2"
                    Background="LightBlue">
                <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                    <RowDefinition></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Row="0" Text="Name" Margin="5"></TextBlock>
                <TextBlock Grid.Row="1" Text="Age" Margin="5"></TextBlock>
                <TextBlock  Grid.Row="2" Text="City" Margin="5"></TextBlock>
                <TextBlock Grid.Row="3" Text="Email" Margin="5"></TextBlock>
                    <TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Name}" Margin="5"></TextBox>
                    <TextBox Grid.Row="1"
                             Grid.Column="1"
                             Text="{Binding Age}" Margin="5"></TextBox>
                    <TextBox Grid.Row="2"
                             Grid.Column="1"
                             Text="{Binding City}" Margin="5"></TextBox>
                    <TextBox Grid.Row="3"
                             Grid.Column="1"
                             Text="{Binding Email}" Margin="5"></TextBox>
                </Grid>
                </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

in the c# code

public partial class Window1 : Window,INotifyPropertyChanged 
{
    public Window1()
    {
        Persons = new ObservableCollection<Person>();

        InitializeComponent();
        Persons.Add(new Person() { Name = "John 1", Age = 25, City = "New Delhi", Email = "[e-mail]" });
        Persons.Add(new Person() { Name = "John 2", Age = 25, City = "New Delhi", Email = "[e-mail]" });
        Persons.Add(new Person() { Name = "John 3", Age = 25, City = "New Delhi", Email = "[e-mail]" });
        Persons.Add(new Person() { Name = "John 4   ", Age = 25, City = "New Delhi", Email = "[e-mail]" });
       DataContext = this ;
    }

    private ObservableCollection<Person> persons;
    public ObservableCollection<Person> Persons {
        get
        {
            return persons;
        }
        set
        {
            persons = value;
            NotifyPropertyChanged("Persons");
        }
    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String info)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(info));
        }
    }

    #endregion
}
public class Person
{
    public string Name { get; set; }
    public string City { get; set; }
    public int Age  { get; set; }
    public string Email { get; set; }
}

Update : Added Scrollviewer