How to reset scrollposition of ScrollView when navigating to page

How-to Discussions
1

I have a page setup with a Navigator and three pages, splash, news and newspost. The news page displays a list of news and if you click on one, you navigate to the newspost page which displays an article in a scrollView. (at the moment only a Text, but other elements will be added later)

However, if you scroll the article, go back to the news page and click another post in the list, the article on the new page is at the same position as the last article viewed. I want to reset the scroll position so that the scrollView always starts the article at the beginning.

What is the best way to do this?

2

I can add that I got the functionality I wanted by adding Reuse=“None” to the Navigator, but this seems to have a very bad effect on performance.

3

Hi Wodger,

you could try to reset the position when you leave the page, not when you enter it. So in your “newspost” page, you could add something like this:

<WhileInactive>
    <Set theScrollView.ScrollPosition="0,0" />
</WhileInactive>
<ScrollView ux:Name="theScrollView">
...

Hope this helps!

4

Works like a charm.

Than you, Uldis!

5

hi @Uldis
i have a bit similar problem. I am trying to get a page to scroll to bottom. its related to chat page. Upon load i want the scroll to the bottom (to the latest message). I have trying to do it with following code, but no luck so far. Can you please point me what i am missing. Thanks in advance.

    <DockPanel Margin="10">	
    <Panel>
        <ScrollView ux:Name="chatScroller" RelativeScrollPosition="0,1">
            <StackPanel ItemSpacing="10" >
                <Each Items="{messageListData}">
                    <Panel>
                        <Grid Columns="1*" CellSpacing="6">
                            <Panel Padding="10" Alignment="{alignment}" >
                                <Text FontSize="14" Color="#555555" TextAlignment="{alignment}" Value="{message}" TextWrapping="Wrap" />
                                <Rectangle CornerRadius="6" Layer="Background">
                                    <Stroke Color="{color}"/>
                                </Rectangle>
                            </Panel>
                        </Grid>
                    </Panel>
                </Each>
            </StackPanel>
        </ScrollView>
    </Panel>
</DockPanel>
6

Hey @Uldis am building a chat layout similar to telegram or whatsapp…i want to set the scrollView position to bottom. So far i’ve been doing this via javascript by calling a method which inturn does : chatScroller.gotoRelative(0, 1)
i want to set the bottom of the chat as default position. Any help would be highly appreciated.