Xamarin.forms: [Enhancement] Padding on Label

Created on 18 Dec 2018  Â·  14Comments  Â·  Source: xamarin/Xamarin.Forms

Summary

Make padding available in Label

API Changes

var label = new Label();
label.Padding = new Thickness(10,0,0,0);

Intended Use Case

It can be useful for a simple header or section divider instead of creating a contentView with padding and putting a label into it.

LOOK at the picture for an example
schermata 2018-12-18 alle 09 26 20

F100 enhancement âž•

All 14 comments

What's wrong with putting a Label inside a StackLayout?

it's an extra view layer.
Padding on label is available through CustomRenderer. I think this can be useful for others

i agree, we need every possibile tool to semplify layouts and avoid nesting views/layouts when possibile

on iOS, we don't use UITextView, but UILabel, and UILabel doesn't have TextContainerInset. so what do you recommend there ?

I've seen that this can be done by overriding UILabel DrawText method in iOS
I'm doing some test with customrender I'll reply here when I've a working solution.

Test.zip

on iOS, we don't use UITextView, but UILabel, and UILabel doesn't have TextContainerInset. so what do you recommend there ?

any update ?

I would like to give it a shot, but I'm a bit worried about the custom inheritance we would have to create from the UILabel in regard to any other issues we might introduce here. Or maybe I'm overthinking things then... @StephaneDelcroix what do you think?

This would be useful. Alot of the time in my application I have to do the following:

<ContentView BackgroundColor="Orange" Padding="10">
     <Label Style="{StaticResource HeaderMediumTextStyle}" Text="Availability}"/>
</ContentView >

Would be nice to get rid of the redundant ContentViews and just do:

<Label Style="{StaticResource HeaderMediumTextStyle}" BackgroundColor="Orange" Padding="10" Text="Availability}"/>

The main reason I would do this refactor is for performance (less view = better performance)

Thanks for the feedback! I really see the added value for this. Just want to have a second opinion on the implementation for iOS. Also, some other PRs I need to finish up first.

@samhouts @davidortinau what is the win factor for this one? 😉

Thank you guys, I'll appreciate if I can be mentioned if this enhancements will be distributed

I've checking how it works and I'll try to do it in Android and iOS platforms so I'm going to open a new PR related with this issue.

But I have to create a new issue in xamarin-macios repo in order to get available the property UIEdgeInsets in UILabel.

Finally, I've added a new issue (5863) in xamarin-macios repo.

This should be the result of the implemented issue.
image

This should be given a higher priority, in my opinion. Like others, I've been wrapping labels with other controls to add tap gestures & padding and increase the surface area for the label tap, especially for small fonts. As mentioned earlier, this complicates the UI tree.

Also consider the following scenario:

  • Add a label with multiple spans, each with its own tap gesture.
  • Toggle the visibility of a span on and off upon tapping

This works fine with a Label, but since there is no Padding property, it's easy to miss the label and tap on a blank area while the user thinks they are tapping on the label.

Now, to achieve the same goal, if you use a Grid/StackLayout with two labels, in a ListView, I've observed that the visibility changes are jarring. The parent layout is not handling such changes properly.

Aside from this, there are existing issues with spans, especially on Android, which make label tapping a poor experience on Xamarin Forms. See #4143 and #6046. That said, I'd love to see the team work on improving label experience for us all.

See #6299. Feedback is welcome.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

deakjahn picture deakjahn  Â·  3Comments

rmarinho picture rmarinho  Â·  3Comments

mattregul picture mattregul  Â·  3Comments

joseluisct picture joseluisct  Â·  3Comments

EmilAlipiev picture EmilAlipiev  Â·  3Comments