Vfrdtyky

If I'm trying to place a Label control which sits in the middle of the screen as per the below code, only one line in the Label is displayed, rest of the text with in the label is not displayed even with VerticalOptions="FillAndExpand"

<!-- StackLayout -->

<BoxView Style="{StaticResource separator}"></BoxView>

  <StackLayout Style="{StaticResource layoutSpacingPrimary}" BackgroundColor="#EFEFF4" HorizontalOptions="FillAndExpand">

    <Label Text="Looking to update your name?" Style="{StaticResource labelTitleBold}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>

    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

        <Label Text="If you need to update your name please contact us and we can help with this request" Style="{StaticResource labelTitle}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>

    </StackLayout>

  </StackLayout>

  <BoxView Style="{StaticResource separator}"></BoxView>

<!-- StackLayout -->

Currently the UI is being displayed as below,

Here, I'm not seeing the full test "If you need to update your name please contact us and we can help with this request" being displayed

If I enable the VerticalOptions="FillAndExpand" to the root most element above the control and below as in the below code.

<BoxView Style="{StaticResource separator}"></BoxView>

  <StackLayout Style="{StaticResource layoutSpacingPrimary}" BackgroundColor="#EFEFF4" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

    <Label Text="Looking to update your name?" Style="{StaticResource labelTitleBold}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>

    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

        <Label Text="If you need to update your name please contact us and we can help with this request" Style="{StaticResource labelTitle}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"></Label>

    </StackLayout>

  </StackLayout>

  <BoxView Style="{StaticResource separator}"></BoxView>

The UI comes up like below,

How to make sure that the control takes only the required space and displays the full content. Please let me know if one had faced a similar issue.

As explained in the docs:

The number of lines displayed by a Label can be specified by setting the Label.MaxLines property to a int value:

• When MaxLines is 0, the Label respects the value of the LineBreakMode property to either show just one line, possibly truncated, or all lines with all text.


• When MaxLines is 1, the result is identical to setting the LineBreakMode property to NoWrap, HeadTruncation, MiddleTruncation, or TailTruncation. However, the Label will respect the value of the LineBreakMode property with regard to placement of an ellipsis, if applicable.


• When MaxLines is greater than 1, the Label will display up to the specified number of lines, while respecting the value of the LineBreakMode property with regard to placement of an ellipsis, if applicable. However, setting the MaxLines property to a value greater than 1 has no effect if the LineBreakMode property is set to NoWrap.

IDK what exactly do your styles but set LineBreakMode and MaxLines like this:

<Label 

    Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In facilisis nulla eu felis fringilla vulputate. Nullam porta eleifend lacinia. Donec at iaculis tellus."

    LineBreakMode="WordWrap"

    MaxLines="2" />

And I think you should probably change your VerticalOptions="FillAndExpand" to VerticalOptions="StartAndExpand" for that part.

HIH