#434 – Canvas Layout Mode in Blend

By default, when you edit a Grid in Blend, margins are preserved when you change the Grid layout, but the visual appearance of controls may change.  This is know as grid layout mode and is indicated by the small icon in the upper left corner of a Grid on the design surface.

You can also switch to canvas layout mode, which allows editing the Grid in a mode that behaves a little more like the Canvas panel.  Controls retain their position and size and their margins are adjusted as Grid elements are resized.

You can click on the icon shown above to switch to canvas layout mode.  In the example below, I switch to canvas layout mode and then change the width of the second column.  The Button’s position and size stay the same and its margins are adjusted.

Margins before the change:

Margins after the change:


#433 – Preservation of Margins While Editing Grid in Blend

Assume that you have a simple 2×2 Grid and you use the design surface in Blend to place a Button in the Grid.  If you place the Button by dragging it and dropping it, its Grid.Row and Grid.Column properties will be set accordingly and its Margin will be set to reflect the specific spot where you dropped it.

	<Grid Height="300" Width="300">
			<RowDefinition Height="0.5*"/>
			<RowDefinition Height="0.5*"/>
			<ColumnDefinition Width="0.5*"/>
			<ColumnDefinition Width="0.5*"/>
		<Button Content="Button" Grid.Column="1" Margin="59,48,16,0" Grid.Row="1" VerticalAlignment="Top"/>

If you now change the width of the 2nd column, making it wider, you’ll notice that the button’s Margin is preserved, which means that the size of the button changes.

		<Button Content="Button" Grid.Column="1" Margin="59,48,16,0" Grid.Row="1" VerticalAlignment="Top"/>

This is normally what you want.  As you change things on the design surface, the XAML does not change but the visual appearance of the controls may change.

#432 – Height and Width vs. ActualHeight and ActualWidth

Specifying the height and width of a control using the Height and Width properties indicates the desired height and width.  The layout system will take the requested height and width into account, but the actual height and width depends on a number of factors.

You can use the ActualHeight and ActualWidth properties to get at the actual height and width, after layout.

        <Button Name="btnA" HorizontalAlignment="Stretch" Content="Get Info"
        <Button Name="btnB" HorizontalAlignment="Center" Width="1in" Content="Push or Pull Me"/>
        <Button Name="btnC" Width="175" MaxWidth="{Binding ElementName=btnB, Path=ActualWidth}" Content="Push Me"/>

Clicking on GetInfo, we display info about the third button.  ActualWidth is smaller than the requested Width, because it can’t be wider than the second button.

The first button’s Width is set to “NaN” (Not a Number), indicating that Width is set to Auto.

The second button’s width was set to 1 inch, which is 96 units on my 96 dpi display.

#431 – Binding a Control’s Width to Its Height

Since you can bind a property of a control to a different property on that same control, you could bind a control’s width to its height to force the control to  always be square.

In the example below, the Button control’s width changes as the container is resized, since its HorizontalAlignment is set to Stretch.  The Height of the Button is then bound to the ActualWidth property, so that the height always matches the width.

        <Button HorizontalAlignment="Stretch"
                Height="{Binding Path=ActualWidth, RelativeSource={RelativeSource Self}}"
                Content="Height set to Width"
                Margin="5" Padding="5"/>

#430 – Setting Width and Height Using Different Units

When you specify the width or height of a control using a value that is a number, the value is interpreted in device independent units (1/96 in).  On a 96 dpi display, device independent units are equivalent to pixels.

<Button Width="80" Height="20" Content="80x20 units" HorizontalAlignment="Center" />

You can also add a suffix to the numeric value, indicating what type of units to use for the dimension.

  • px – device independent units (pixels on 96 dpi).  Same as including no suffix
  • in – inches
  • cm – centimeters
  • pt – points  (1 pt = 1/72 in)
        <Button Width="100" Height="25" Content="100x25 units" HorizontalAlignment="Center" Margin="5"/>
        <Button Width="100px" Height="25px" Content="Also 100x25 units" HorizontalAlignment="Center" Margin="5"/>
        <Button Width="1.5in" Height="0.5in" Content="1-1/2 in x 1/2 in" HorizontalAlignment="Center" Margin="5"/>
        <Button Width="3cm" Height="0.5cm" Content="3 cm x 1/2 cm" HorizontalAlignment="Center" Margin="5"/>
        <Button Width="1in" Height="24pt" Content="1 in x 24 pt" HorizontalAlignment="Center" Margin="5"/>

#429 – Child Element Properties that Affect Layout

Layout panels, like StackPanel and Grid, server as containers, containing child elements whose type is UIElement.  (In reality, most child elements derive from FrameworkElement, which in turns derives from UIElement).

Layout panels honor the following properties of their child elements.  These properties are all defined in FrameworkElement.

  • HorizontalAlignment – Horizontal alignment of an element (left, center, right, stretch)
  • VerticalAlignment – Vertical alignment of an element (top, center, bottom, stretch)
  • Margin – space between elements or between an element and the edge of the containing area
  • Width – width of element (in device indepent units, inches, cm, points, or auto)
  • Height – height of element (in device indepent units, inches, cm, points, or auto)
  • MinWidthminimum width of the element
  • MinHeightminimum height of the element
  • MaxWidthmaximum width of the element
  • MaxHeight – maximum height of the element

#428 – Setting Other Layout Properties from Within Blend

You can use the Properties window in Blend to set any of the properties of a control hosted in a layout container, including layout-related properties.

For example, assume that we have a Grid containing a couple of Button controls.  If you click on one of the buttons, you’ll see its properties in the Properties window to the right of the design surface.

You can see all of the layout related properties in the Layout panel, including height and width, row and column (where in the Grid is the button located), and alignment and margin properties.

You can click on the various horizontal and vertical alignment icons to change the alignment.

Less frequently used properties can be accessed by clicking on the little expander icon at the bottom of the layout panel.

The new panel contains properties like HorizontalContentAlignment, VerticalContentAlignment and Padding values.