在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; } 
} 

結果