ScrollView directly goes back to initial position

Bug Reports
1

The ScrollView always goes back to the initial position.

The ScrollView consists of several items, and it should be possible to scroll through all the items. When my finger leaves the Touchscreen, the ScrollView directly goes back to the top, so it’s nearly impossible to see all listitems…

(nearly the same “architecture” of code is working in another app…)

Here’s the .*ux code of this app:

  <DockPanel>
      <JavaScript File="parse-1.5.0.min.js" ux:Global="Parse"/>
      <JavaScript File="MainView.js"/>

      <StatusBarBackground Dock="Top" />
      <BottomFrameBackground Dock="Bottom" />
          <StackPanel>
              <Grid RowCount="4" Rows="1*,1*,7*,1*">
                  <Grid ColumnCount="3" ColumnData="4*,2*,4*" Margin="5, 15, 5, 5">
                      <Text Value="Team1" TextAlignment="Left" />
                      <Text Value="Tisch" TextAlignment="Center" />
                      <Text Value="Team2" TextAlignment="Right" />
                  </Grid>
                  <Rectangle Width="1000" Height="1">
                      <SolidColor Color="0.04, 0.05, 0.09, 1" />
                  </Rectangle>
                  <ScrollView Margin="5,5,5,5">
                      <StackPanel>
                          <Each Items="{currentGames}">
                              <Grid ColumnCount="3" ColumnData="4*,2*,4*" Margin="5, 0, 5, 0" Padding="0">
                                  <Text Value="{player1Name}" TextAlignment="Left" />
                                  <Text Value="{tableNumber}" TextAlignment="Center" />
                                  <Text Value="{player3Name}" TextAlignment="Right" />
                              </Grid>
                          </Each>
                      </StackPanel>
                  </ScrollView>
                  <StackPanel>
                      <Button Text="REFRESH" Margin="5, 20, 5, 10" Clicked="{refresh}"/>
                      <Grid ColumnCount="2" ColumnData="Auto, Auto" Margin="5,5,5,20">
                          <Text Value="Follow playerID: " TextAlignment="Left" Alignment="CenterLeft" Margin="5, 0, 0, 0" />
                          <TextInput Alignment="Bottom" Margin="0, 15, 0, 0" />
                          <Text Value="Followed player on: " Alignment="VerticalCenter" Margin="5, 15, 0, 0" />
                          <Text Value="currently no match" Alignment="VerticalCenter" Margin="5, 15, 5, 0" />
                      </Grid>
                  </StackPanel>
              </Grid>
          </StackPanel>
  </DockPanel>

currentGames is my list of items - from Parse.

2
3

What you’ve inadvertently done is create a layout where the ScrollView actually has enough space to display all of its content, though nonetheless be clipped on the display itself. It snaps back to the start when you scroll since it doesn’t believe scrolling is actually needed.

To fix this we need to reduce the layers in your layout.

First off, remove the StackPanel that encloses the <Grid RowCount="4" Rows="1_,1_,7_,1_">. There’s no reason to have a StackPanel with just one child. Doing just this will get it working, but we might want to do a bit more.

Now it depends on how you want your layout to work what you do now. I have a feeling you don’t actually want a Grid here, but instead can just dock things in the dockpanel. You can try removing the <Grid RowCount="4" Rows="1_,1_,7_,1_"> and instead mark the first two children as Dock="Top" and the last child StackPanel as Dock="Bottom". This leaves the middle StackPanel with the player list to fill the remaining space. Once it fills this space then it scrolls as you’d expect.

I modified your example to have this structure:

    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomFrameBackground Dock="Bottom" />
        <Grid ColumnCount="3" ColumnData="4,2,4" Margin="5, 15, 5, 5" Dock="Top">...</Grid>
        <Rectangle Width="1000" Height="1" Dock="Top">...</Rectangle>
        <ScrollView Margin="5,5,5,5">...</ScrollView>
        <StackPanel Dock="Bottom">...</StackPanel>
    </DockPanel>

_

You could also simplify this and just use the ClientPanel:

_

<ClientPanel> <Grid ColumnCount="3" ColumnData="4,2_,4_" Margin="5, 15, 5, 5" Dock="Top">...</Grid> <Rectangle Width="1000" Height="1" Dock="Top">...</Rectangle> <ScrollView Margin="5,5,5,5">...</ScrollView> <StackPanel Dock="Bottom">...</StackPanel> </ClientPanel>

4

on your message, do little thing about my quesition (i don’t know how to create a blog here …)

why data item number > 30 more or less,the scrollview may has this state???file

5

Hello 1637206422@qq.com - I am sorry but I am unable to understand your question. Can you please explain in more detail?

6

There will be a once in a while a scrollview item just like that where click but no response。Is it too much data cause？

7

But meanwhile other elements can be normal operated.so I am curious about this.

8

Hi I’m having the same problem… My ScrollView keeps bouncing back to the top, not allowing me to see my “cancel” and “submit” buttons at the bottom…

<StackPanel>
    <Image File="logo.png" Alignment="TopCenter" StretchDirection="DownOnly" Margin="0,10,0,0" />
    <ScrollView>
        <StackPanel>
            <Grid RowCount="8" Columns="1,3" Margin="0,20,0,20" Alignment="Top">
                <Style>
                    <Text TextAlignment="Right" Alignment="Right" Margin="0,10,0,0" FontSize="14" TextWrapping="Wrap" />
                </Style>
                <Text>First name: </Text>
                <TextInput Value="{firstName}" />
                ...
                ...
                ...
            </Grid>
            <Grid RowCount="1" ColumnCount="2" Alignment="Bottom">
                <Button Text="Cancel" Clicked="{goBack}" />
                <Button Text="Submit" Clicked="{submit}" />
            </Grid>
        </StackPanel>
    </ScrollView>
</StackPanel>
9

@justinksr: Here you have the same issue as what mortoray said. The outer StackPanel will give the ScrollView enough room to show all of it’s contents. Try replacing the StackPanel with a DockPanel.

10

@bolav That worked! Thanks bolav!