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

Viewed 453

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>

enter image description here

2 Answers

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?

I solved problem by giving HeightRequest to first StackLayout stack1. ""

Also adding ScrollView

Related