WPF GridPanel Tutorial

Okay!! Finally, our very first WPF Grid Panel Tutorial is ready! It's the very first time we are doing this, so do pardon us if it is not as great as what you normally see in CodeProject or CSharpCorner. We wanted to come out with our own version of tutorials, because we want to approach the tutorial and our readers from a different approach, or angle, whichever way you put it.

In our future tutorials, we will also be using the same approach, and what approach will that be? We want to use the Designer Drag-and-Drop approach, followed by looking at the underlying codes, to have a better understanding of why, and how the layout looks the way it is.

Let's get started!! So what do you need to get started?

1. Visual Studio 2012 RC / Visual Studio 2010. We wanted to make use of Visual Studio 2012 RC because in the next 6 months or so, this is going to be stable flagship product release, and many people will already have downloaded it and tried it out by now. Nonetheless, if you do not have VS2012, not worries, the example discussed in the posts will be able to run in Visual Studio 2010 as well.

Step One: Creating a new WPF project in Visual Studio 2012 RC/2010

Start by creating a new Project from either the toolbar at the top of the Visual Studio IDE, or under the File menu.

In the New Project window, select "Windows" under the Visual C# project tree. In the list of available templates, choose WPF Application. Name the application "GridPanelExample", or you can name it anything you want. Once that is done, just click on "OK" button. The next thing you can see is the default layout view, as depicted below:

From the above screen capture, you can see that I have identified the 2 sides of the split view. This split view can be switched between viewing vertically, or horizontally. I'm someone whose accustomed to reading left to right, so I prefer to place the (1) XAML view on the left, and the (2) design view on the right. If the images in this tutorial seems small, you can click on the image and it will enlarge so you can see more clearly.

Step 2: Setting up the Grid using the Design View

Creating Grid rows and columns are so easy, you won't even believe how easy it is. I think even my grandma is able to do this without any hiccups! Haha! Just kidding, to create a column or row, all you need to do is to mouse over the edge of the application's design edge. You can see from the screen capture below:

I have labeled the column guide in yellow (1). When you place your cursor just outside the edge, you will see the yellow guide. all you need to do is to move your cursor along the edge until you find the dimension that you want. Once you have found the sweet spot, just click on that. What will happen in like the row guide (2). It becomes blue color! It's that simple.

But what does it like in the code behind?

If you look over at your XAML view, you will notice 2 sections of coding that was not there before. There are the <Grid.ColumnDefinitions></Grid.ColumnDefinitions> section, as well as the <Grid.RowDefinitions></Grid.RowDefinitions>. Now, as we know, real like applications usually won't be fixed in size. Especially if you are building an application like Word, or Excel, or any desktop application for that matter. You do not want your layout to stay fixed in a dimension, rather you will want it to be able to stretch and expand proportionally together with the size of the window. As you see the codes in the XAML, here is what it looks like:

<ColumnDefinition Width="368*" />

The * is there for the sole purpose for telling the application that the minimum width of that column will be 368, and it will expand proportionally larger dependent on the stretching of the window. See the screen shot below:

As I drag the window larger, the proportion of the Rows and Columns also expand, yet maintaining the size that is most ideal. The reason for doing all this is so that if you have content in the bottom left area, it will shrink, and wrap depending on the size of the content area. This is what we ultimately achieve. However, if you want the sidebar to be fixed, all you have to do is to remove the "*" from the ColumnDefinition element.

Step 3: Let's Add Some Controls to the Grid

To add a control is very very easy! Just open the Toolbox if it is not already opened. And click the TextBlock control, and drag it to the first Grid Row and Column. You can see from the bottom screen capture:

I have done something a little extra to this example, that I hope you will be able to bring away with you. Once you have dropped the TextBlock control in the grid, next thing you can do is to drag the edges of the TextBlock, until it snaps into place at the margin area of the Grid cell's content area. When you do this, the size of the TextBlock will also automatically stretch according to the size of the window. How amazing is that!

Now, let's add another StackPanel to the right sidebar at the bottom. Once again, open up your ToolBox, and select the StackPanel controls and drop it onto the grid as so:

Once you have done so, keep it selected, as we are going to take a look at the properties panel in a quick moment. Same like the what we did with the TextBlock earlier, drag the left edge of the StackPanel until it snaps to the margin on the right. Now your StackPanel looks right in the center of the right sidebar. Easy!

Next, properties:

As you notice from the screen capture above, I have mouseover the Orientation property under the Layout Properties Panel. The little tooltip is extremely helpful especially when you are new to WPF, and you are not sure which property does what. And this tooltip even displays the namespace that the property derives from.

Moving on, StackPanels have a Vertical orientation by default everything you create them. Next thing, just to make the layout look a little more interesting, let's add some controls to the side panel. 

1. Drag a TextBlock into the StackPanel, it will automatically be placed as the first item at the top.

2. Drag a TextBox into the StackPanel.

3. Repeat 1. and 2. again.

4. Add a Login button at the bottom of the StackPanel. If the button is not displaying, its likely that your StackPanel's height is too small, so just enlarge the StackPanel downwards by clicking and dragging the edge.

If you see the screen capture above, you noticed that you have just created a simple login panel! Now, this blog post will not be covering anything on Data Binding, or using WCF RIA Services yet, but for now, just leave it as it is. Next thing you want to do is to enhance the layout of the contents. Remember, never leave the controls in a fix dimension, unless you deliberately want it to be in a fixed dimension. For the purpose of this tutorial, we will make the following modifications:

If you enlarge the screen capture above, you will noticed that I have highlighted some of the attributes of the TextBlock and TextBox properties. I have now set the HorizontalAlignment to "Stretch". This is a new property in WPF. And in the TextBlock, I have modified the Margin to be "5". By doing this, the controls will now stretch when the window is enlarged, and when the StackPanel also widens up.

This is a normal view.

Stretched View.

Well, that is how simple it is to create a Grid Panel in WPF, and not only that, you have witness the power of laying out contents within the Rows and Columns within the Grid Panel. Grid is probably the most commonly used layout control you will find in every single application. We will definitely will cover more on the other Panels available in WPF in the coming weeks, so do stay tuned.

As this is our first time producing our own tutorial, please do help us to improve by posting your feedback and comments, and we will gladly listen to your suggestions if they are good. And if you like the post, go ahead and share it!

Thanks a lot everyone!