在ItemsControl列表中水平定向的WrapPanel垂直

Question

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

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

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

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

这是UI目前如何站：

这是我多么希望在UI实际上出现：

我的标记（Button控件是另一个方面的UI）：

<Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"/> 
      <ColumnDefinition Width="Auto"/> 
     </Grid.ColumnDefinitions> 
     <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto"> 
      <ItemsControl x:Name="ContentList" ItemTemplate="{StaticResource GameTemplate}" Grid.Column="0" /> 
     </ScrollViewer> 
     <StackPanel Grid.Column="1" Background="DarkGray"> 
      <Button Click="OnLoad">_Load</Button> 
      <Button Click="OnSave">_Save</Button> 
      <Button Click="OnAdd">_Add</Button> 
      <Button Click="OnDelete">_Delete</Button> 
     </StackPanel> 
    </Grid> 

的DataTemplate上市美孚项目：

<DataTemplate x:Key="GameTemplate"> 
      <Grid> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="30" /> 
        <RowDefinition Height="*" /> 
       </Grid.RowDefinitions> 
       <Label Content="{Binding Name}" Grid.Row="0" Background="Gray" FontSize="16" /> 
       <ItemsControl x:Name="imageContent" 
           ItemsSource="{Binding FileList}" 
           ItemTemplate="{StaticResource GameImagesTemplate}" 
           Grid.Row="1" /> 
      </Grid> 
     </DataTemplate> 

DataTemplate中为每个美孚项中列出的项目：

<DataTemplate x:Key="GameImagesTemplate"> 
      <WrapPanel Orientation="Horizontal"> 
       <StackPanel Orientation="Vertical" > 
        <Image Source="{Binding FileInfo.FullName}" 
         Margin="8,8,8,8" 
         Height="70" 
         Width="70" /> 
        <Label Content="{Binding Name}" /> 
       </StackPanel> 
      </WrapPanel> 
     </DataTemplate> 

我是相当新的WPF，所以我有一种感觉这是造成我怎么是一个问题使用控件。

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

Answer 1

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

例子：

的XAML：

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="252.351" Width="403.213" Name="UI" > 
    <Window.Resources> 

     <DataTemplate x:Key="GameImagesTemplate" > 
      <StackPanel> 
       <Image Source="{Binding FileInfo.FullName}" Margin="8,8,8,8" Height="70" Width="70" /> 
       <Label Content="{Binding Name}" /> 
      </StackPanel> 
     </DataTemplate> 

     <DataTemplate x:Key="GameTemplate"> 
      <StackPanel> 
       <Label Content="{Binding Name}" Grid.Row="0" Background="Gray" FontSize="16" /> 
       <ItemsControl x:Name="imageContent" ItemsSource="{Binding FileList}" ItemTemplate="{StaticResource GameImagesTemplate}" > 
        <ItemsControl.ItemsPanel> 
         <ItemsPanelTemplate> 
          <WrapPanel Orientation="Horizontal" ScrollViewer.HorizontalScrollBarVisibility="Disabled" /> 
         </ItemsPanelTemplate> 
        </ItemsControl.ItemsPanel> 
       </ItemsControl> 
      </StackPanel> 
     </DataTemplate> 
    </Window.Resources> 

    <Grid> 
     <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"> 
      <ItemsControl ItemsSource="{Binding ElementName=UI, Path=FileList}" Grid.Column="0" ItemTemplate="{StaticResource GameTemplate}" /> 
     </ScrollViewer> 
    </Grid> 
</Window> 

代码：

public partial class MainWindow : Window 
{ 
    private ObservableCollection<Foo> _fileList = new ObservableCollection<Foo>(); 

    public MainWindow() 
    { 
     InitializeComponent(); 
     foreach (var item in Directory.GetDirectories(@"C:\StackOverflow")) 
     { 
      FileList.Add(new Foo 
      { 
       Name = item, 
       FileList = new ObservableCollection<Bar>(Directory.GetFiles(item).Select(x => new Bar { FileInfo = new FileInfo(x) })) 
      }); 
     } 
    } 

    public ObservableCollection<Foo> FileList 
    { 
     get { return _fileList; } 
     set { _fileList = value; } 
    } 
} 

public class Foo 
{ 
    public string Name { get; set; } 
    public ObservableCollection<Bar> FileList { get; set; } 
} 

public class Bar 
{ 
    public FileInfo FileInfo { get; set; } 
} 

结果