MainView.ux

<App>
	<ClientPanel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");

			var items = Observable();

			for (var i = 0; i < 50; ++i) {
				items.add({
					index: i,
					color: [ 0.9 + Math.random() * 0.1,
						0.9 + Math.random() * 0.1,
						0.9 + Math.random() * 0.1,
						1],
				});
			};

			module.exports = {
				items: items
			};
		</JavaScript>

		<Panel Alignment="Left" Margin="5,25,0,25">
			<Rectangle ux:Name="scrollThumb" Height="40" Width="20"
				CornerRadius="5" Color="#0aa" Anchor="50%,50%" Alignment="TopCenter"
				Opacity="0" />
		</Panel>

		<ScrollView>
			<StackPanel>
				<Each Items="{items}">
					<Rectangle Margin="10" CornerRadius="3" Color="{color}" Height="50">
						<Text Alignment="TopRight" Value="{index}" Margin="3" />
					</Rectangle>
				</Each>
			</StackPanel>
			
			<ScrollingAnimation>
				<Move Target="scrollThumb" Y="1" RelativeTo="ParentSize" />
			</ScrollingAnimation>
			<WhileInteracting>
				<Change scrollThumb.Opacity="1" Duration="0.2" DurationBack="2" />
			</WhileInteracting>
		</ScrollView>
	</ClientPanel>
</App>