Basics of Grid Editing and GridSplitters

The Windows Presentation Foundation has introduced a new and powerful layout container called the Grid. At first, the Grid may seem intimidating, but as you learn how it works, you'll see just how powerful it is. In this demo, we'll reproduce the functionality of Microsoft's Live Messenger, and allow our user to adjust the space given to the various layout components.

I've already drawn a Rectangle that represents the history of the conversation, a TextBox for the user to enter text and a Button to 'send' that text to whoever I'm talking to.

For starters, press F5, and take a look at how the application behaves. As you resize the application, you'll notice that the size of the button (both width and height) never change. The textbox gets wider and narrower, but its height never changes, and the large rectangle just grows to whatever size it can to take up the maximum space.

But, with the application running, you'll see that you can't interactively change the amount of size given to the button or text box. We'll add GridSplitters here, to add that functionality.

Before you can add a GridSplitter, you need to add a divider for the GridSplitter to interact with. To do this, click on the grey-blue bar just to the left of the window at a point just between the bottom of the rectangle and the top of the text box. It should look like this:

Before we go on, press F5 and look at what's changed. Now that we've created a new row divider, the default behavior has changed. If you resize the application, the button and text box will both get shorter and taller.

Go back into Blend, and switch to Grid Layout mode. You do this by clicking the small rectangle just to the top left of the window on your artboard. When you click it, several new adorners are displayed.

These new adorners display which rows and columns can change in width or height. By clicking on the lock associated with the TextBox and Button row, switching it to a 'locked' icon, that row will keep its size when the application is resized. Press F5, and you'll see what I mean.

Now, we need to actually add the GridSplitter. It's in the Asset Library, so you'll need to bring it up by clicking on the two Chevrons at the very bottom of the toolbar.

Find the GridSplitter and click on it. It will become the active tool, and we can add one to our artboard. If you can't see it, you can type any part of "GridSplitter" in the search box, and Blend will find the tool for you.

Now, drag out a small GridSplitter between the TextBox and the Rectangle. Don't worry about the size, we'll adjust that in the Property Inspector in a moment.

(I zoomed in here, to make it a little easier, but what you're drawing is that small grey rectangle just to the left of my cursor).

Now, switch to the Property Inspector, and move down to the Layout Category. The things that you want to change are:

• Set the Height to something comfortable. Usually, at least 4 or 5 pixels are good.
• Make sure the Horizontal Alignment is Stretch (the far right icon)
• Reset the Margin by clicking the small white square just to the right of the margin property and choosing Reset. Alternatively, you can just set all the
• values to 0, but reset is faster. Your properties should now look like:

If you've done everything correctly, your grid splitter should now extend all the way across your window. Press F5 and look at what happens when you click this splitter and drag it up or down.