We have added some new features and improved the usability of other features in the XAML designer grid control in the Visual Studio 11 Developer Preview  and we are excited to describe these enhancements to you. Below is a screen shot taken from the Visual Studio 11 Developer Preview and it shows a number of the enhancements to grids. We will step through these one at a time.

Figure 1. Screenshot showing some of the new features of the Grid control.

In this post we will discuss the following features:

· Menu: new mini toolbar menu for quick editing

· Grid Rail: enhanced type and size information

· Take/Make Space: additional options for editing column and grid widths

· Icons: new icons

· Zero-Sized Columns and Rows: adding controls into zero-sized columns and rows

Menu

The biggest visual change is the mini toolbar that appears when you hover the mouse pointer over the top of a grid column or the left of a grid row. The mini toolbar menu will give you the following options:

1. Change the type of the grid row/column between Star/Pixel/Auto.

2. Select a row/column for resizing or deleting. The delete command is also in the toolbar menu.

3. Add a row/column.

4. Move a row/column up/down or left/right.

The screenshot above comes from an Auto-sized grid column and that is why the menu commands all refer to columns. If the mini-toolbar were invoked on a row then all the commands would refer to row in their text.

Finally the icon to the left of the downward arrow is actually a button you can click to cycle through the various row/column types – star, pixel, or auto.

Type and Size in Grid Rail

In previous versions of Visual Studio users were able to see the size and type of grid row/column in the grid rail. The figure below shows a grid rail. A grid rail is at the top of column or left side of a row. There is a shaded area that contains the width and type of grid row/column. This has been enhanced for Visual Studio 11 Developer Preview.

Figure 2. Grid Rail

Layout is a complicated topic. For a good discussion about the use of the grid container in the context of Expression Blend 4.0, you can refer to the MSDN article, Using the Grid Layout Panel. The following few sentences assume you understand star, auto, and pixel sizing, if not take a look at the MSDN article. Grids are super useful and important in dynamic UI layouts.

Looking at the screen shot above you can see that column 0 and column 1 are star width and each take up 50% of the remaining space after columns 2 and 3 are computed. Column 2 is auto sized and 110 pixels wide. Finally column 3 is pixel sized and is 114 pixels wide. We attempt to make the Star sized columns as small an integer as we can but we only try a fixed number of sizes in an attempt to reduce the size to the lowest common denominator. If you slid the column adorner between the two 1* columns back and forth slowly you would see fairly large number most of the time but every once in a while you would get a 3*/2*, 9*/16*, etc.

Take/Make space

In previous versions users were only able to change the width of a single row/column at a cost of space in adjacent columns. The default interaction of resizing a row is the same as in previous versions, however if you use the Shiftkey in addition to your mouse you can make a single column or row larger or smaller without changing the width of any of the other rows/columns in the grid. Holding the Shift key while sizing a row/column makes the entire grid larger or smaller as you resize.

For example here is a grid which is star sized and divided into 2 columns that each take 50% of the space.

Figure 3. 50/50 Grid

If you hold the Shiftkey and move the column separator to the left you can, with sufficient dexterity, get to the grid layout in Figure 4. The grid is now 25% smaller and the column 0 is 33% of the grid while column 1 consumes the rest of the grid. This is a great feature if you need to make a row/column a little bigger because your Spanish or German localized strings are a little longer than you expected. You can adjust the size of a single column without modifying the rest of your application’s layout.

Figure 4. 33/66 Grid layout.

New Icons

Sometimes very small changes make something feel very different and better. That’s how I feel about the new grid icons.

Figure 5. Row/Column type icons for Star, Pixel, and Auto.

Adding Controls to 0 sized Auto Rows/Columns

We also added a gesture to place controls in smaller sized rows/columns and have the containing row/column expand to fit the contents. This works for 0 sized columns/rows as well. Let’s take a look at this process via some screen shots from the Visual Studio 11 Developer Preview.

Figure 6 shows a grid where column 0 is auto sized but doesn’t have any content and thus the width is 0 px. Column 1 contains a 75 px button and is star sized but it could be pixel or star sized for this example.

Figure 6. Column 0 is Auto and Column 2 contains default sized button.

Let’s assume the user wants to move the button from column 1 to column 0. In previous versions of Visual Studio this would have been a bit painful to accomplish via the XAML Designer. However in the Visual Studio 11 Developer Preview a user can simply drag the button over the collapsed column and he/she will see a tooltip that tells them to press Tab to insert the control in the destination – see Figure 7.

Figure 7. Infotip when moving controls over an auto sized 0 width colmun.

The user presses Tab and the control is placed in the column. He/she can move the control up and down in the column but it’s locked to the column until the mouse button is released. The column is now 75 pixels wide, which is the width of the button placed in the column, see Figure 8. Of course developers can undo this change. That’s all there is to it.

Figure 8. Button in auto sized column.

Conclusion

We think we have made some quality usability improvements with these new Grid features. These changes are available for you to use in the Visual Studio 11 Developer Preview. We’d love to hear any feedback on these features as well as other changes you would like to see in the XAML designer. Please feel free to send us mail at blendfeedback@microsoft.com , leave a comment on this blog post, or use the contact us form on the blog.

You can also ask questions and talk with other users in our forum: Tools for Metro Style Apps.

Thanks for reading.

Erik Arthur (Xbox Live: Doc), Expression Blend / XAML Designer for VS Program Manager

Jeffrey Ferman, Expression Blend / XAML Designer for VS Program Manager