Microsoft-ui-xaml: Autosugest box unaligned text

[OnlyOnePro]

Describe the bug
The autosugest box's placeholder and content text do not center-align vertically when indicated. Changing it to bottom doesn't appears to work either.

Steps to reproduce the bug

Steps to reproduce the behavior:
1- Create a Autosugest box using the following boilerplate code:

    <Grid x:Name="ContentArea" Margin="{StaticResource MediumLeftRightMargin}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <!-- Top Bar Definitions -->
        <Grid Grid.Row="0" Margin="15">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2.5*" />
                <ColumnDefinition Width="1.5*" />
            </Grid.ColumnDefinitions>
            <!-- Search Box -->
            <StackPanel Grid.Column="0" Orientation="Horizontal" VerticalAlignment="Center">
                <AutoSuggestBox x:Name="SearchDownload" Width="475" Height="45"
                PlaceholderText="Find a downloaded item" QueryIcon="Find"
                VerticalContentAlignment="Bottom" HorizontalContentAlignment="Left"
                TextChanged="SearchDownload_TextChanged" QuerySubmitted="SearchDownload_QuerySubmitted" SuggestionChosen="SearchDownload_SuggestionChosen" />
            </StackPanel>
         </Grid>

Expected behavior
The text should modify its centering relative to the control itself.

Screenshots

Version Info
2.4.3 recently updated but it didn't solve it either. Used an older version (I think it was 2.2.1) and the problem existed there too, that's why I updated the dependence.

NuGet package version:
Microsoft.UI.Xaml 2.4.3

Windows app type:
| UWP | Win32 |
| :--------------- | :--------------- |
| Yes | |

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (xxxxx) | |
| May 2020 Update (19041) | |
| November 2019 Update (18363) | Yes |
| May 2019 Update (18362) | Yes |
| October 2018 Update (17763) | |
| April 2018 Update (17134) | |
| Fall Creators Update (16299) | |
| Creators Update (15063) | |

| Device form factor | Saw the problem? |
| :----------------- | :--------------- |
| Desktop | Yes |
| Xbox | |
| Surface Hub | |
| IoT | |

Additional context

[StephenLPeters]

Looking at the template (which is in winui 2) it looks like we are only template binding the query button's vertical alignment to the ContentVerticalAlignment, this should be as easy as adding the another template binding to the text box.

[OnlyOnePro]

@StephenLPeters I saw that this problem also exists on TextBox controllers. AutosugestBox inherits from TextBox? Maybe the problem is on that controller. Should I make a new issue for that one?

[StephenLPeters]

Auto suggest box contains a text box, it doesn't inherit. However its possible that there is an issue with textbox in addition to the template issue I highlighted above. If that is the case it will be much harder for us to fix this before winui 3 is published because that code is still in the OS.

[beervoley]

@StephenLPeters @OnlyOnePro I've looked into the issue and the main problem is with TextBox: it doesn't position the content inside correctly based on the ContentAlignment options provided. Until TextBox is fixed (and that code is still in the OS) we cannot easily fix the AutoSuggestBox :)

[OnlyOnePro]

That's a big yikes. That's something outside our control, so nothing can be done.

[beervoley]

@OnlyOnePro @StephenLPeters I can still add code to the TextBox inside the AutoSuggestionBox so it takes ContentAlignment arguments in constructor. In this way, when TextBox issues will be resolved - AutoSuggestionBox will be fixed as well.

What do you think about this?

                    <TextBox x:Name="TextBox"

                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

                        Style="{TemplateBinding TextBoxStyle}"
                        PlaceholderText="{TemplateBinding PlaceholderText}"
                        Header="{TemplateBinding Header}"
                        Width="{TemplateBinding Width}"
                        contract7Present:Description="{TemplateBinding Description}"
                        Foreground="{TemplateBinding Foreground}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        FontSize="{TemplateBinding FontSize}"
                        FontFamily="{TemplateBinding FontFamily}"
                        FontWeight="{TemplateBinding FontWeight}"
                        FontStretch="{TemplateBinding FontStretch}"
                        ScrollViewer.BringIntoViewOnFocusChange="False"
                        Canvas.ZIndex="0"
                        Margin="0"
                        DesiredCandidateWindowAlignment="BottomEdge"
                        UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}"
                        contract7Present:CornerRadius="{TemplateBinding CornerRadius}"/>

[chingucoding]

We can fix this with WinUI 2, there is a missing templatebinding for the ScrollViewer that hosts the input area. Adding the necessary templatebinding to the "ContentElement" of the TextBox template allows us to respect the VerticalContentAlignment and put the text at the bottom for example:

[beervoley]

@chingucoding I've tried it and it doesn't work for me.

Could you please share the code and say which version of Windows SDK are you using?:)

[chingucoding]

I added the following line to the ContentElement inside the TextBox template:

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

I think it's using Windows 10 SDK 19041, I have installed all Windows 10 SDKs:

[beervoley]

@OnlyOnePro @chingucoding Please have a look at this PR that addresses this issue