ItemsControl中的水平定向WrapPanel垂直列出

我在我的XAML中定义了两个DataTemplates，每个都用于一个单独的ItemsControl面板。

主ItemsControl列出了ObservableCollection对象中存储的Foo对象。

Foo对象本身具有作为ObservableCollection对象存储的自己的一组项。

我尝试以允许每个ObservableCollection Foo项目在标题中显示其名称的方式定义XAML（第一个ItemsControl）。 由此，每个Foo项目本身内的列表应水平显示（使用第二个ItemsControl），并在下面直接显示相关字段。 如果存在足够的物品，那么它们应该在必要时包裹到下一行。

这就是UI目前的情况：

这就是我希望UI实际出现的方式：

我的标记（按钮控件用于UI的另一个方面）：

         _Load _Save _Add _Delete   

DataTemplate用于列出Foo项目：

DataTemplate用于列出每个Foo项目中的项目：

我是WPF的新手，所以我觉得这是一个由我如何使用控件引起的问题。

为了生成我想要的UI，我需要做什么改变WPF？

Answer 1

我认为是因为你将每个图像项添加到GameImagesTemplate的新WrapPanel ，你应该只需要在GameImagesTemplate中将ItemsControl GameTemplate设置为WrapPanel

例：

XAML：

码：

 public partial class MainWindow : Window { private ObservableCollection _fileList = new ObservableCollection(); public MainWindow() { InitializeComponent(); foreach (var item in Directory.GetDirectories(@"C:\StackOverflow")) { FileList.Add(new Foo { Name = item, FileList = new ObservableCollection(Directory.GetFiles(item).Select(x => new Bar { FileInfo = new FileInfo(x) })) }); } } public ObservableCollection FileList { get { return _fileList; } set { _fileList = value; } } } public class Foo { public string Name { get; set; } public ObservableCollection FileList { get; set; } } public class Bar { public FileInfo FileInfo { get; set; } } 

结果