WrapPanel được định hướng ngang bên trong ItemsControl liệt kê theo chiều dọc

Question

Tôi có hai DataTemplates được định nghĩa trong XAML của tôi, mỗi được sử dụng cho một bảng ItemsControl riêng biệt.

ItemsControl chính liệt kê các đối tượng Foo được lưu trữ trong một đối tượng ObservableCollection.

Bản thân đối tượng Foo có tập hợp các mục riêng được lưu trữ bên trong làm đối tượng ObservableCollection.

Tôi đã cố xác định XAML theo cách cho phép mỗi mục ObservableCollection Foo được hiển thị với tên của nó trong một tiêu đề (ItemsControl đầu tiên). Từ danh sách này trong mỗi mục Foo chính nó sẽ được hiển thị theo chiều ngang (Sử dụng ItemsControl thứ hai) với một trường liên quan trực tiếp bên dưới. Nếu có đủ các mặt hàng thì chúng sẽ được quấn vào hàng tiếp theo nếu cần.

Đây là cách giao diện người dùng hiện đang đứng:

Đây là cách tôi muốn giao diện người dùng để thực sự xuất hiện: điều khiển

My Markup (Nút là dành cho một khía cạnh khác của giao diện người dùng):

<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 niêm yết các mặt hàng Foo:

<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 niêm yết các mặt hàng trong từng hạng mục Foo:

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

Tôi khá mới để WPF vì vậy tôi có cảm giác nó là một vấn đề gây ra bởi cách tôi bằng cách sử dụng các điều khiển.

Tôi cần phải thực hiện những thay đổi nào về WPF để tạo giao diện người dùng mà tôi muốn?

Answer 1

Tôi nghĩ rằng nó bởi vì bạn đang thêm mỗi mục hình ảnh vào một mới WrapPanel trong GameImagesTemplate, bạn chỉ cần phải thiết lập các ItemsControlItemsPanelTemplate-WrapPanel trong GameTemplate

Ví dụ:

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> 

Mã:

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

quả