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

Question

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

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

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

我试图以一种允许每个ObservableCollection Foo项目在标题中显示的方式定义XAML(第一个ItemsControl).由此,每个Foo项目本身内的列表应该水平显示(使用第二个ItemsControl),下面是相关字段.如果存在足够的物品,那么它们应该在必要时包裹到下一行.

这就是UI目前的表现:

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

我的标记(按钮控件用于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用于列出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用于列出每个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>

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

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

Answer 1

我认为它是因为你添加的每个图像项到一个新WrapPanel的GameImagesTemplate,你应该只需要设置ItemsControl ItemsPanelTemplate到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; }
}

结果