mauipicker

MAUI: unexpected height of Picker control

I've encountered with strange displaying of Picker control (MAUI 8.0) on Android when I trying to arrange line by VerticalOptions="Start":

enter image description here

At a glance is seems like this control has predefined Padding attribute (top and bottom, and spacing between brackets around), but unfortunately it doesn't ever have it.

Sample code:

    <HorizontalStackLayout Padding="0" Spacing="0">
        <Label 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"
            VerticalOptions="Start"/>
    </HorizontalStackLayout>

I know that it is possible to replace it by the toolkit's Popup, but it is a workaround, not a solution. I suspect that I'm missing something very easy and obvious...

Solution

  • 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:

    1. Using the VerticalOptions="Center" instead of the VerticalOptions="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.

    1. 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>