472,980 Members | 2,054 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,980 software developers and data experts.

Understanding the margin property.

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


<Window x:Class="DiagramTools.Window3"
Title="Window3" Height="300" Width="300">

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

<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 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 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 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"

Jun 27 '08 #1
1 3449
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

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.

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:

Get notification to my posts through email? Please refer to

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
This posting is provided "AS IS" with no warranties, and confers no rights.
Jun 27 '08 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

by: Ian Rastall | last post by:
This really is a JavaScript question. I have a site that looks fine in everything but NN4. I'm afraid I don't have a URL, because the site is very much unfinished. The site is a header (which is...
by: Richard Barnet | last post by:
This site: http://www.westciv.com/style_master/academy/css_tutorial/properties/margin.html states that "An element does not inherit the margin property of the element which contains it."...
by: Terry | last post by:
I'm real new at this, so this may be a basic question, but I want to get off on the right foot. I thought it would be reasonable to use the following on a page: body { margin: 3em;...
by: Thomas Mlynarczyk | last post by:
Hello, The following gives different results in IE and "Non-IE" browsers: <div style="background-color: green; width: 200px"> <div style="margin-top: 20px; background-color: red"> Hello...
by: boclair | last post by:
I have been approached over a page that has a horizontal menubar displaying over a banner. The problem advised that the menubar is not displayed and the banner moves up to the position the menubar...
by: Alan Silver | last post by:
Hello, In my (seemingly) endless quest to understand CSS, I have yet another problem. Please look at http://www.kidsinaction.org.uk/ph/x.html in Opera, where you will see it how I expected. If...
by: shapper | last post by:
Hello, I created a div with margin and padding and a fixed width. It seems the behavior is different in Firefox and IE. I am not sure but it seems: True width = width + paddingORmargin OR...
by: Summercool | last post by:
I just found that for a table, the margin for <trand <tdare not honored, but the padding is... is this a widely known fact? why make this an exception for margin, i wonder. margin not...
by: innivive | last post by:
I am having a problem with having margins display correctly in IE7, Firefox and Safari. I am not sure if it is the "double margin error" or something else. Any help would be appreciated. The file...
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.