Nativescript: Approach to get auto-sized StackLayout measured height in DP

[sserdyuk]

I'm trying to figure out the height of a StackLayout element on the screen that has some content and is auto-sized. I need the sizing information to scroll and position elements on the screen. Whenever I call the effective* methods, I always get 0 in return. What's the proper approach to do these things?

[NickIliev]

To get the size of your auto-sized StackLayout you need to use getMeasuredHeight and getMeasuredWidth. These methods will return the value in screen pixels which means that you will have to divide the value by the current screen scale to receive the value in DP (a.k.a DIPs). Once you get your size you can scroll to the wanted position with the scrollToVerticalOffset method on your ScrollView (or scrollToHorizontalOffset offset if you need to scroll horizontally). You still need to wrap the measurement in small timeout to make sure that the StackLayout has all its children loaded and measured.
e.g.
page.ts

import { screen, ScreenMetrics } from "platform";
let screenScale = screen.mainScreen.scale;

export function onStackLoaded(args: EventData) {
    let stack = <StackLayout>args.object;

    setTimeout(function () {
        console.log("stack.getMeasuredHeight: " + stack.getMeasuredHeight());
        console.log("stack.getMeasuredWidth: " + stack.getMeasuredWidth());

        let heightDP = stack.getMeasuredHeight() / screenScale;
        let widthDP = stack.getMeasuredWidth() / screenScale;
        console.log("heightDP: " + heightDP);
        console.log("widthDP: " + widthDP);

        scroll.scrollToVerticalOffset(heightDP/2); // will scroll to 1000DP (as the total height is 2000)
    }, 100);
}

page.xml

<ScrollView id="scroll">
    <StackLayout id="stack" loaded="onStackLoaded" class="p-0 m-0" backgroundColor="gray" height="2000">
        <GridLayout width="200" height="200" backgroundColor="white"><Label text="1: 200 x 200"/></GridLayout>
        <GridLayout width="200" height="200" backgroundColor="blue"><Label text="2: 200 x 200"/></GridLayout>
        <GridLayout width="200" height="200" backgroundColor="white"><Label text="2: 200 x 200"/></GridLayout>
        <GridLayout width="200" height="200" backgroundColor="blue"><Label text="4: 200 x 200"/></GridLayout>
        <GridLayout width="200" height="200" backgroundColor="white"><Label text="5: 200 x 200"/></GridLayout>
        <GridLayout width="200" height="200" backgroundColor="blue"><Label text="6: 200 x 200"/></GridLayout>
        <GridLayout width="200" height="200" backgroundColor="white"><Label text="7: 200 x 200"/></GridLayout>
        <GridLayout width="200" height="200" backgroundColor="blue"><Label text="8: 200 x 200"/></GridLayout>
        <GridLayout width="200" height="200" backgroundColor="white"><Label text="9: 200 x 200"/></GridLayout>
        <GridLayout width="200" height="200" backgroundColor="blue" ><Label text="10: 200 x 200"/></GridLayout>
    </StackLayout>
</ScrollView>

Demonstration project can be found here

[RoyiNamir]

@NickIliev Is there any workaround for this setTimeout trick ? Ng event maybe ?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.