How to make a horizontally centered Entry expand to be just wide enough to show it's entire Text ?

John Hardman 261

How can one reliably implement a horizontally centered Entry that expands to the width required to show its Text, without expanding beyond that?
(I want a readonly Entry of the minimum width that shows its entire Text, where the readonly Entry is centered horizontally on the page).

Some code that demonstrates an Entry with HorizontalOptions = CenterAndExpand but where the Entry does not expand to show its entire Text can be found at https://xamarin.github.io/bugzilla-archives/59/59391/bug.html

TBH, I do have a hacky workaround, that involves using a Grid to overlay the Entry on a Label that has its Text property bound to the same property on the ViewModel as the Entry, but that's hacky as I have to apply a Margin to the Label using some magic numbers. In that hacky workaround, the Label expands to show the entire Text, resulting in the Grid expanding, resulting in the Entry also expanding. I'd rather have a solution that doesn't involve magic numbers.

(cross posted from https://forums.xamarin.com/discussion/187359/how-to-make-a-horizontally-centered-entry-expand-to-be-just-wide-enough-to-show-its-entire-text )

1 answer

Cole Xia (Shanghai Wicresoft Co,.Ltd.) 6,751 Reputation points

2021-02-10T06:53:05.19+00:00
Hello,

Welcome to Microsoft Q&A!

Try to use a Grid to Wrap label and Entry, create the binding between label and entry (Text , FontSize , WidthRequest), then change the text of the label , the label auto expand and result in the entry expanding .

<Grid > <Label Text="123" BackgroundColor="Green" x:Name="label" HorizontalOptions="CenterAndExpand" /> <Entry x:Name="entry" BackgroundColor="Red" HorizontalOptions="CenterAndExpand" BindingContext="{x:Reference label}" Text="{Binding Text}" FontSize="{Binding FontSize}" WidthRequest="{Binding Width}"/> </Grid>

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.
John Hardman 261 Reputation points

2021-02-10T09:28:28.033+00:00

@Cole Xia (Shanghai Wicresoft Co,.Ltd.) - That's basically the workaround that I described, but without the use of a Margin which is required on UWP as the Entry needs to be slightly wider on UWP than the Label is. Is there another way of doing it?

Cole Xia (Shanghai Wicresoft Co,.Ltd.) 6,751 Reputation points

2021-02-11T07:45:10.963+00:00

You're right , I found the Entry(TextBox in UWP) has padding by default ,we can add custom renderer to remove the padding .

[assembly: ExportRenderer(typeof(Entry), typeof(MyRenderer))] namespace FormsA.UWP { class MyRenderer : EntryRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) { base.OnElementChanged(e); if (Control != null) { Control.Padding = new Windows.UI.Xaml.Thickness(0,0,0,0); } } } }

Before

After

John Hardman 261 Reputation points

2021-02-11T11:18:59.383+00:00

Thanks @Cole Xia (Shanghai Wicresoft Co,.Ltd.)

Where is the default padding for the UWP TextBox specified? Is it accessible, so that a LabelRenderer could get hold of it programmatically? If so, rather than remove the default padding in an EntryRenderer, it might make more sense to have a custom LabelRenderer that adds that same amount of padding. It's still not an ideal solution, but it would be a good stepping stone.

The ideal solution (this would really be an enhancement request for XF) is to add two features to (some) XF Views. One feature, which has been requested before (there are bits of code on the web for doing this on Android and iOS XF projects, but not for UWP AFAIK), is to have the ability to specify that a View (e.g. Label or Entry) should change its FontSize automatically so that the Text fills whatever size the View currently is. The second is the opposite, that the View (e.g. Label or Entry) should change its size to show its Text completely, which is what I want to do in this scenario.

Cole Xia (Shanghai Wicresoft Co,.Ltd.) 6,751 Reputation points

2021-02-12T05:30:10.69+00:00

You can debug on the default padding of TextBox ,check following image

Of course you can add padding in custom LabelRenderer ,it's the same way .

The feature you mentioned is nice , please feel free to raise the feature on github .
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to make a horizontally centered Entry expand to be just wide enough to show it's entire Text ?

1 answer

Before

After

Your answer