I reproduced your problem and found this issue also appeared on the iOS. And on the windows platform, the labels are sligned with the picker's title when using the VerticalOptions="Start"
.
What causes the problem:
You didn't set the HorizontalStackLayout
's HeightRequest
, so it's set as the default value (44). And the picker's default MinimumHeightRequest
is also (44). So the picker fills the HorizontalStackLayout.
The Solution:
- Using the
VerticalOptions="Center"
instead of theVerticalOptions="Start"
.
<HorizontalStackLayout Padding="0" Spacing="0"><Label Text="start (" FontSize="12" VerticalOptions="Center"/><Picker Title="Item 2" FontSize="12" Margin="0"><Picker.Items><x:String>Item 1</x:String><x:String>Item 2</x:String></Picker.Items></Picker><Label Text=") end" FontSize="12" VerticalOptions="Center"/></HorizontalStackLayout>
Setting VerticalOptions
for picker make no sense without setting any height request.
- Make the label and the picker have same height request and then set the label's text center with
VerticalTextAlignment="Center"
.
<HorizontalStackLayout Padding="0" Spacing="0" ><Label VerticalTextAlignment="Center" HeightRequest="44" Text="start (" FontSize="12" VerticalOptions="Start"/><Picker Title="Item 2" FontSize="12" Margin="0" VerticalOptions="Start"><Picker.Items><x:String>Item 1</x:String><x:String>Item 2</x:String></Picker.Items></Picker><Label Text=") end" FontSize="12" HeightRequest="44" VerticalTextAlignment="Center" VerticalOptions="Start"/></HorizontalStackLayout>