Add Padding property to Label, TextBox, Button, etc.

[dan-meier]

Introduce Padding property to Label, TextBox, Button and other elements that CANNOT contain children, but which have a Text property.

<Label Padding="4" Text="Sample text"/>

In the case of elements with no children, Padding refers to the internal distance between the text and the inner boundary of the element.

Padding is of type Thickness. For Padding.Top, a value of 0 is the distance between the highest ascender of the font family used and the element's upper boundary. For Padding.Bottom, a value of 0 is the distance between the lowest descender of the font and the element's lower boundary.

A VerticalTextAlignment of Top should place the highest ascender of the font family used against the top Padding border of the element. A VerticalTextAlignment of Center should place the center-of-mass of the font (i.e., the center of the font's x-height) in the center of the area of the element between the Top and Bottom Padding borders. A VerticalTextAlignment of Bottom should place the lowest descender of the font against the bottom Padding border of the element.

A HorizontalTextAlignment of Left (or Start) should place the left-most character of the text string against the left Padding border of the element. A HorizontalTextAlignment of Center should place the dimensional center of the text string in the center of the area of the element between the Left (Start) and Right (End) Padding borders. A HorizontalTextAlignment of Right (or End) should place the right0most character of the text string against the right Padding border of the element.

[dotMorten]

How is the effect of this different from Margin on TextBlock/Label? (on a side note Button does have content / child, so there both margin and padding makes sense and it should already have that.

[mdtauk]

Padding adds spacing inside the Bounding Box. Margin adds spacing outside of it.

Padding will effect the background colour for instance

[dotMorten]

But textblock has neither background color or a border, so really don't see how it's needed there?

[dan-meier]

It's about alignment as much as anything else. Today, in UWP, if you vertically align a TextBlock and TextBox using the same font family and font size within a horizontally-oriented StackPanel, the text in the respective controls don't align. They're offset by a couple of pixels vertically because each control's internal implementation of how text is drawn within the control is a bit different. Sure, you can tweak the Margin of one of the controls to dial things in, but then if you change the vertical alignment with the StackPanel, they're misaligned again.

Defining the space around the text within the control in exactly the same way for every control containing text ensures consistent and predictable alignment across different controls. Such consistency is critical in UI design. Why shouldn't I expect the same font and size to appear in exactly the same way in a TextBlock, TextBox, Button, ComboBox, or any control with text? This inconsistency is something we have to fight with constantly today.

[birbilis]

So, is padding or textAlignment internal logic not being exposed? If those controls always have some hardcoded padding then that needs to be exposed, but do they have such? What happens when controls get small size with big font? Does inner text touch the top and left sides or not?

[dan-meier]

Currently, if a big font is used and the control's Height and Width are not explicitly specified, the control's size adjusts relative to the font size, as does the internal spacing between the text and the control's internal border. If values for Height and/or Width are specified, the control honors the values specified and text with a big font size extends outside the visible area of the control. In either case, Padding repositions the text within the control's boundaries -- i.e., pushing the text further outside the visible area in the case of a big font size.

However, even with Padding="0", there is STILL some space between the text and the control's internal boundary, and this space differs between the control's sides and the top/bottom. I'm arguing to define Padding with respect to a control's internal boundaries, and not just someone's arbitrary notion of what they think is aesthetically pleasing. Since Padding can't currently have negative values, a Padding of 0 should place the text up against the internal boundaries of the control. In the case where Height and/or Width are specified, that's up against the "beginning" of the control (top-left for left-to-right languages like English). So okay, define a default value for Padding that leaves some "aesthetically pleasing" space, but don't make this the "zero-reference" (especially if I can't use a negative value to get rid of it).

I'm also arguing to make internal text Padding available in the cross-platform world. Currently, Padding is not defined for any control containing text in Xamarin.

[buzzware]

I just hit this issue. I have an edit on one page, that I want to emulate on another screen but non-editable, and the approved design I'm given has the non-editable control shaded with the text padded from the edge. Label is a natural fit, but the lack of a padding property means I need a Frame to wrap it, but that will not be layout-consistent with the edit control in all scenarios. As a general principal, like HTML I'd like to see a basic set of style properties supported consistently across all controls where reasonable.