Microsoft-ui-xaml: TextBlock and TextBox don't line up

Created on 12 May 2019  路  3Comments  路  Source: microsoft/microsoft-ui-xaml

I want to put a TextBlock and a TextBox next to eachother, but the text contents don't line up:

image

Why not? Isn't TextBox like a TextBlock with a border?

Expected behavior

TextBox and TextBlock's text content line up when they are stacked horizontally.

Version Info


| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (xxxxx) | |
| October 2018 Update (17763) | X |
| April 2018 Update (17134) | |
| Fall Creators Update (16299) | |
| Creators Update (15063) | |
| Anniversary Update (14393) | |


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

Additional context

<UserControl
    x:Class="App.Controls.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock Text="Position" VerticalAlignment="Center" Grid.Column="1" Grid.Row="1"/>
        <TextBox Text="Position" VerticalAlignment="Center" Grid.Column="2" Grid.Row="1"/>
    </Grid>
</UserControl>
area-Density area-UIDesign bug team-Controls

Most helpful comment

This looks to be a regression from the Density changes applied in 1809. I know work was done years ago in a previous release to align text across the controls. @mdtauk Baseline Alignment (or other text alignment options) would be a great feature proposal.

I will see if I can come up with a work around before we can get this regression addressed in a WinUI2.x package update.

All 3 comments

The spacing difference is because the TextBox has space for the Header and Description, as well as the Border.
Strangely, if these are both specified and the TextBlock is centered vertically, then the text in the example above is aligned vertically.

I'd be very concerned about any change to the default margins (or padding) within the templates of either of these controls so they do line up in the scenario given.
While it would be nice if they were aligned, any change to the defaults risks changing the layout of any app that uses these controls, which would be any app that displays text! Changes would also risk undoing any apps already adjusted to account for the current behavior.
While the current behavior in undesirable, the solution may be to make it easier to get the two aligned (maybe with a provided style that can be applied to the TextBlock), rather than risk the consequences of changing any defaults.

Pity there is no BaselineAlignment option so the baselines of these kinds of controls could be made to align in the future.

This looks to be a regression from the Density changes applied in 1809. I know work was done years ago in a previous release to align text across the controls. @mdtauk Baseline Alignment (or other text alignment options) would be a great feature proposal.

I will see if I can come up with a work around before we can get this regression addressed in a WinUI2.x package update.

Was this page helpful?
0 / 5 - 0 ratings