表格中每条记录的一个堆栈面板

Question

表中的每个记录（姓名，年龄，城市，电子邮件）。

我需要一个stack panel （请参阅下面的图片stack-panel，天蓝色）。

并将stack panel的此类列表添加到dock panel（请参阅下面的dock-panel图片，其中浅灰色颜色）。

如何在WPF中实现？

user control可以帮助我吗？

然后我怎样才能在dockpanel 中添加 usercontrols 尽可能多的记录表？

还有其他更好和标准方式吗？

我需要选择 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