How to match two seperate ScrollView positions

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.

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

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>

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

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.