0

I have a Grid, with two columns and one row, thus making two cells. Each cell contains a label. One label has the default font size, while the other is set to 20 and both have their Vertical Alignment attribute set to Bottom BUT there is a two pixel difference between where they sit in the (As illustrated in my lovely image below).

Example of Pixel difference

Now is this expected and a working part of WPF? As I would expect them to both sit on the same line. The only way I can currently think of doing this is fiddling around with the margin values.

    <Grid>
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="75"/>
          <ColumnDefinition Width="125"/>
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
          <RowDefinition/>
      </Grid.RowDefinitions>
      <Label Grid.Column="0" Grid.Row="0" Content="Notes" FontSize="20"  VerticalAlignment="Bottom"/>
      <Label Grid.Column="1" Grid.Row="0" Content="(Max something 1,00)" VerticalAlignment="Bottom"/>
    </Grid>

Answered Sheridan's answer as correct. Although I didn't use his exact implementation for mine, but one of his links gave the answer that was relevant to my code and follows the same principle. I've included my code below for anyone else who is trying this.

        <Grid>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="75"/>
            <ColumnDefinition Width="125"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition/>
          </Grid.RowDefinitions>
          <TextBlock Grid.Column="0" Grid.Row="0" FontSize="20" LineHeight="44" LineStackingStrategy="BlockLineHeight" VerticalAlignment="Bottom">Notes</TextBlock>
          <TextBlock Grid.Column="1" Grid.Row="0" LineHeight="44" LineStackingStrategy="BlockLineHeight" VerticalAlignment="Bottom">(something else 1,000)   </TextBlock>
        </Grid>

enter image description here

Community
  • 1
  • 1
metoyou
  • 639
  • 1
  • 7
  • 22

2 Answers2

1

There are many answers to this question that can be found online. One example is the Align bottoms of text in controls post here on Stack Overflow. However, most of the answers (like that one) suggest that you have to write code to fix this issue. I disagree with them. You can use the BaselineAlignment property of the Inline class to do this for you. Try something like this:

<TextBlock>
    <Span FontSize="40">Notes</Span>
    <Span BaselineAlignment="Baseline">(Max something 1,00)</Span>
</TextBlock>

enter image description here

Community
  • 1
  • 1
Sheridan
  • 68,826
  • 24
  • 143
  • 183
0

That "issue" appears because of your font + size of your font.

What actually happens there is this: your Label has a specific border(size) and the font is centered in that "box". Vertical-alignment sets the box at bottom, so the proper text will not be modified.

Here you can see the difference of your Labels size

  • That makes sense, but how can I set the text to be the bottom of that box as well? – metoyou Mar 14 '14 at 15:53
  • You can by setting the margin-top ( You have to resize that box : manually - with cursor or automatic by adding margin-top) –  Mar 16 '14 at 16:12