Question

我正在使用ModernUI界面创建WPF应用程序。它是一种照片库。图像存储在某个文件夹中，并根据数据库中的相应记录进行检索。所以我的ViewModel从数据库获取信息并将“URI”列绑定到Image的Source属性。

我需要做的是将这些图像定位到网格中的视图。图像的宽度和高度是恒定的。这里的挑战是在运行之前我不知道我有多少元素，所以Grid应该动态创建。如果根据网格的宽度自动计算列数，我会更好。例如，图像宽度为200，右边距为50，因此如果网格（或父元素，没关系）宽度为800，那么我们有3列。但是我可以明确地设置列数;最重要的是定位图像，使其看起来像一个网格。

ViewModel返回元素的ObservableCollection（可以更改为任何必要的结构）。我非常欣赏定义了模板的XAML代码。

Answer 1

也许您可以尝试动态设置grid.column和grid.row属性。检查网格的可能宽度和高度，以指定可放置的图片数量。然后定义网格的行和列并添加图像。

         for(amount of images) // define rows and colums
         {
            ColumnDefinition colDef = new ColumnDefinition();
            colDef.Width = new GridLength(specifiedwidth);
            yourgrid.ColumnDefinitions.Add(colDef);

            RowDefinition rowDef = new RowDefinition();
            rowDef.Height = new GridLength(specifiedheight);
            yourgrid.RowDefinition.Add(rowDef);
         }

         for(amount of images) // add your images to the grid
         {
            yourgrid.Children.Add(yourimage);

            Grid.SetColumn(yourimage, index); //set column index
            Grid.SetRow(yourimage, index); // set row index
         }

Answer 2

您只需在ListBox类型为ItemsPanelTemplate的{{1}}中显示它们：

WrapPanel

这应该水平添加<ListBox ItemsSource="{Binding ImageUrls}"> <ListBox.ItemsPanel> <ItemsPanelTemplate> <WrapPanel /> </ItemsPanelTemplate> </ListBox.ItemsPanel> <ListBox.ItemTemplate> <Image Source="{Binding}" Stretch="None" /> </ListBox.ItemTemplate> </ListBox>控件，直到没有空间，然后将它们包装到下一行，依此类推。如果你说Image大小不变，那么这应该会让你看起来像你。当然，您需要在集合中使用正确格式的Image来源。

在WPF中动态地将元素定位到网格

2 个答案: