Click here to Skip to main content
15,883,278 members
Articles / Mobile Apps / Windows Mobile

Unleashing Grids in Expression Blend and it's Major Role in Responsive Design

Rate me:
Please Sign up or sign in to vote.
4.20/5 (4 votes)
31 Aug 2014CPOL4 min read 17.1K   3   6
Unleashing Grids in Expression Blend and it's Major Role in Responsive Design

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, 


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!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
User Interface Analyst Procesium
Pakistan Pakistan
Expressions Blend Guy from Pakistan. Trying to make .NET developer's life easier by use of BLEND during their development.

Comments and Discussions

GeneralMy vote of 1 Pin
Member 5649752-Sep-14 5:24
professionalMember 5649752-Sep-14 5:24 
GeneralRe: My vote of 1 Pin
Saad_Mahmood2-Sep-14 14:37
professionalSaad_Mahmood2-Sep-14 14:37 
GeneralMy vote of 1 Pin
Member 5649752-Sep-14 5:23
professionalMember 5649752-Sep-14 5:23 
GeneralRe: My vote of 1 Pin
Saad_Mahmood2-Sep-14 14:46
professionalSaad_Mahmood2-Sep-14 14:46 
General[My vote of 1] My vote 1 Pin
Member 5649752-Sep-14 5:22
professionalMember 5649752-Sep-14 5:22 
GeneralRe: [My vote of 1] My vote 1 Pin
Saad_Mahmood2-Sep-14 14:46
professionalSaad_Mahmood2-Sep-14 14:46 
I believe sir you can read the level of expertise Smile | :) Beginner written there. A writer can't vote .
Expression BLEND guy from Pakistan

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.