Layout doesn't stick to my option

Question

This is my xaml

<Border
    BackgroundColor="#E1E4D8"
    HorizontalOptions="Center"
    VerticalOptions="Center"
    WidthRequest="800">

    <VerticalStackLayout
        HorizontalOptions="CenterAndExpand"
        VerticalOptions="CenterAndExpand">

        <Label
            Padding="10"
            FontAttributes="Bold"
            FontSize="Medium"
            HorizontalOptions="Center"
            Text="{Binding WelcomeText}" />

        <Border
            Margin="0,10,0,0"
            Padding="10"
            VerticalOptions="Center">
            <VerticalStackLayout
                BackgroundColor="#6D6D2B"
                BindableLayout.ItemsSource="{Binding Roles}"
                HorizontalOptions="FillAndExpand">
                <BindableLayout.ItemTemplate>
                    <DataTemplate x:DataType="model:UserRoles">
                        <Border
                            Margin="10"
                            BackgroundColor="{Binding SelectedColor}">
                            <Label
                                Margin="10"
                                HorizontalTextAlignment="Center"
                                Text="{Binding Name}" />
                            <Border.GestureRecognizers>
                                <TapGestureRecognizer
                                    Command="{Binding Path=RoleSelectedCommand, Source={x:RelativeSource AncestorType={x:Type vm:RoleSelectionPageViewModel}}}"
                                    CommandParameter="{Binding .}" />
                            </Border.GestureRecognizers>
                        </Border>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </VerticalStackLayout>
        </Border>

        <Button
            Margin="0,20,0,20"
            BackgroundColor="#007BFF"
            Command="{Binding UpdateUserCurrentRoleCommand}"
            CornerRadius="5"
            Text="Select role"
            TextColor="White" />

    </VerticalStackLayout>
</Border>

If I run

If I fix it

 <Border
     Margin="0,10,0,0"
     Padding="10"
     VerticalOptions="Center">
     <VerticalStackLayout
         BackgroundColor="#6D6D2B"
         BindableLayout.ItemsSource="{Binding Roles}">
         <BindableLayout.ItemTemplate>
             <DataTemplate x:DataType="model:UserRoles">
                 <Border
                     Margin="10"
                     BackgroundColor="{Binding SelectedColor}"
                     HorizontalOptions="FillAndExpand">
                     <Label
                         Margin="10"
                         HorizontalTextAlignment="Center"
                         Text="{Binding Name}" />
                     <Border.GestureRecognizers>
                         <TapGestureRecognizer
                             Command="{Binding Path=RoleSelectedCommand, Source={x:RelativeSource AncestorType={x:Type vm:RoleSelectionPageViewModel}}}"
                             CommandParameter="{Binding .}" />
                     </Border.GestureRecognizers>
                 </Border>
             </DataTemplate>
         </BindableLayout.ItemTemplate>
     </VerticalStackLayout>
 </Border>

 <Button
     Margin="0,20,0,20"
     BackgroundColor="#007BFF"
     Command="{Binding UpdateUserCurrentRoleCommand}"
     CornerRadius="5"
     Text="Select role"
     TextColor="White" />

but if I run it again I get

Why

Answer 1

It was a problem with the first stacklayout