Syncing scrollviews on one axis

How-to Discussions
1

I’m currently trying to create a scrollable table with sticky fixed top and left headings, so that as the user scrolls the headings remain in view:

file
Nvo3Bgnnu4kh-image-1477579247531.png638×565

If I only want either a fixed top or a side header, I can do this with one nested ScrollView within another, But I’d like both :]

Thus I want to sync the ScrollPosition.y of the body and left heading, and the ScrollPosition.x of the body and top heading.

I’ve attempted using observers, but sadly ScrollViews only read from ScrollPosition observers, they don’t write.

I’ve also tried doing things like

<ScrollingAnimation>
	<Set Target="topHeader.ScrollPosition.x" Value="body.ScrollPosition.x" />
</ScrollingAnimation>

but it seems I can’t access object properties within Set triggers.

Can anyone help? <3

2

Hi! Here is how you can do it; in the following example, the left ScrollView will follow the right one.

<App>
	<Grid ColumnCount="2">
		<ScrollView ux:Name="sw" UserScroll="False">
			<StackPanel>
				<Each Count="30">
					<Rectangle Color="Red" Height="80" Margin="2"/>
				</Each>
			</StackPanel>
		</ScrollView>
		<ScrollView>
			<StackPanel>
				<Each Count="30">
					<Rectangle Color="Blue" Height="80" Margin="2"/>
				</Each>
			</StackPanel>
			<ScrollingAnimation>
				<Change sw.RelativeScrollPosition="1,1" />
			</ScrollingAnimation>
		</ScrollView>
	</Grid>
</App>
3

Thank you very much!