Xamarin.Forms Picker content not centered vertically

Dima Shmushkin 96 Reputation points
2021-04-20T13:27:16.28+00:00

Ive made a Frame with a Grid, containing an Image, Picker and another Image in 3 columns.
My problem is that for some reason the picker content is centered to the bottom, and top half of it is missing for some reason.
Ive tried using custom renderers for gravity/text alignment, but no success....

This is the XAML code:

                    <Picker BackgroundColor="green"  
                        Grid.Column="1"  
                        x:Name="QuestionsPicker"  
                        ItemsSource="{Binding SecurityQuestions}"  
                        SelectedIndex="{Binding SelectedQuestionIndex, Mode=TwoWay}"  
                        SelectedItem="{Binding SelectedQuestion, Mode=TwoWay}"                      
                        />  

89555-capture.png

and this is the result....

VerticalOptions and VerticalTextAlignment not working.

This is the Frame:

            <Frame Style="{StaticResource LoginEntryFrame}">  
                <Grid ColumnSpacing="8" IsClippedToBounds="True" VerticalOptions="FillAndExpand">  
                    <Grid.ColumnDefinitions>  
                        <ColumnDefinition Width="30" />  
                        <ColumnDefinition Width="*" />  
                        <ColumnDefinition Width="30" />  
                    </Grid.ColumnDefinitions>  
  
                    <Image   
                        Grid.Column="0"  
                        Source="ic_question"   
                        Aspect="AspectFill"  
                        VerticalOptions="FillAndExpand"   
                        HorizontalOptions="CenterAndExpand"   
                        />  
  
                    <Picker BackgroundColor="green"  
                        Grid.Column="1"  
                        x:Name="QuestionsPicker"  
                        ItemsSource="{Binding SecurityQuestions}"  
                        SelectedIndex="{Binding SelectedQuestionIndex, Mode=TwoWay}"  
                        SelectedItem="{Binding SelectedQuestion, Mode=TwoWay}"                      
                        />  
  
                    <ImageButton   
                        Grid.Column="2"  
                        x:Name="PickerExpandIcon"  
                        Source="ic_expand"  
                        BackgroundColor="Transparent"  
                        HorizontalOptions="End"  
                        VerticalOptions="Center"  
                        HeightRequest="20"  
                        WidthRequest="20"  
                        Margin="0,0,8,0"                          
                        />  
                </Grid>  
            </Frame>  

and its Style:

            <Style x:Key="LoginEntryFrame" TargetType="Frame">  
                <Setter Property="HeightRequest" Value="50" />  
                <Setter Property="Padding" Value="10, 5, 10, 5" />  
                <Setter Property="HasShadow" Value="False" />  
                <Setter Property="BorderColor" Value="Gray" />  
                <Setter Property="BackgroundColor" Value="Transparent" />  
                <Setter Property="CornerRadius" Value="4" />  
            </Style>  
Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
4,822 questions
No comments
{count} votes

Accepted answer
  1. Dima Shmushkin 96 Reputation points
    2021-04-21T05:45:25.45+00:00

    After some more digging i found out that the "covered" top half of the picker is reserved for its Title property... It worked out after i set the renderers to the following:

    Android:

            protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
            {
                base.OnElementChanged(e);
    
                if (Control != null)
                {
                    Control.Background = null;
                }
            }
    

    iOS:

            protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
            {
                base.OnElementChanged(e);
    
                if (this.Control == null) return;
    
                Control.Layer.BorderWidth = 0;
                this.Control.BorderStyle = UITextBorderStyle.None;
            }
    

    its weird though, that in your case it worked with no issues.

    No comments

1 additional answer

Sort by: Most helpful
  1. 2021-04-21T04:27:03.72+00:00

    Test on iOS and Android with your code but it works fine .

    89759-capture.png 89744-2.png

    Could you provide us a basic, minimal project to reproduce the issue ?

    You can upload it to github and attach the repo link here .

    No comments