c# - Silverlight WrapPanel 儿童

Question

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

最终目标是有一个缩略图网格（13 个拇指水平跨越 950 像素，垂直 6 个拇指）。

Answer 1

When you're faced with adding items in code, generally there's a better way.

How about making a ListBox and setting its ItemsSource to your list (or binding it to the DataContext). Make a DataTemplate to display your thumbnail + info and then (this is the important part) make a ItemsPanelTemplate using a WrapPanel.

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

Then in your code, once you've got your data from your JSON call:

this.ImageThumbnails.DataContext = thumbnailListFromJSON;

Now if your list is an ObservableCollection, then any changes to the list will be automatically reflected in your UI.

(The above code should be treated as pseudo-code - obviously you're going to have to change it to reflect your data structure)

Edit: added ScrollViewer.HorizontalScrollBarVisibility="Disabled" to ListBox. This is important because it stops the scrollviewer expanding infinitely in the horizontal direction. Without this WrapPanel becomes a 1-row listbox.

Answer 2

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

Answer 3

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

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