Cant make a inner stacklayout center...

Question

Hey,

Im trying to make the inner stack layount center but dosent get it to work...
When im reading on stackoverflow then i do right but it dosent work...
Any ideas?

    <ContentPage.Content>
        <Frame StyleId="FrameContent">
            <StackLayout Spacing="20" BackgroundColor="LightPink">
                <StackLayout>
                    <Image Source="Base_Logo.png"></Image>
                </StackLayout>




                <StackLayout VerticalOptions="Center" 
                             HorizontalOptions="Center"

                             BackgroundColor="LightBlue">
                    <Label x:Name="WelcomeHeaderLbl"
                           StyleId="LblHeader"
                           FontSize="28"
                           HorizontalOptions="Center">
                    </Label>
                    <Picker x:Name="LanguagePicker"
                            StyleId="LanguagePicker"
                            HorizontalOptions="Center"
                            VerticalOptions="Center"
                            Title="Choose Language">
                    </Picker>
                </StackLayout>




                <StackLayout>
                    <Button x:Name="ContinueButton"
                            StyleId="ContinueButton"
                            Clicked="ContinueButton_Clicked"
                            HorizontalOptions="Center">
                    </Button>
                </StackLayout>
            </StackLayout>
        </Frame>
    </ContentPage.Content>

The stacklayout with space around it is the one that should be center...

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

Try to change the VerticalOptions from value Center to VerticalOptions.

VerticalOptions="CenterAndExpand"

The code is:

<ContentPage.Content>  
    <Frame StyleId="FrameContent">  
        <StackLayout Spacing="20" BackgroundColor="LightPink">  
            <StackLayout>  
                <Image Source="image.png"></Image>  
            </StackLayout>  

            <StackLayout VerticalOptions="CenterAndExpand"   
                          HorizontalOptions="Center"  
                            
                          BackgroundColor="LightBlue">  
                <Label x:Name="WelcomeHeaderLbl"  
                        StyleId="LblHeader"  
                        FontSize="28"  
                        HorizontalOptions="Center">  
                </Label>  
                <Picker x:Name="LanguagePicker"  
                         StyleId="LanguagePicker"  
                         HorizontalOptions="Center"  
                         VerticalOptions="Center"  
                         Title="Choose Language">  
                </Picker>  
            </StackLayout>  
            <StackLayout>  
                <Button x:Name="ContinueButton"  
                        Text="test button"  
                         StyleId="ContinueButton"  
                         HorizontalOptions="Center">  
                </Button>  
            </StackLayout>  
        </StackLayout>  
    </Frame>  
</ContentPage.Content>  

The result is:

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.