#434 – Canvas Layout Mode in Blend

November 21, 2011 1 Comment

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:

Advertisement

Filed under Blend Tagged with , , , ,

#433 – Preservation of Margins While Editing Grid in Blend

November 18, 2011 2 Comments

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">
		<Grid.RowDefinitions>
			<RowDefinition Height="0.5*"/>
			<RowDefinition Height="0.5*"/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="0.5*"/>
			<ColumnDefinition Width="0.5*"/>
		</Grid.ColumnDefinitions>
		<Button Content="Button" Grid.Column="1" Margin="59,48,16,0" Grid.Row="1" VerticalAlignment="Top"/>
	</Grid>

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.

Filed under Blend Tagged with , , , ,