question

DimaShmushkin-9778 avatar image
0 Votes"
DimaShmushkin-9778 asked DimaShmushkin-9778 edited

Xamarin.Forms Picker content not centered vertically

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>



dotnet-xamarin
capture.png (6.3 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

DimaShmushkin-9778 avatar image
0 Votes"
DimaShmushkin-9778 answered DimaShmushkin-9778 edited

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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ColeXia-MSFT avatar image
0 Votes"
ColeXia-MSFT answered

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 .



capture.png (23.1 KiB)
2.png (20.9 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.