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="Diagra mTools.Window3"
xmlns="http://schemas.microso ft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microso ft.com/winfx/2006/xaml"
Title="Window3" Height="300" Width="300">

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

<Grid>
<!-- LEFT SIDE PANEL-->
<Grid Margin="40,40,4 0,40" Background="Cor nsilk" Name="myControl " >
<Grid HorizontalAlign ment="Left" Width="20"
Margin="-10,10,0,10" Background="Lig htBlue" Name="LeftConne ctorPanel">

<Rectangle Height="12" Width="20" Margin="-10,-72,0,0"
Name="rectangle 6" HorizontalAlign ment="Left" Stroke="Black" Fill="Purple"
/>
<Rectangle Height="12" Width="20" Margin="-10,-48,0,0"
Name="rectangle 4" HorizontalAlign ment="Left" Stroke="Black" Fill="Green" />
<Rectangle Height="12" Width="20" Margin="-10,-24,0,0"
Name="rectangle 2" HorizontalAlign ment="Left" Stroke="Black" Fill="Blue" />
<Rectangle Height="12" Width="20" Margin="-10,0,0,0"
Name="rectangle 1" HorizontalAlign ment="Left" Stroke="Black" Fill="Red" />
<Rectangle Height="12" Width="20" Margin="-10,24,0,0"
Name="rectangle 3" HorizontalAlign ment="Left" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="12" Width="20" Margin="-10,48,0,0"
Name="rectangle 5" HorizontalAlign ment="Left" Stroke="Black" Fill="Green"
/>
</Grid>
<!-- RIGHT SIDE PANEL-->
<Grid HorizontalAlign ment="Right" Width="20" Margin="0,10,-10,
10" Background="Lig htBlue" Name="RightConn ectorPanel">
<!--<Rectangle Height="12" Width="20" Margin="0,-48,-10,0"
Name="rectangle 4a" HorizontalAlign ment="Right" Stroke="Black" Fill="Green"
/>-->
<Rectangle Height="12" Width="20" Margin="0,-12,-10,0"
Name="rectangle 2a" HorizontalAlign ment="Right" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="12" Width="20" Margin="0,12,-10,0"
Name="rectangle 1a" HorizontalAlign ment="Right" Stroke="Black" Fill="Red"
/>
<!--<Rectangle Height="12" Width="20" Margin="0,24,-10,0"
Name="rectangle 3a" HorizontalAlign ment="Right" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="12" Width="20" Margin="0,48,-10,0"
Name="rectangle 5a" HorizontalAlign ment="Right" Stroke="Black" Fill="Green"
/>-->
</Grid>
<!-- TOP SIDE PANEL-->
<Grid VerticalAlignme nt="Top" Height="20" Margin="10,-10,10,
0" Background="Lig htBlue" Name="TopConnec torPanel">
<Rectangle Height="20" Width="12" Margin="0,-10,48,0"
Name="rectangle 4b" VerticalAlignme nt="Top" Stroke="Black" Fill="Green" />
<Rectangle Height="20" Width="12" Margin="0,-10,24,0"
Name="rectangle 2b" VerticalAlignme nt="Top" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,0,0"
Name="rectangle 1b" VerticalAlignme nt="Top" Stroke="Black" Fill="Red" />
<Rectangle Height="20" Width="12" Margin="0,-10,-24,0"
Name="rectangle 3b" VerticalAlignme nt="Top" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,-48,0"
Name="rectangle 5b" VerticalAlignme nt="Top" Stroke="Black" Fill="Green" />
</Grid>
<!-- BOTTOM SIDE PANEL-->
<Grid VerticalAlignme nt="Bottom" Height="20"
Margin="10,-10,10, 0" Background="Lig htBlue" Name="Bottom">
<Rectangle Height="20" Width="12" Margin="0,-10,48,0"
Name="rectangle 4c" VerticalAlignme nt="Bottom" Stroke="Black" Fill="Green"
/>
<Rectangle Height="20" Width="12" Margin="0,-10,24,0"
Name="rectangle 2c" VerticalAlignme nt="Bottom" Stroke="Black" Fill="Blue" />
<Rectangle Height="20" Width="12" Margin="0,-10,0,0"
Name="rectangle 1c" VerticalAlignme nt="Bottom" Stroke="Black" Fill="Red" />
<Rectangle Height="20" Width="12" Margin="0,-10,-24,0"
Name="rectangle 3c" VerticalAlignme nt="Bottom" Stroke="Black" Fill="Blue"
/>
<Rectangle Height="20" Width="12" Margin="0,-10,-48,0"
Name="rectangle 5c" VerticalAlignme nt="Bottom" Stroke="Black" Fill="Green"
/>
</Grid>
</Grid>
</Grid>


</Window>
















--
moondaddy@newsg roup.nospam

[Linda Liu[MSFT]]

RE: Understanding the margin property.

Hi George,

Firstly, when we place an element in a Grid without setting the
HorizontalAlign ment and VerticalAlignme nt 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:
msdnmg@microsof t.com.

=============== =============== =============== =====
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/subscripti...t/default.aspx.
=============== =============== =============== =====
This posting is provided "AS IS" with no warranties, and confers no rights.