Cannot scroll xaml page created with Xamarin.Forms on mobile device

Issue

Scrolling is not working in my XAML file. It cuts below content and doesnt show all content. Even when i try to scroll to see bottom it does not allow scrolling. There should be green button bottom. But i cannot scroll to see it. I tried to add scrollview and listview but i couldnt manage to scroll it down to page. So cannot see all content by sliding down.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage    xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:abstractions="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
            xmlns:d="http://xamarin.com/schemas/2014/forms/design"
            xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            NavigationPage.HasNavigationBar="False"
            mc:Ignorable="d"
            x:Class="CXFMob.OperatiPage">


<StackLayout x:Name="stack1" BackgroundColor="White" VerticalOptions="FillAndExpand">
        <StackLayout x:Name="stack2" BackgroundColor="DodgerBlue" HeightRequest="120">
            <Frame
            Margin="10"
            BackgroundColor="White"
            CornerRadius="12"
            HeightRequest="300"
            TranslationY="40">

                <StackLayout Orientation="Horizontal">

                    <Frame
                    Margin="0,0,10,0"
                    Padding="10"
                    BackgroundColor="DodgerBlue"
                    BorderColor="LightGray"
                    CornerRadius="40"
                    HasShadow="True"
                    HeightRequest="20"
                    IsClippedToBounds="True"
                    WidthRequest="60">

                        <abstractions:CircleImage
                        Aspect="AspectFit"
                        HeightRequest="20"
                        Source="prince"
                        WidthRequest="20" />
                    </Frame>
                    <StackLayout>
                        <Label Text=" "></Label>
                        <Label>
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span
                                    FontAttributes="Bold"
                                    FontSize="Body"
                                    Text="MOBILE"
                                    TextColor="Red" />
                                    <Span Text="   Tapper" TextColor="LightGray" />
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>

                        <Label
                        FontAttributes="Bold"
                        FontSize="16"
                        Text="OPERATI"
                        TextColor="DarkSlateGray" />
                    <!--<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
                            <Label>
                            <Label.FormattedText>
                                <FormattedString>
                                    <Span
                                        FontAttributes="Bold"
                                        Text=" Mobile "
                                        TextColor="LightGray" />
                                    <Span
                                        FontAttributes="Bold"
                                        FontSize="Body"
                                        Text=" 0244567876"
                                        TextColor="Black" />
                                </FormattedString>
                            </Label.FormattedText>
                        </Label>
                        </StackLayout>-->
                    </StackLayout>
                </StackLayout>
            </Frame>

            <Frame
            Margin="10"
            CornerRadius="12"
            BackgroundColor="White"
            TranslationY="40">
                <StackLayout Margin="5">
                    <Grid
                    ColumnSpacing="20"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Label x:Name="mylabel2" Text="cdcdcdc" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
                    </Grid>
                </StackLayout>
            </Frame>
            <Frame
            Margin="10"
            CornerRadius="12"
            BackgroundColor="White"
            TranslationY="40">
                <StackLayout Margin="5">
                    <Grid
                    ColumnSpacing="20"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Label x:Name="mylabel3" Text="vfvfvf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
                    </Grid>
                </StackLayout>
            </Frame>
            <Frame
            Margin="10"
            CornerRadius="12"
            BackgroundColor="White"
            TranslationY="40">
                <StackLayout Margin="5">
                    <Grid
                    ColumnSpacing="20"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Label x:Name="mylabel4" Text="rrfrfrfrf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
                    </Grid>
                </StackLayout>
            </Frame>
            <Frame
            Margin="10"
            CornerRadius="12"
            BackgroundColor="White"
            TranslationY="40">
                <StackLayout Margin="5">
                    <Grid
                    ColumnSpacing="20"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Label x:Name="mylabel5" Text="hgyhyhyhyh" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
                    </Grid>
                </StackLayout>
            </Frame>
            <Frame
            Margin="10"
            CornerRadius="12"
            BackgroundColor="White"
            TranslationY="40">
                <StackLayout Margin="5">
                    <Grid
                    ColumnSpacing="20"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Button
                        x:Name="btnTransfer"
                        Margin="20"
                        BackgroundColor="#FF2ED833"
                        Clicked="btnTransfer_Clicked"
                        CornerRadius="20"
                        HorizontalOptions="FillAndExpand"
                        Text="Main Page"
                        TextColor="White"
                        VerticalOptions="EndAndExpand" />
                    </Grid>
                </StackLayout>
            </Frame>

        </StackLayout>
</StackLayout>

Solution

As Jason mentioned, ScrollView should fix things, you probably just didn't use it the right way. Add a ScrollView above the first stack layout as shown:

            mc:Ignorable="d"
            x:Class="CXFMob.OperatiPage">

<ScrollView>
<StackLayout x:Name="stack1" ...

And then add the closing ScrollView tag at the last line:

        </StackLayout>
</StackLayout>
</ScrollView>

Obviously fix the indent formatting as well. Also, what's the purpose of the TranslationY?

Answered By - Saamer