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

Posted 2023-02-21

【中文标题】在 WPF 中动态地将元素定位到网格中

【英文标题】：Position elements to a grid dynamically in WPF

【发布时间】：2013-12-02 15:20:32

【问题描述】：

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

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

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

【参考方案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
         

【参考方案2】：

您可以将它们显示在具有ItemsPanelTemplate 类型为WrapPanel 的ListBox 中：

<ListBox ItemsSource="Binding ImageUrls">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <Image Source="Binding" Stretch="None" />
    </ListBox.ItemTemplate>
</ListBox>

这应该水平添加Image 控件，直到没有更多空间，然后它将它们包装到下一行，依此类推。如果Image 大小如您所说是不变的，那么这应该会给您您所追求的外观。当然，您需要将您的 Image 来源以正确的格式保存在集合中。

【讨论】：

这几乎是我想要的，而且它给了我一些新的想法。无论如何，非常感谢。