Silverlight WrapPanel 儿童答案

【问题标题】：Silverlight WrapPanel ChildrenSilverlight WrapPanel 儿童
【发布时间】：2009-01-26 17:12:47
【问题描述】：

在 silverlight 中将子项添加到 WrapPanel 的最佳方法是什么？我正在使用 C#，并且正在读取一个 JSON 对象，其中包含带有缩略图和相关信息的图像。

最终目标是生成一个缩略图网格（水平方向 13 个拇指，横向 950 像素，垂直方向 6 个拇指）。

【问题讨论】：

【解决方案1】：

当您面临在代码中添加项目时，通常会有更好的方法。

如何制作一个 ListBox 并将其 ItemsSource 设置为您的列表（或将其绑定到 DataContext）。制作一个 DataTemplate 以显示您的缩略图 + 信息，然后（这是重要部分）使用 WrapPanel 制作一个 ItemsPanelTemplate。

<Grid x:Name="ImageThumbnails">
    <ListBox 
        ItemsSource="{Binding}" 
        Width="950"
        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
        >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <Image Source="{Binding Thumbnail}" Width="80" Height="60"/>
                    <TextBlock Text="{Binding ImageName}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
     </ListBox>
</Grid>

然后在您的代码中，一旦您从 JSON 调用中获取数据：

this.ImageThumbnails.DataContext = thumbnailListFromJSON;

现在，如果您的列表是 ObservableCollection，那么对列表的任何更改都会自动反映在您的 UI 中。

（以上代码应被视为伪代码 - 显然您将不得不对其进行更改以反映您的数据结构）

编辑：将 ScrollViewer.HorizontalScrollBarVisibility="Disabled" 添加到 ListBox。这很重要，因为它会阻止滚动查看器在水平方向上无限扩展。没有这个 WrapPanel 就会变成一个 1 行的列表框。

【讨论】：

【解决方案2】：

WrapPanel 是从 Panel 派生的，因此您可以只使用 Children.Add(control)。 WrapPanel 将负责所有布局，这是它的工作。

【讨论】：

【解决方案3】：

UniformGrid 非常适合这种情况。不幸的是，它不是 Silverlight 框架的一部分。但是，有一些 WPF 版本的端口可用。

http://www.jeff.wilcox.name/2009/01/uniform-grid/

【讨论】：