1

I have a requirement to dynamically create a WPF Grid that has 3 columns and the number of rows will depend on the amount of panels I need. The first panel will be in grid location 0,0 the next in 0,1 -> 0,2 -> 1,0 -> 1,1 etc.. So if I needed 20 panels the grid would have 3 cols and 7 rows. And the Grid should fill the whole window

And each panel should have a heading and a progress bar on it. I guess I would have my panel as a seperate user control

I'm starting out with WPF so any help would be great

Thanks a lot

2
  • what code do I have to write to acheive the above?
    – Bob
    Jul 25, 2012 at 17:05
  • 1
    what code did you try up to now?
    – Zak
    Jul 25, 2012 at 17:06

2 Answers 2

1

The following example shows how you can create the number of rows and columns and put objects (in this case a Label) into each cell. See if you can extrapolate from there.

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);
        }
    }
}

This examples starts with a nearly completely empty XAML. All it has is the Window element.

1

You'll have to do it in code-behind as far as I know.

You'll just divide the needed cells by 3 and round up.

Derive a control from grid. Create a custom attached property for cell number. Then override MeasureOverride, and set the grid rowdefinitions by the rounded-up row count. Then set grid.row and grid.column on each item to correspond to the cell number you read from the controls.

Then call the default 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);
    }
}

Obviously you could do this without the GridCell property. And there's a few bugs in there if you skip grid cells, but you should be able to adapt this code to your use.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.