Textbox VerticalContentAlignment is not working properly. (WINUI_DeskTop)

[SathiyathanamSathish]

Describe the bug

Textbox VerticalContentAlignment is not working properly.

Steps to reproduce the bug

1. Run the sample.
2. Set the textbox VerticalContentAlignment as Bottom.

Observed behavior:
You can see the textbox text is not vertically aligned.

Please refer the code snippets from below:

Expected behavior

The textbox text is should be vertically aligned.

Screenshots

TextBox.VerticalContentAlignment.issue.mp4

NuGet package version

No response

Windows app type

• UWP
• Win32

Device form factor

Desktop

Windows version

October 2020 Update (19042)

Additional context

Please see the system information from the below screenshots:

[kmgallahan]

https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.control.verticalcontentalignment?view=winui-3.0

A value for the VerticalContentAlignment property only affects layout behavior for a control when its template uses the VerticalContentAlignment property as the source of a VerticalAlignment value for presenters or content areas within. On other controls, setting VerticalContentAlignment has no effect.

https://github.com/microsoft/microsoft-ui-xaml/blob/main/dev/CommonStyles/TextBox_themeresources.xaml

[SathiyathanamSathish]

Hi @kmgallahan ,

Thank you for your reply. Is there any possibility align the text content vertically in winui textbox?

Regards,
Sathiyathanam

[MikeHillberg]

I'm not certain I understand what "vertical alignment" means here. Does that mean

• Multi-line text is vertically aligned on the left/right/center edges?
• One-line text is at the bottom, two-line text has the first line at second-to-bottom and second line at bottom, etc?
• Vertical orientation, so you have to turn your head sideways to read it?

[SathiyathanamSathish]

Hi @MikeHillberg ,

Thanks for your comment. And we just need to know is there any possibility align the TextContent Vertically ie. We just need to align the below TextBox Text to bottom or center. Currently the Text is aligned look like Top. We have tried to use the VerticalContentAlignment but it does not working.

XAML:

 <TextBox  Height="40" Text="TextBox" />

Please share your suggestion to align the TextBox Text to bottom or Center.

[TimKEviden]

I have got the same problem and did not find a solution. Will update if I find something

[ThierryPalmSens]

For a single-line text box, the vertical alignment does appear to be centred. If you add certain characters, for example, lowercase letters like jgy it will appear more centred.

It would be nice if there was an additional property on a text box to specify the type of content. If you only want to add numbers the alignment will always appear to be off a bit.

[MaiastraMan]

Just wanted to add that I encountered this exact issue, and if anyone finds a solution I would greatly appreciate it.

[ThierryPalmSens]

This is more of a workaround but playing around with the margins, padding and can improve the layout a bit.

Padding="3,2,3,0"
Margin="1,1,1,-2"

You will need to play with the values yourself to get the best results.

[kqakqakqa]

Texts can be centered using Padding (needs some calculation).

[MartyIX]

I'm not certain I understand what "vertical alignment" means here. Does that mean

* Multi-line text is vertically aligned on the left/right/center edges?

* One-line text is at the bottom, two-line text has the first line at second-to-bottom and second line at bottom, etc?

* Vertical orientation, so you have to turn your head sideways to read it?

@MikeHillberg I believe the expected alignment is more clear here: #9528 (comment) - i.e.