Unleashing Grids in Expression Blend

It's been really common that every beginner designer or developer use a Grid as a container to place controls, but they never know how grids play a really important part in designing applications and how much praise a grid provides for designers and developers. Today we are here for a gentle go-through of why grids are so important and how they facilitate the easy design of some amazing interfaces.

Grids in Expression Blend

Expression Blend was made to help the designer. A Grid container is a really vital control and it's usefullness has amazed me using Expression Blend.

Variable and Defined Margins

Let's create a WPF project in Expression Blend and place a Grid inside a Grid so that the new Grid is in the center.





As you see, a new Grid has been added inside the old grid. Here is something to notice, you might see that the lines I marked with yellow are dotted and the margin lines encircled with red pen are those that are solid.

Here you would see that the ones with the Yellow color are called Variable Margins.

It means that if you resize the window these margins may change but at the left side that are in the Red color are called defined margins and when a window is resized, the amount of these margins remains the same as in the image above. The margins remain the same from the left and the top since they are not variable margins.



A Defined Margin can be changed into a Variable Margin by clicking on the link encircled with the Red pen.

NOTE: If you change the left margin to a Variable Margin then the margin of the other side will become a solid margin since the application needs a reference margin from either side. The same thing happens with the upper and lower margins.

If a rectangle is placed inside the Grid and set right and the upper margins are defined then you will see that upon resizing the window the amount of margin from the right side and the upper side will remain constant and only the variable margins will change. This is what could be really useful when designing the application.

Here are the snapshots from which it can be easily viewed.





Role of Row Span and Column Span

When you talk about row spans and the columns spans, there will exist the question in your mind of what Row Spans and Columns Spans are. For convenience you can define them as sub-columns and sub-rows where the Grid is the parent box.

What's its use? Actually placing controls manually and then shifting them is really hectic, why not give the control to you how the rows and columns are placed? So that when you need to move the control to some other row so you need not drag many times to deal with the margins. You just need to change the row or the column and yes you are done with that.

Let's go through the example showing how it works.



Here you will notice some marks, yes the Red ones are spans that were just created to divide the grid. If I divide the grid into four parts then it would work as quadrants of the graph and you may see that the very first quadrant is (0,0) and the second quadrant is (1,0). The same as what you need to provide to the control.



Here is a control that is a rectangle and it has been placed on the very first quadrant, 0,0 .





In the preceding image, in the properties I have just changed the row to 1 and the column number remains the same but you see that the very rectangle control is now moved downward since it is the 1,0 quadrant.

The splits created also controls the percentage of the area as you resize the grid, you will notice that the area expands or contracts depending on the percentage it has been given.

Here is an example of it.





There it is and how it works.

Conclusion

Today we discussed how grids play an important role and how a designer or a developer can use girds effectively to create amazing and responsive designs that adjust on screens easily. I hope you enjoyed this read.

Stay tuned and happy coding!

For more learning : Blend Unleashed.