CODEWITHSUNDEEP
xamarinxamarin.forms
Bright Lee
Bright Lee

Reputation: 2325

How to add two full-sized page in scrollview(vertical) on Xamarin.forms?

I'm making app using with Xamarin.forms. What I'm doing is really hard. Can't figure out so far.

I want to add two view(or page) into scrollview(vertical) and size of each view is equal with screen size. So If I scroll down, second view show up and first view will be hidden.

How to make it with using xaml?

I tried stacklayout, grid, relative, absolute. Nothing works. (I believe there is some way to do it)

Thanks.

Upvotes: 0

Views: 1963

Answers (1)

jzeferino
jzeferino

Reputation: 7850

The solution I used for this was, to create a StackLayout with vertical orientation inside a ScrollView. Inside it I have a two StackLayout.

<ScrollView>
    <StackLayout Orientation="Vertical" Spacing="0">
        <StackLayout x:Name="FirstStack" BackgroundColor="Red">
        </StackLayout>
        <StackLayout x:Name="SecondStack" BackgroundColor="Blue">
        </StackLayout>
    </StackLayout>
</ScrollView>

After this I setted programmatically the Height for each page.

To get the screen Height i did it the simpler way (just to test it) but you should do it in a better way.

On iOS inside FinishedLaunching:

App.ScreenHeight = (int)UIScreen.MainScreen.Bounds.Height;

On Android inside MainActivity (need to be tweaked + 0.07f):

App.ScreenHeight = (int)(Resources.DisplayMetrics.HeightPixels / (Resources.DisplayMetrics.Density + 0.07f));

In you Application:

public partial class App : Application
{
    public static int ScreenHeight;

And finally in the Page:

public ScrollVerticalPage()
{
    InitializeComponent();
    FirstStack.HeightRequest = App.ScreenHeight;
    SecondStack.HeightRequest = App.ScreenHeight;
}

Final result here.

Upvotes: 2

Related Questions