Одна панель стека для каждой записи в таблице

Question

Для каждой записи (имя, возраст, город, электронная почта) в таблице .

Мне нужно иметь один stack panel (см. Изображение ниже stack-panel с небесно-голубым цветом).

И добавьте такой список stack panel в dock panel (см. Изображение ниже dock-panel с Светло-серый цвет).

Как это можно реализовать в WPF?

Может ли user control мне помочь?

Тогда как я могу добавить usercontrols внутри dockpanel столько записей в таблице ?

Есть ли другие лучше и стандартным способом ?

мне нужно идти с MVVM , поэтому дайте свой ответ, учитывая этот пункт .....

Спасибо ……

Answer 1

Вы можете использовать ItemsControl с UniformGrid в качестве ItemsPanel

<ItemsControl ItemsSource="{Binding Records}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid IsItemsHost="True" Columns="2" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <StackPanel>
            ...
        </StackPanel>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Кстати, я не думаю, что StackPanel - лучший выбор для шаблона элемента ..Обычно вы бы использовали Grid для такого рода вещей.И, конечно, вы можете создать UserControl, который обернет этот Grid и использовать его в ItemTemplate

Answer 2

<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>

в коде c #

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 = "abc@abc.com" });
        Persons.Add(new Person() { Name = "John 2", Age = 25, City = "New Delhi", Email = "abc@abc.com" });
        Persons.Add(new Person() { Name = "John 3", Age = 25, City = "New Delhi", Email = "abc@abc.com" });
        Persons.Add(new Person() { Name = "John 4   ", Age = 25, City = "New Delhi", Email = "abc@abc.com" });
       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; }
}

Обновление: Добавлен Scrollviewer