Expression Blend is a tool with which we can design our layout in an easy way. This tool generates XAML for you automatically and yes this tool provides you enough leverage to build whatever design you want with just mouse click, all the XAML work will be done by Expression Blend.

Here, I will be telling you about the expression blend and one of its tool. This blog will guide you to use a tool of expression blend named as Grid. Now, the question arises what is Grid? , why to use Grid? and how to use Grid in our Application?


      A grid is type of the container which helps in designing a layout of our application.So, Grid is basically a container that contains different objects which helps us in sizing the objects we used so that we can use our application in different devices.The grid panel is the most flexible layout container compared to other layout containers that are designed to manage more specific layout functionality. Microsoft Expression Blend offers two layout editing modes for working with grid panels:

  •  Canvas layout mode (default mode) provides an editing experience that is just like editing inside a canvas panel. In this mode, when you move column and row dividers  that you’ve set, the elements inside those rows and columns stay in place.

  •  Grid layout mode (advanced) provides more advanced layout functionality. In this mode, the grid panel in design time behaves like the run-time behavior of the grid.

  • You can switch between the two modes by clicking the mode icon in the upper-left corner when a grid panel is selected, or by selecting or clearing the Use grid layout mode check box in the Artboard section of the Options dialog box (on the Tools menu).

why we need to use Grid:

the Question is if we can use HEIGHT, WIDTH and MARGIN option to size our object then why we use GRID? this is because we want to use our application in different devices having different LCD’s size. when we use margins it will work in just the device on which we tested the application during development. So, we use GRID. 

Using Grid in our Application:

Now, that we want to use Grid in our application design process we should know the way that how can we implement it.
So in order to use it we need  <Grid> tag and it’s closing tag as well </ Grid>. now that we created Grid in our application we can use nested grid as well in our application to design our layout according to the need of user. when you click on link on right panel of screen. you can adjust it’s color, Size, shape and other different things.

Add a grid panel to a document by using the layout container sub-menu or the Asset Library  in the Toolbox. Arrangement of objects in a grid panel that has been divided into three rows and three columns.



           As we have seen the advantages of Grid layout panel. so, i would recommend you to use this panel layout tool as it provides easiness to user and more control over different objects and grids.