Margins and Padding in WPF
Posted by Dan Rigsby on May 20th, 2008
Margins and padding WPF work much like margins and padding other paradigms such as windows forms or CSS. Margins give you space outside of the control, and padding gives you space inside the control. The amount of spacing is set by the number of pixels you want to represent.
Note: The padding always occurs inside the border. So if you have a border of 2 and padding of 10, the actual content of the control will be 12 pixels in.
In WPF, when you represent the spacing for these, you can set the values in line. For instance, if you want to place a 2 pixel margin around a control you could write it as Margin=”2″, Margin=”2, 2, 2, 2″, or Margin=”2 2 2 2″. This is very similar to CSS, but there is a big difference. In CSS, the values represent “Top, Right, Bottom, Left”, but in WPF, the values represent”Left, Top, Right, Bottom”. Why did WPF break the mold on this one? Even if the order made more sense (which it doesn’t), I still can’t agree with this change. CSS is a standard and has set a precedence. Designers and developers who are using WPF have probably worked with CSS in some context. This is going to throw a lot of people off. Especially if the are going back and forth between CSS and WPF. What about developers who are writing silverlight controls as well as the web pages that contains them?
The CSS format makes sense. What time is represented by the clock to the right? With no numbers visible, your eyes will probably start at the top (in the 12 position) and move around in clockwise motion to interpret each number. Our minds have been trained to look at the top and work around clockwise. There are exceptions to this, but it is a pattern that makes sense, and one that the CSS guys though was important enough to use in the order of sides.
Its too late to change WPF now, but I would really like to know what the rational behind this was. Maybe they chose to start with the Left side because we read Right to Left in most Western cultures. However, many cultures read Right to Left or Top to Bottom or some other format. It’s not a reliable paradigm to be based on.
May 21st, 2008 at 8:09 am
[...] Margins and Padding in WPF (Dan Rigsby) [...]
May 21st, 2008 at 1:29 pm
Perhaps a bastardization of a bounding rectangle? Left Top (x, y) Right Bottom (x, y)? See: All the problems the LatLong naming convention has cost us programmers mentally. Y *then* X , WTF!?
May 21st, 2008 at 1:51 pm
What really gets me too is how we all refer to the Top, Left corner, not as the Left Top corner. However in math its always referred to as X, Y coordinates. So Left, Top does make since, we are just referring the the corner by the wrong name.
In any case, I really wish they would have kept it consistent with CSS.
May 21st, 2008 at 2:18 pm
I totally agree- they should have stayed consistent. I have nothing further to add, though…
May 23rd, 2008 at 7:50 am
[...] Margins and Padding in WPF (An annoyance) [...]
May 23rd, 2008 at 3:29 pm
[...] Rigsby: Margins and Padding in WPF. If I recall correctly, we did this so you could have x1, y1, x2, y2. When you set [...]
May 23rd, 2008 at 6:20 pm
I think you are working under the false assumption that CSS was somehow a precursor to WPF, or even that the majority of WPF users are most familiar with CSS conventions.WPF IS remaining consistent with previous Windows GUI toolkits of which I’m aware. I think it’s consistent with Windows Forms, MFC, GDI, VB, and probably others. So, from my perspective as a programmer they DID stay consistent.
May 23rd, 2008 at 8:43 pm
Many developers know CSS and XAML, probably not a majority. I just find it funny that some developers will be using Silverlight side by side with CSS and will have 2 paradigms to deal with. I do realize that this is set so you can have x1, y1, x2, y2. The coordinate system is engrained in Computer Graphics. However margins and padding arent really coordinates. It is a size in pixels to represent spacing. This post is “food for thought” and nothing more. Web developers will find this the most annoying.