1

I'd like the Margin property to reference the center of the UIElement and not the top-left corner. That way when I change the width/height of the UIElement it stays in the same spot.

Is there a way to configure this behavior or I'll have to rely on Binding to make the adjustment ?

Thanks.

For instance if I change the Width/Height of the following rectangle, its center will move.

<Grid>
    <Rectangle Fill="#FF991C1C" Width="10" Height="40" HorizontalAlignment="Left" Margin="90,161,0,0" VerticalAlignment="Top"/>
</Grid>
Dave Clemmer
  • 3,741
  • 12
  • 49
  • 72
Nock
  • 6,561
  • 1
  • 28
  • 27
  • 1
    An element's margin isn't "relative to its top-left corner", it is just the [thickness](http://msdn.microsoft.com/en-us/library/system.windows.thickness.aspx) (or four different thicknesses) of a frame around the bounding rectangle of the element. In this sense it can also not be relative to the element's center. – Clemens Apr 06 '12 at 22:42
  • In this case the Margin set on the Rectangle is used to position it inside the Grid, right? And the Offset of the margin is relative to the upper-left corner of the Rectangle, right? – Nock Apr 07 '12 at 09:00
  • That depends on the alignment inside a grid cell. If HorizontalAlignment is `Right`, the element is right-aligned with a right-side margin relative to the top-**right** corner. – Clemens Apr 07 '12 at 09:22
  • Gotcha! I don't know why I could figure that out yesterday, well it was certainly too late for me to get it done. Thank you, your explanations helped a lot! – Nock Apr 07 '12 at 11:22

3 Answers3

2

Why not remove the margin, and use these?

HorizontalAlignment="Center"
VerticalAlignment="Center"
John Fisher
  • 22,355
  • 2
  • 39
  • 64
  • I don't want the Rectangle to be at the center of the grid, I still want to position it at a given spot inside the grid, but the spot has to be relative to the center of the Rectangle. – Nock Apr 07 '12 at 09:02
  • 1
    You were almost correct on this. I should have switched the aligment to center but keep the Margin. I was almost sure that I tested that on Blend yesterday but I couldn't get the result I wanted, but now I made a new test from scratch and it works! Thanks anyway. – Nock Apr 07 '12 at 11:27
  • If you center-align your object, you can still apply a `LayoutTransform` or `RenderTransform` to move it off-center by a given amount. – heltonbiker Jan 15 '14 at 13:07
2

For an obscure reason I couldn't figure out that the Rectangle Alignment should be Center if I wanted the Margin to be relative to the center. This code make my Rectangle behaves like I wanted.

<Grid>
    <Rectangle Fill="#FF991C1C" Width="10" Height="40" HorizontalAlignment="Center" Margin="90,161,0,0" VerticalAlignment="Center"/>
</Grid>
Nock
  • 6,561
  • 1
  • 28
  • 27
-1

In some cases, when attempting to position an element based on its center rather than the edge just using a single margin property, I've found this solution useful:

/* Declare a CSS variable equal to your element's width. */

:root{
   --my-element-width: 40px;
}

/* Declare your margin as 50% minus half the element's width */

.myClass {
  margin-right: calc(50% - var(--my-element-width));
}

/* Apply this class to the element in question. */
Andrew
  • 3,825
  • 4
  • 30
  • 44