Item within a StackLayout inside a FlexLayout is not centered vertically in Xamarin Forms

Question

I have a FlexLayout with a column direction. Within the FlexLayout, I've placed six StackLayouts each containing an image.

I need the six images to be centered within the StackLayouts, instead of now being display at the start.

<FlexLayout Direction="Column" VerticalOptions="Fill" HorizontalOptions="Fill">
    <StackLayout FlexLayout.Grow="1" BackgroundColor="#EBF6FD">
        <StackLayout.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding TimeSheetCommand, Source={x:Reference page}}"></TapGestureRecognizer>
        </StackLayout.GestureRecognizers>

        <ImageButton VerticalOptions="Center" HorizontalOptions="Center"  BackgroundColor="Transparent" Source="timesheet.png" Command="{Binding TimeSheetCommand, Source={x:Reference page}}"></ImageButton>
        <Label VerticalOptions="Center" HorizontalOptions="Center" Text="{x:Static resources:Resources.TitleTimeSheet}" Style="{StaticResource primaryNormalTextStyle}" TextColor="#7CB4DD"></Label>
    </StackLayout>

    <StackLayout FlexLayout.Grow="1" BackgroundColor="#EBF6FD">
        <StackLayout.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding TimeSheetCommand, Source={x:Reference page}}"></TapGestureRecognizer>
        </StackLayout.GestureRecognizers>

        <ImageButton VerticalOptions="Center" HorizontalOptions="Center"  BackgroundColor="Transparent" Source="timesheet.png" Command="{Binding TimeSheetCommand, Source={x:Reference page}}"></ImageButton>
        <Label VerticalOptions="Center" HorizontalOptions="Center"  Text="{x:Static resources:Resources.TitleTimeSheet}" Style="{StaticResource primaryNormalTextStyle}" TextColor="#7CB4DD"></Label>
    </StackLayout>

How can I center the items inside the StackLayout?

Why not set the Vertical and Horizontal options of your Inner Item as `CenterAndExpand`? that should do it! — FreakyAli, Mar 25 '19 at 08:26
Can you update your question so, I can take a look if you are doing what I intended you to be doing or not? — FreakyAli, Mar 25 '19 at 08:33
sorry i think it works now . I placed the stacklayout between image and label with centerAndExpand — LittleFunny, Mar 25 '19 at 08:39
You can post your answer and mark it.So that more people will see it. — Lucas Zhang, Mar 26 '19 at 01:32

Item within a StackLayout inside a FlexLayout is not centered vertically in Xamarin Forms

0 Answers0