Understanding the margin property.

[moondaddy]

I have a group of elements inside a grid and want to align them along the
left side of the grid. I also want have this group centered vertically and
the xaml below demonstrates the appearance want to achieve. At runtime I
don't know how many there will be, but there will always be at least 1 which
should be in the exact center of the left side, and I will dynamically and
remove elements to the left side. These elements have a height of "12" so
logic tells me if I want to add another element placed right on top of the
previous one, I should set the new element's top margin to "-12" more than
the previous element's top margin. However, this isn't the case. I need to
work with units of 24 (or rather double the element's height).



This is confusing to me. Can someone please explain why when I have an
element with a height of "12" and I want to move it a distance of "12" up or
down, I need to work with a top margin in units of "24" or double it's
height?



Thanks.







<Window x:Class="DiagramTools.Window3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window3" Height="300" Width="300">

<!--MARGIN : Left, Top, Right, Bottom -->

<Grid>
<!-- LEFT SIDE PANEL-->
<Grid Margin="40,40,40,40" Background="Cornsilk" Name="myControl" >
<Grid HorizontalAlignment="Left" Width="20"
Margin="-10,10,0,10" Background="LightBlue" Name="LeftConnectorPanel">

<Rectangle Height="12" Width="20" Margin="-10,-72,0,0"
Name="rectangle6" HorizontalAlignment="Left" Stroke="Black" Fill="Purple"
/>
<Rectangle Height="12" Width="20" Margin="-10,-48,0,0"
Name="rectangle4" HorizontalAlignment="Left" Stroke="Black" Fill="Green" />
<Rectangle Height="12" Width="20" Margin="-10,-24,0,0"
Name="rectangle2" HorizontalAlignment="Left" Stroke="Black" Fill="Blue" />
<Rectangle Height="12" Width="20" Margin="-10,0,0,0"
Name="rectangle1" HorizontalAlignment="Left" Stroke="Black" Fill="Red" />
<Rectangle Height="12" Width="20" Margin="-10,24,0,0"
Name="rectangle3" HorizontalAlignment="Left" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="12" Width="20" Margin="-10,48,0,0"
Name="rectangle5" HorizontalAlignment="Left" Stroke="Black" Fill="Green"
/>
</Grid>
<!-- RIGHT SIDE PANEL-->
<Grid HorizontalAlignment="Right" Width="20" Margin="0,10,-10,
10" Background="LightBlue" Name="RightConnectorPanel">
<!--<Rectangle Height="12" Width="20" Margin="0,-48,-10,0"
Name="rectangle4a" HorizontalAlignment="Right" Stroke="Black" Fill="Green"
/>-->
<Rectangle Height="12" Width="20" Margin="0,-12,-10,0"
Name="rectangle2a" HorizontalAlignment="Right" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="12" Width="20" Margin="0,12,-10,0"
Name="rectangle1a" HorizontalAlignment="Right" Stroke="Black" Fill="Red"
/>
<!--<Rectangle Height="12" Width="20" Margin="0,24,-10,0"
Name="rectangle3a" HorizontalAlignment="Right" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="12" Width="20" Margin="0,48,-10,0"
Name="rectangle5a" HorizontalAlignment="Right" Stroke="Black" Fill="Green"
/>-->
</Grid>
<!-- TOP SIDE PANEL-->
<Grid VerticalAlignment="Top" Height="20" Margin="10,-10,10,
0" Background="LightBlue" Name="TopConnectorPanel">
<Rectangle Height="20" Width="12" Margin="0,-10,48,0"
Name="rectangle4b" VerticalAlignment="Top" Stroke="Black" Fill="Green" />
<Rectangle Height="20" Width="12" Margin="0,-10,24,0"
Name="rectangle2b" VerticalAlignment="Top" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,0,0"
Name="rectangle1b" VerticalAlignment="Top" Stroke="Black" Fill="Red" />
<Rectangle Height="20" Width="12" Margin="0,-10,-24,0"
Name="rectangle3b" VerticalAlignment="Top" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,-48,0"
Name="rectangle5b" VerticalAlignment="Top" Stroke="Black" Fill="Green" />
</Grid>
<!-- BOTTOM SIDE PANEL-->
<Grid VerticalAlignment="Bottom" Height="20"
Margin="10,-10,10, 0" Background="LightBlue" Name="Bottom">
<Rectangle Height="20" Width="12" Margin="0,-10,48,0"
Name="rectangle4c" VerticalAlignment="Bottom" Stroke="Black" Fill="Green"
/>
<Rectangle Height="20" Width="12" Margin="0,-10,24,0"
Name="rectangle2c" VerticalAlignment="Bottom" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,0,0"
Name="rectangle1c" VerticalAlignment="Bottom" Stroke="Black" Fill="Red" />
<Rectangle Height="20" Width="12" Margin="0,-10,-24,0"
Name="rectangle3c" VerticalAlignment="Bottom" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="20" Width="12" Margin="0,-10,-48,0"
Name="rectangle5c" VerticalAlignment="Bottom" Stroke="Black" Fill="Green"
/>
</Grid>
</Grid>
</Grid>


</Window>

 

[Linda Liu[MSFT]]

Hi George,

Firstly, when we place an element in a Grid without setting the
HorizontalAlignment and VerticalAlignment property of the element, this
element will be centered in the Grid both horizontally and vertically by
default.

If we set the Margin property of the element, WPF layout subtracts the
specified margin from the Grid's height and width and then centers the
element in the remaining space.

For example, both the width and height of the Grid are 200 and the width
and height of the child rectangle are 100. The Margin property of the
rectangle is set to "0,10,0,0". Then the left-top corner of the rectangle
will be positioned at the point of {50,55} within the Grid.

This should explain your question.

Hope this helps.
If you have any question, please feel free to let me know.

Sincerely,
Linda Liu
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.