WPF Grid: Is there an easy way to readjust the row items if I need to insert new rows?

Question

It appears that grid row and column definitions are hard-coded like this:

Grid.Row="3" Grid.Column="1"

I am in the middle of development on a new WPF app and I am having to constantly add and delete new rows from my grid as the client makes up their mind on how the form should look. I am discovering that this is quite a tedious task. If insert a row near the top, I have to manually change all the row indexes in the XAML beneath the row I just inserted.

Is there an easy way to auto-adjust all the rows?

Answer 1

A Grid is a grid and the rows and columns are numbered for a specific reason. It's like a piece of graph paper sliced up into a fixed numbers of squares. Because the numbers of rows and columns is fixed you can do powerful things like row and column spanning. Conversely, this is not flexible for a variable number of rows or columns.

If you need a variable number of rows, or you are continually adding rows at design time, then it may be that the Grid is not the best design element for you. Or better still, you can use the Grid in combination with another layout element to get the flexibility you need.

For example, you can put all your variable rows into a single Grid row and now your grid row count doesn't change any more. But then you will need a layout element that supports a variable number of rows to put into that Grid row. Well, there are a lot of them to choose from but two for example that are useful are StackPanel and DockPanel.

The layout element DockPanel in particular is very powerful for variable numbers of rows or columns, particularly when used as DockPanels within DockPanels or other combinations. All you need to handle this layout problem is to subdivide and conquer!

Here's an introduction to DockPanel: WPF Tutorial: Dock Panel

Answer 2

In Visual Studio 2015 you can also hover over the edge of a row and a little dropdown box will appear. When you click the down arrow two of the options are "move row before" and "move row after". That's the best way I've found.

Example image:

Answer 3

There is no easy way to auto-adjust your rows/columns for a Grid.

A potential alternative that I've used in the past is a UniformGrid since it doesn't need a Row/Column reference in each item. It's nice for blocking out placeholders for the data.

If you are doing initial designs, I'd recommend just using the Drag/Drop interface in visual studio or a design tool like Balsamiq or Blend. Balsamiq is my favorite since it intentionally doesn't look like an actual application, so clients don't get hung up on the actual appearance of the thing and focus on the data instead.

Answer 4

I know this is a super old question but in case anyone else comes across it, in Visual Studio 2013 (maybe earlier too I'm not sure) you can just hover over the edge of the grid and it will let you split a row into two rows.

It will make the rows a set number height so you will probably need to go back and change then to 'Auto' or '*' or whatever you would like to use. It also makes anything in the original row span both rows so you would need to remove the RowSpan="2" attribute on those items and put them into the correct rows, but it will push all items in lower rows down automatically.

It's not fully automatic and there is a little cleanup, but if you have a lot of rows it's faster than renumbering everything manually.