Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TextWrapping, TextTrimming, Center Aligned and vertically stretching

I have a seemingly simple layout problem in Windows Phone. The problem is illustrated in the image below:

Illustration

My requirements are as follows:

  • Subtitle must always be visible, at the expense of the overflowing text of the title.
  • Title and subtitle together must be vertically and horizontally centered.

When I use a StackPanel or auto-height Grid rows, the box will overflow. If I try star height rows I can't control a large title.

like image 433
Bas Avatar asked Nov 26 '25 00:11

Bas


1 Answers

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
   <Grid.RowDefinitions>
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
   </Grid.RowDefinitions>
   <TextBlock ...>Title</TextBlock>
   <TextBlock Grid.Row="1" ...>SubTitle</TextBlock>
</Grid>

Found the solution, this will cover everything except the bottom element overflowing the whole screen, in my case this won't be possible. It only works if the parent container does not have infinite height provided (like a StackPanel).

Basically, auto height takes 'precedence' over star-height elements. This gives the bottom TextBlock room to choose its height, and then assigns the remaining available space to the top element.

like image 148
Bas Avatar answered Nov 28 '25 16:11

Bas



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!