如何创建包含面板的动态网格答案

【问题标题】：How to create a dynamic grid containing panels如何创建包含面板的动态网格
【发布时间】：2012-07-24 04:33:48
【问题描述】：

我需要动态创建一个具有 3 列的 WPF 网格，行数将取决于我需要的面板数量。第一个面板将在网格位置 0,0 下一个在 0,1 -> 0,2 -> 1,0 -> 1,1 等。所以如果我需要 20 个面板，网格将有 3 个列和 7 行.网格应该填满整个窗口

每个面板都应该有一个标题和一个进度条。我想我会将面板作为单独的用户控件

我开始使用 WPF，所以任何帮助都会很棒

非常感谢

【问题讨论】：

我必须编写什么代码才能实现上述目标？
到目前为止您尝试了哪些代码？

标签： c# .net wpf

【解决方案1】：

据我所知，您必须在代码隐藏中执行此操作。

您只需将所需的单元格除以 3 并四舍五入。

从网格派生控件。为单元格编号创建自定义附加属性。然后覆盖 MeasureOverride，并通过四舍五入的行数设置网格行定义。然后在每个项目上设置 grid.row 和 grid.column 以对应于您从控件中读取的单元格编号。

然后调用默认的grid.measureoverride。

public class ArrangeGrid : Grid
{
    public ArrangeGrid()
    {
        ColumnDefinitions.Add(new ColumnDefinition());
        ColumnDefinitions.Add(new ColumnDefinition());
        ColumnDefinitions.Add(new ColumnDefinition());
    }
    public static DependencyProperty GridCellProperty = DependencyProperty.RegisterAttached("GridCell", typeof(int), typeof(ArrangeGrid));

    public static void SetGridCell(UIElement element, int value)
    {
        element.SetValue(ArrangeGrid.GridCellProperty, value);
    }

    [AttachedPropertyBrowsableForChildren]
    public static int GetGridCell(UIElement element)
    {
        return (int)element.GetValue(ArrangeGrid.GridCellProperty);
    }

    protected override Size MeasureOverride(Size constraint)
    {
        RowDefinitions.Clear();

        int rowCount = this.Children.Count / 3;
        if (this.Children.Count % 3 != 0)
        {
            rowCount += 1;
        }

        while (RowDefinitions.Count < rowCount)
        {
            RowDefinitions.Add(new RowDefinition());
        }

        foreach (var child in this.Children)
        {

            int gridCell = ArrangeGrid.GetGridCell((UIElement)child);
            int gridRow = gridCell / 3;
            int gridCol = gridCell % 3;

            ((UIElement)child).SetValue(Grid.RowProperty, gridRow);
            ((UIElement)child).SetValue(Grid.ColumnProperty, gridCol);

        }

        return base.MeasureOverride(constraint);
    }
}

显然，您可以在没有 GridCell 属性的情况下执行此操作。如果您跳过网格单元格，那里会有一些错误，但您应该能够调整此代码以适应您的使用。

【讨论】：

【解决方案2】：

以下示例显示了如何创建行数和列数并将对象（在本例中为标签）放入每个单元格。看看你是否可以从那里推断出来。

public partial class MainWindow : Window
{
    Grid grid1;
    public MainWindow()
    {
        InitializeComponent();

        int cellCount = 14;
        int numCols = 3;
        int numRows = (cellCount + 1) / numCols;
        grid1 = new Grid();

        this.AddChild(grid1);

        for(int i=0; i<numCols; ++i)
            this.grid1.ColumnDefinitions.Add(new ColumnDefinition());
        for (int i = 0; i < numRows; ++i)
            this.grid1.RowDefinitions.Add(new RowDefinition());

        foreach (var g in this.grid1.RowDefinitions)
        {
            g.Height = new GridLength(100);
        }

        foreach (var g in grid1.ColumnDefinitions)
        {
            g.Width = new GridLength(100);
        }

        for(int i=0; i<cellCount; ++i)
        {
            int idx = grid1.Children.Add(new Label());
            Label x = grid1.Children[idx] as Label;

            x.Content = "Cell " + i;
            x.SetValue(Grid.RowProperty, i/numCols);
            x.SetValue(Grid.ColumnProperty, i % numCols);
        }
    }
}

此示例以几乎完全为空的 XAML 开始。它只有 Window 元素。

【讨论】：