Xamarin.Forms：如何在行中居中放置多重标签？

Question

I try to vertically center a multiline Label that contains a text that can be displayed on 1 or 2 lines.

For the moment, I'm not able to get the expected rendering...

I can have the multiline label that automatically extends but it is top aligned and not centered:

This is the attached XAML:

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="0" />
</Grid.RowDefinitions>

<local:MultiLineLabel
    Grid.Row="0"
    Grid.Column="1"
    BackgroundColor="Orange"
    Text="{ Binding encart_titre }"         
    VerticalTextAlignment="Center"
    LineBreakMode="TailTruncation"
    Lines="2"
    ...
/>

I can also center the label, but in this case it doesn't auto extends:

This is the attached XAML:

<Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="Auto" />
    <RowDefinition Height="0" />
</Grid.RowDefinitions>

<local:MultiLineLabel
    Grid.Row="0"
    Grid.Column="1"
    BackgroundColor="Orange"
    Text="{ Binding encart_titre }"         
    VerticalTextAlignment="Center"
    LineBreakMode="TailTruncation"
    Lines="2"
    VerticalOptions="FillAndExpand"
    ...
/>

Would you have any explanation? I also tried to add StackLayound around the Label, but this didn't change anything...

Answer 1

The first choice for centering a control would be to use VerticalOptions="CenterAndExpand" , have you tried that instead of VerticalOptions="FillAndExpand" ? Here's more information about the LayoutOptions in Xamarin.Forms.

So, this would be the correct way to center vertically:

<local:MultiLineLabel
    Grid.Row="0"
    Grid.Column="1"
    BackgroundColor="Orange"
    Text="{ Binding encart_titre }"         
    VerticalTextAlignment="Center"
    LineBreakMode="TailTruncation"
    Lines="2"
    VerticalOptions="CenterAndExpand" <!-- This one here -->
    ...
/>