How can I prevent labels from taking up all available horizontal space when word wrapping?

JHiebertJHiebert ✭✭Member ✭✭

I have labels inside a grid and I want them to take up only the necessary space to fit the text. With short messages this works correctly, but with longer messages that text wrap the label fills the available space even though the way the words wrapped means that it doesn't need it.

My account isn't allowed to post direct links yet but here is a screenshot:
photos.google.com/share/AF1QipNDOK7HtPb3rLREC2dhufaKCA9CnSpIqk-rRJTSSKQa-XO9c8UzNbHxVEMpfKlMOQ/photo/AF1QipMVZVv3ciXt9xafg_cfkVU68Te9_iwamMrWB7A6?key=ZDdjTnRpQkZaeWRfcU0yOXljZGNsTEdDS3p3XzdB

As you can see, the pink label takes up only the necessary amount of space, while the aquamarine one expanded to fill the available space despite having a large area on the right that doesn't have any text in it.

I've tried searching for solutions with no luck. The only thread I found that even mentions this problem has two developers bickering about whether or not the one trying to help actually understands what the problem is, and a solution is never posted. Does anyone know how to fix this?

XAML:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="90"/>
</Grid.ColumnDefinitions>
<Label BackgroundColor="Aquamarine"
HorizontalTextAlignment="Left"
HorizontalOptions="Start"
Grid.Row="0" Grid.Column="0">
Hippopotamus vocabulary accentuates educational imbalances. Gymnastic crocodilians abbreviate gratuitously enourmous nomenclature.
</Label>
<Label BackgroundColor="Pink"
HorizontalTextAlignment="Left"
HorizontalOptions="Start"
Grid.Row="1" Grid.Column="0"
Margin="0,0,90,0">
Short.
</Label>
<StackLayout Grid.Row="0" Grid.Column="1" BackgroundColor="Yellow" HorizontalOptions="FillAndExpand"></StackLayout>
<StackLayout Grid.Row="1" Grid.Column="1" BackgroundColor="Green" HorizontalOptions="FillAndExpand"></StackLayout>
</Grid>

Tagged:

Answers

  • ShantimohanElchuriShantimohanElchuri ✭✭✭✭✭ USMember ✭✭✭✭✭
    edited April 8

    @JHiebert You link in text is given Error 404.

    Edit: Actually when posted the link here, it is pointing to this thread itself.

  • JHiebertJHiebert ✭✭ Member ✭✭

    @ShantimohanElchuri is it? That's strange, it works fine for me even on browsers where I'm not logged into the google account that the photo belongs to. It's very frustrating that the forum won't let me just post a proper link to it.

  • ClintStLaurentClintStLaurent ✭✭✭✭✭ USUniversity ✭✭✭✭✭
    edited April 8

    @ShantimohanElchuri said:
    @JHiebert You link in text is given Error 404.

    Edit: Actually when posted the link here, it is pointing to this thread itself.

    Does the same for me

    Here's the picture for simplicity sake.

  • ClintStLaurentClintStLaurent ✭✭✭✭✭ USUniversity ✭✭✭✭✭

    Space gets allocated first.
    Then wrap gets applied if its needed.
    And you can see the result of that logic.
    You could make your own renderer that would loop through and reduce width until it detects a re-wrap event, then enlarge it again. But that's a pain.

    <ColumnDefinition Width="Auto"/>
     <ColumnDefinition Width="90"/>
    

    Can you make some changes there to give a more fixed sizing? Maybe two equal sized columns would still look good?

  • JHiebertJHiebert ✭✭ Member ✭✭

    @ClintStLaurent this is a very primitive example I threw together to easily show the problem I was running into. The actual label grid is a chat-style messaging page, the fixed width column is just to prevent the left-hand messages from stretching all the way to the right and I have a similar setup to prevent right-hand messages from going all the way left.

    Thanks for the suggestion to use a custom renderer. I'm under pressure to get a usable version of my project out soon so considering the additional effort required I'll probably just accept the extra space for now and move on to more important issues. I'll try and create the renderer later and see if I can get that working.

    Thanks for posting the pic for me! I wish they wouldn't ban images for new posters, they can be necessary to explain issues properly.

  • ShantimohanElchuriShantimohanElchuri ✭✭✭✭✭ USMember ✭✭✭✭✭

    @JHiebert said:
    @ClintStLaurent this is a very primitive example I threw together to easily show the problem I was running into. The actual label grid is a chat-style messaging page, the fixed width column is just to prevent the left-hand messages from stretching all the way to the right and I have a similar setup to prevent right-hand messages from going all the way left.
    ...

    Probably two column grid may not work properly for you. You can try the following:

    1. Declare only one Grid.Column
    2. Set ColumnWidth="Auto"
    3. Use only one Label in each Grid.Row
    4. For left aligned messages set Label Properties: HorizontalOptions="Start" HorizontalTextAlignment="Start" WidthRequest="100"
    5. For right aligned messages set Label Properties: HorizontalOptions="End" HorizontalTextAlignment="End" WidthRequest="100"
    6. Left and Right properties may be set based on binding a boolean value and using Converters

    Caution: I have not tried this myself. But this is based on the premise, that the WidthRequest is defecto maximum width setting.

Sign In or Register to comment.