How to match two seperate ScrollView positions

How-to Discussions
1

I would like to have a grid that has two vertically scrollable StackPanels side by side horizontally. When I scroll one of the StackPanels, I need to be able to set the ScrollPosition of the other.

2

Hi!

Good question, do you need both ScrollViews to modify each others ScrollPosition or just one that modify the other? Off the top of my head this can be done:

<App Theme="Basic" Background="#eeeeeeff">
    <ClientPanel>
        <Grid ColumnCount="2" RowCount="1">
            <ScrollView Background="#fb0">
                <ScrollingAnimation>
                    <Change Target="_sv.ScrollPosition" Value="0,500" />
                </ScrollingAnimation>
            </ScrollView>
            <ScrollView ux:Name="_sv" />
        </Grid>
    </ClientPanel>
</App>

Not sure if that does if for you, since you have to specify the absolute value you want the ScrollPosition to go to in the <Change />. Adding some Uno code here might do the trick :slight_smile:

Let me know what you think

3

If both ScrollViews are the same size, wouldn’t it match the other side? Ideally, we’d have something like this:

<ScrollView ux:Name="layers">
    <ScrollingAnimation>
        <Change Target="timeline.ScrollPosition" Value="layers.ScrollPosition" />
    </ScrollingAnimation>
</ScrollView>

<ScrollView ux:Name="timeline" >
    <ScrollingAnimation>
        <Change Target="layers.ScrollPosition" Value="timeline.ScrollPosition" />
    </ScrollingAnimation>
</ScrollView>
4

Is there a way to bind the values together bi-directionaly within UX?

5

Do you intend on having the StackPanel’s be different sizes? Otherwise you can just stick a grid in the ScrollView and have it scroll.