When you have an element inside a grid the following properties control how the element is positioned and sized on the scene:

  1. Actual Height and Width.
  2. Margins(top,bottom,left and right).
  3. Alignment(horizontal and vertical alignment)
  4. Transforms on it(layout and render transforms, more about this on a a different post)
  5. Content(children).
  6. Parent.

Thats a lot of properties affecting the size and position of the object! Blend tries to make it easier for you by auto setting some of these properties. However if you don't like what Blend sets it is still possible for you to manually override each of these properties. The purpose of this post is to explain our algorithm so that you know what properties are auto set and how and also to get feed back on how to improve this algorithm.

 This post is primarily directed at elements whose parent layout container is a grid. For novices WPF provides a lot of panels like grid, canvas, stack panel etc. By default when you create a project in Blend the root panel(which is named LayoutRoot) is a grid. Inside this grid you place any elements that you like.

Before we dig deep into how Blend auto sets the above properties for you let us take a quick look at how each of the above properties on an element affect it:

  1. Height and Width: If the height(or width) is an absolute number(like say 45) then the element is of that height. However they could also be of another value called 'Auto'. What auto means is that size is dynamically adjusted based upon the elements content (For example a button's height could be determined by the height of all its children. So if you add another child the height adjusts automatically) or the element's Parent t(For example you could have a table that sizes itself as the parent resizes). The choice of how it sizes(based upon parent or content) is determined by what alignment you set on the element. More about this when we speak about the alignments.
  2. Margins: Margins clip the elements. There are four types of margins top,bottom,left and right. If an element has absolute height(width) set and its top and bottom margins are set to such values that the height(width) cannot be supported then the element gets clipped. If the height(width) is smaller than the top and bottom margins then the full height is displayed. Similarly for auto sizing elements the height(width) cannot grow beyond the margins.
  3. Alignments: There are 2 types of alignments. Horizontal and Vertical alignments. The options for horizontal alignment are left,right,stretch and center. The options for vertical alignment are top,bottom,center and stretch. Alignments control 2 things. The first thing is they control in which direction does the element grow. Say suppose we have a top aligned element with an height of 25. If we change the height to 30 the element grows down wards. Same logic applies to left,right,center and bottom. Now if I give you an rectangle that has a left and top margin of 10 and 10 respectively and is left and top aligned with a height and width of 20 and 20 respectively then it means the element is placed 10 units left of its parent, 10 units down of its parent and has width of 20 and a height of 20. The other thing that the alignment controls is the sizing behavior of the element, if its height(or width) is set to auto. If the alignment is stretch and the element's height(width) is auto then it means that the element will stretch to fill its parent respecting the margin constraints. On the other hand if the element is top,bottom or center aligned(or left,right or center aligned) then the element will size to its content respecting the margins. And the direction in which the element grows(left or right, top or bottom) is determined by the alignment.
  4. Transforms:This is a very big topic that I plan to have a full post on this. There are 2 types of transforms layout and render transforms. Using transforms you can rotate, scale and skew the object. For most part you should be able to use only render transform and not use layout transforms at all. In a separate topic I will post how the margins affect the transforms.
  5. Element's content: If the element is top, bottom or center aligned(left,right or center aligned) and its height(width) is set to auto then the element sizes itself to content(or children). For example if you have a button and the button is left and top aligned with ht and width set to auto and it contains a rectangle with height and width of 100 and top, bottom,left and right margins of 10 each then the button's rendered width would 120(100 for the width of the rectangle and 10 each for the left and right margins). Similarly the height would be 120.
  6. Element's Parent: If the element's vertical alignment(horizontal alignment) is stretch and its height(width) is auto then the elements sizes itself to parent respecting the margins. Say suppose a grid is your parent. Let the grid have a ht and width of 100. And the element of interest is a rectangle with a stretch alignment horizontally and vertically and ht and width set to auto. Let us say that this rectangle has a top, bottom, left and right margins of 10 each. Then the rendered width of the rectangle would be 80(the width of the grid - left and right margins) and the height would be 80.

Now let us turn our attention to blend and see how it auto sets the above properties. There are 2 important ways of creating any element in Blend. The first way is you select the element in the tool bar(say you select the rectangle tool) and draw out the rectangle on the art board. The other way is double click on the tool(say rectangle) and a rectangle is inserted for you on the scene. Each of these ways sets different properties.

 In this post let us concentrate only on what happens if you draw out the element. When you draw out an element the properties set depend upon where you draw the element. Let us say you have a grid as the parent element. Now if you draw out a rectangle that fits completely with in the top half(left half) of the grid then the rectangle created has the following properties:

  1. It is left(top) aligned.
  2. It has an absolute height(width) set to how long(wide) you drew the rectangle.
  3. It has top(left) margin set to the point where you started drawing the rectangle.
  4. It has no transforms on it(or identity transforms).
  5. it neither sizes to parent nor its children.

The same applies in reverse to element that completely fits the bottom(right) half of the grid.

If the rectangle spans the midpoint of the grid in height(or width) then the following properties are set on the rectangle:

  1. It is stretch aligned vertically(horizontally)
  2. Its height(width) is set to auto meaning it sizes to its parent.
  3. It has top and bottom(left and right) margins set to position itself exactly on where the rectangle is drawn.
  4. it has no transforms on it.
  5. It sizes to its parent.

 Note by drawing out an element in the art board in Blend it is not possible to create a center aligned element.

 In the next post I will explain what layout properties are set when you create an element by double clicking.