Unleashing "Grids" in Expression Blend
It's been really common that every beginner designer of developer use GRID as a container to put controls, but they never know that how grids play a really important part in designing application and how much felicitation grid provides to designer and developer, today we are here for a gentle go through that why grids are so important and how they facilitate us in designing some amazing interfaces easily.
Grids in Expression Blend
Expression Blend was made to facilitate the designer, Grid container is really vital control and it's usability has me made amazing using Expression Blend.
Variable and Defined Margins:
Lets create a WPF project in Expression Blend and place a Grid inside a Grid so that the new Grid is in center.
as you see that a new Grid has been added inside old grid. Here is something to notice, you might see that the lines I marked with yellow are dotted and the margin lines a encircled with red pen are those which are of solid.
Here you would see that the ones with YELLOW color are called VARIABLE MARGINS
it means that if you resize the window these margins may change but at the left side which are in RED color are called DEFINED MARGINS and when Window is resized, the amount of these margins remains same as in image above margins remain the same from LEFT and TOP as they are not Variable margins.
A DEFINED MARGIN can be changed into VARIABLE MARGIN by clicking on the LINK that is encircled with RED pen.
NOTE: You would notice that if you would change margin of left side to VARIABLE margin the margin of other side wold become a solid margin as application needs of have reference margin form either side, same case happens with the upper and lower margins.
If a place a rectangle inside the GRID and set right ant upper margins DEFINED then you would notice on resizing the window the amount of margin from right side and the upper side will remain constant and only VARIABLE margins would change. This is what could be really useful while designing the application.
Here are the snapshots in which it can be easily viewed,
Role of Row Span and Column Span:
When you talk about row spans and the columns spans, there comes a question in your mind that what are ROW Spans and COLUMNS spans. For easiness you can define them as sub column and sub rows where Grid is the parent box.
What's its use? Actually placing controls manually and then shifting them is really hectic, why not you give the control the you are placed in this row and this column? So that when you have to move the control to some other row you need not to drag and drop the again and again and 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 that how it works,
Here you would notice some marks, yes the red ones are spans a just created to divide the grid. If i divide the grid into four parts it would work a quadrants of graph and you may see that the very first quadrant is (0,0) , the second quadrant is (1,0). Same is what you have to provide to the control.
Here is a control that is a rectangle and it has been placed on the very first quadrant that is 0,0 .
in the above image , in 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 as it is 1,0 quadrant.
The splits created also controls the percentage of the area as you resize the grid, you would notice that the area expands or contracts according to 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 designes that adjust on screens easily. I hope you enjoyed this read,
Stay tuned and happy coding!
