Vertical alignment of nested label is not working

[nike61]

There is no way to create data template with vertically centered label:

<wheelPickerForms:WheelDefinition Width="*" HorizontalOptions="Center" Alignment="Center" IsCircular="True" RowHeight="50">
                        <DataTemplate>
                            <Grid>
                                <Label 
                                    FontSize="24"
                                    TextColor="White" Text="{Binding .}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                            </Grid>
                        </DataTemplate>
                    </wheelPickerForms:WheelDefinition>

The label remains on top. I want this because there is no way to change size of element without DataTemplate

[softlion]

That works as expected. Read your code again and be smarter.

You forced RowHeight="50". ok The label is centered inside a Grid. The Grid height is not specified. What do you expect it to be ? Well no, it will be the same height as the label, not the height of the cell.

Add VerticalOption="Fill" to your Grid to obtain what you want.

[nike61]

No, the same issue here (I've already tried that):

  <wheelPickerForms:WheelDefinition Width="*" HorizontalOptions="Center" Alignment="Center" IsCircular="True" RowHeight="50">
                        <DataTemplate>
                            <Grid Background="Blue">
                                <Label
                                    Background="yellow"
                                    VerticalOptions="Fill"
                                    FontSize="24"
                                    TextColor="White" Text="{Binding .}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
                            </Grid>
                        </DataTemplate>
                    </wheelPickerForms:WheelDefinition>

The blue color is the background of Grid The yellow color is the background of Label

[softlion]

Your Grid will take the same height as your Label. So it's expected.

[nike61]

But the height is different. Do you see blue and yellow backgrounds?

[softlion]

I'm not sure of what I see. The blue is not aligned with the yellow on the right. If that was the same control, their right side would be aligned. At least the yellow won't go farther than the blue.

Could you provide a full repro project ?

[softlion]

Works perfectly.

code:

<wheelPickerForms:WheelPicker 
                ItemsSourceMulti="{Binding WheelOptions.ItemsSource}"
                SelectedItemsIndex="{Binding WheelOptions.SelectedItemsIndex}" 
                HorizontalOptions="Fill">
    <wheelPickerForms:WheelDefinition Width="Auto" HorizontalOptions="Center" Alignment="Center" RowHeight="50">
        <DataTemplate>
            <Grid BackgroundColor="Red">
                <Label VerticalOptions="Center" Text="{Binding .}" TextColor="Black" HorizontalOptions="Center" FontSize="Body" />
            </Grid>
        </DataTemplate>
    </wheelPickerForms:WheelDefinition>
</wheelPickerForms:WheelPicker>

[softlion]

Are you on iOS or Android ?

It seems the issue exist and happens on iOS only.

A workaround is to use

      <wheelPickerForms:WheelDefinition Width="Auto" HorizontalOptions="Center" />