Forum Xamarin.Forms

How to horizontally center the combination of two wrapped Labels, without extra spacing?

JohnHardmanJohnHardman GBUniversity admin
edited September 24 in Xamarin.Forms

I want to have two Labels, side by side, with the combination of the two centered horizontally on the page, taking up the least horizontal space possible.

As per the image, when the Labels do not wrap (using XF 4.8), the result is as expected (first example in the image).

However, when the Labels wrap, despite HorizontalOptions not having AndExpand, a whole load of white space (ok, red and green in the image) appears to the right of the wrapped text. As the result takes up the whole of the horizontal space, I guess the combination of Labels is technically still centered on the page, but it isn’t the desired effect, nor what I would expect without AndExpand.

Somehow, I want to get rid of the extra space to the right of the wrapped text, ideally as per the fourth row in the image, but possibly as per the third row if the fourth is too awkward to achieve.

Personally, I would expect wrapped Labels to be padded with space as per the second row only if AndExpand is used, which is not what is currently happening in XF 4.8 .

So, two questions.
(1) Is that extra space when AndExpand is not being used a bug in XF?
(2) Is there any workaround available to produce the result in the fourth (or third) row?

[Edit: I've logged an issue at https://github.com/xamarin/Xamarin.Forms/issues/12236 but would still like to know if it's possible to workaround this]

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited September 25

    I would like to suggest you use Gird instead of StackLayout as parent layout , it is more controllable.

    For example

    <Grid ColumnSpacing="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="auto"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
            <Label FontSize="25" x:Name="label1" BackgroundColor="Red" />
            <Label FontSize="25" x:Name="label2" Grid.Column="1"  BackgroundColor="Green"/>
    </Grid>
    

  • JohnHardmanJohnHardman GBUniversity admin

    @ColeX said:
    I would like to suggest you use Gird instead of StackLayout as parent layout , it is more controllable.

    Unfortunately, that doesn't solve the problem of the excess space when the text in the Label wraps.

  • stXamDevstXamDev Member ✭✭✭
    edited September 26

    @JohnHardman you can try this

    In this the left side has issue in alignment(opposite to row 3) but the right side is as expected.

    <StackLayout BackgroundColor="Red" Orientation="Horizontal" VerticalOptions="FillAndExpand"
                         Spacing="0">
                <Label HorizontalOptions="Center" Text="5:00 PM text text" **HorizontalTextAlignment="End"**/>
                <Label HorizontalOptions="Center" Text="Every Weekday is a text" **HorizontalTextAlignment="Start"**/>
            </StackLayout>
    
  • JohnHardmanJohnHardman GBUniversity admin

    @stXamDev

    Unfortunately, specifying HorizontalTextAlignment doesn't make any difference to the extra space that appears.

  • ColeXColeX Member, Xamarin Team Xamurai

    @JohnHardman said:

    @ColeX said:
    I would like to suggest you use Gird instead of StackLayout as parent layout , it is more controllable.

    Unfortunately, that doesn't solve the problem of the excess space when the text in the Label wraps.

    Could you attach your original code ? I need to reproduce it and try to figure out if there is a workaround .

Sign In or Register to comment.