This post is part of a string of posts found here: Learn Blend in a Month.

Both TextBlocks and TextBoxes can be used to display text, they can be set to specific Height and Width or be set to Auto so that they grow in size with the text. They can both set font size, font type, font styling, to wrap and to range left, right or centred. Both TextBlocks and TextBoxes can have opacity set and have Pixel Shaders applied. Although at first the TextBlock and TextBox look like they do very similar things, they do actually have very different functions.

The TextBlock

TextBlocks are used for displaying text more focused typographically. TextBlocks can contain text set to different colors, fonts and sizes. The line height can also be increased from the default setting to give more space between each line of text. Text inside a TextBlock can not be made selectable by the user.

The TextBox

TextBoxes are used for displaying text more focused for content input or when content is needed to be made selectable by the user. The TextBox can only be set to one colour, one font size, one font type etc. TextBoxes also have fixed Line Spacing. The TextBox can also be set to a fixed height and width but also have scrollbars switched on to allow content to expand.

This post is part of a string of posts found here: Learn Blend in a Month.

The ‘StackPanel’ element can be used to group other elements up, including other ‘StackPanels’. A ‘StackPanel’ has properties like any other element, it can be moved around, have a set height and width, have transforms including projection applied, have a background color, have its Opacity set and even have Pixel Shaders applied. All items inside that ‘StackPanel’ will be affected by these properties as a unit.

To read more about how ‘StackPanel’ properties effect their containing elements please read the previous post about the ‘Canvas’ element here.

To draw a ‘StackPanel’, first go to your tool panel, click and hold on the Grid (shown by default) icon and select ‘StackPanel’. Now draw the area you want to have as a ‘StackPanel’.

Elements inside a StackPanel are stacked one after the other either horizontally or vertically. To switch between horizontal and vertical, go to the ‘Properties’ tab and scroll down to the ‘Layout’ section and change the drop down selection titled ‘Orientation’. You can also set the ‘Margin’ and ‘Alignment’ values of each element to refine the spacing and positioning between them.

A ‘Margin’ consists of four values:

  1. Distance from the top of the containing StackPanel
  2. Distance from the left of the containing StackPanel
  3. Distance from the bottom of the containing StackPanel
  4. Distance from the right of the containing StackPanel

Horizontal Alignment’ and ‘Vertical Alignment’ each have 4 values:

  1. Align Left/Top
  2. Align Centre
  3. Align Right/Bottom
  4. Stretch

Alignment can only be set on the opposite of the StackPanels Orientation, for example if your StackPanel is set to horizontal then you cannot set individual elements inside to be left or right aligned.

StackPanels can also have their ‘Height’ and ‘Width’ values set to ‘Auto’. This will allow the StackPanel to automatically grow with the content inside it – this can be helpful later on when wanting to dynamically retrieve the size of changing content or if you are dynamically adding elements inside or changing their size.

Grouping elements into a ‘StackPanel’ is a good thing to do if you want elements on your page to automatically be stacked one after the other.

There is no limit to having multiple StackPanels inside StackPanels.

To read about other container types try out these tutorials:

This post is part of a string of posts found here: Learn Blend in a Month.

The ‘Grid‘ element can be used to group other elements up, including other ‘Grids‘. A ‘Grid‘ has properties like any other element, it can be moved around, have a set height and width, have transforms including projection applied, have a background color, have its Opacity set and even have Pixel Shaders applied. All items inside that ‘Grid’ will be affected by these properties as a unit.

To read more about how ‘Grid’ properties effect their containing elements please read the previous post about the ‘Canvas’ element here.

To draw a ‘Grid’, first go to your tool panel, click the ‘Grid’ icon and draw the area you want to have as a ‘Grid‘. To group elements into a ‘Grid‘, first select all the elements you want to group, then right click on them and select ‘Group into‘ and then click on ‘Grid‘.

Elements inside a Grid are constrained to the Grid’s properties. To position an element inside a Grid you set its ‘Margin’ values and its Alignment values.

A ‘Margin’ consists of four values:

  1. Distance from the top of the containing Grid
  2. Distance from the left of the containing Grid
  3. Distance from the bottom of the containing Grid
  4. Distance from the right of the containing Grid

Horizontal Alignment’ and ‘Vertical Alignment’ each have 4 values:

  1. Align Left/Top
  2. Align Centre
  3. Align Right/Bottom
  4. Stretch

For example: If an element is set to Align Left and Top then Margin values 1 and 2 will position the element. If an element is set to align Right and Bottom then Margin values 3 and 4 will position the element. Setting Centre align will position the element in the middle and then use the Margin value to offset its position in each direction. Setting Stretch will also centre the element but if the elements ‘height’ and ‘width’ are set to ‘Auto’ then it will stretch to fill the Grids dimensions minus the Margin values.

Grids can also have their ‘Height’ and ‘Width’ values set to ‘Auto’. This will allow the Grid to automatically grow with the content inside it – this can be helpful later on when wanting to dynamically retrieve the size of changing content.

Grids can also have ‘Rows’ and ‘Columns’ defined to help position the containing elements. There is no limit to the amount of Rows or Columns a Grid can have. To add  a new Row or Column, first select the Grid and then click on the blue border to the top or left of the Grid boundaries. Rows and Columns are displayed as Blue lines (a yellow line will appear on rollover to help placement).

Rows and Columns can be moved at any point by click and dragging their triangular handle.

Content inside the Grid can be set to sit inside any Row and Column or span across multiple Rows and Columns. To change these settings, first select the element you want to effect, then go to the ‘Properties’ panel and scroll down to the ‘Layout’ section. You then have the following properties:

  • Row
  • Column
  • RowSpan
  • ColumnSpan

Grouping elements into a ‘Grid’ is a good thing to do if you want elements on your page constrained within fixed/movable areas.

There is no limit to having multiple Grids inside Grids.