WPF - WrapPanel/Grid 中的 ItemsControl 数据绑定

Question

我想从我自己的数据类型中读出图像并通过 ItemControl Binding 将列表同步到 Grid/WrapPanel。

我的 XAML：

    <WrapPanel >
    <ItemsControl Name="images">
        <ItemsControl.ItemTemplate>
            <DataTemplate>

                <Image Source="{Binding Link}" Stretch="None"  ></Image>


            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</WrapPanel>

C#代码：

 public MainWindow()
    {
        InitializeComponent();
        List<Movie> items = new List<Movie>();
        items.Add(new Movie() { Name = "Movie1", Link = "http://www.airvana.com/default/cache/file/1601D22D-9266-DE31-D6B8D178DB2933DC_small.png", Column =0 });

      items.Add(new Movie() { Name = "Movie2", Link = "http://www.airvana.com/default/cache/file/1601D22D-9266-DE31-D6B8D178DB2933DC_small.png"});
      items.Add(new Movie() { Name = "Movie2", Link = "http://www.airvana.com/default/cache/file/1601D22D-9266-DE31-D6B8D178DB2933DC_small.png"});
       // items.Add(new Movie() { Name = "Movie3"});

        images.ItemsSource = items;
    }
}
public class Movie
{
    public string Name { get; set; }
    public string Link { get; set; }
}

这一切都很好，我唯一的问题（以及为什么我尝试使用 WrapPanel 而不是 Grid）是所有 3 个图像都在彼此下方，而不是彼此相邻。

how it looks

如果我在没有绑定的情况下只使用 WrapPanel 并添加 3 个图像，它会完美运行。

基本上我想做的是一组图像，比如图片拼贴——有更好的方法吗？

Answer 1

ItemsPanelTemplate，定义用于项目布局的面板。 ItemsControl 的默认值是指定 StackPanel 的 ItemsPanelTemplate。

将一堆垂直堆叠的图像包裹在WrapPanel 中不会使它们成为水平的。您需要将布局更改为：

<ItemsControl Name="images" >
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Link}" Stretch="None" ></Image>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>