gistfile1.cs

<App Theme="Basic" ux:Class="MyApp">
    <Panel>
		<Image Width="100" Height="100" Alignment="Center" ux:Name="TheArrow" File="arrow.png"/>
		
		<StateGroup ux:Name="SG" Transition="Exclusive">
			<State ux:Name="StateRest">
				<Spin Target="TheArrow" Hertz="0.3"/>
			</State>
			<State ux:Name="StateRight">
				<Move Target="TheArrow" X="200" Duration="1"/>
				<Rotate Target="TheArrow" Degrees="-90" Duration="1"/>
				<Change Target="TheImage.RelativeScrollPosition" Value="1,0.5" Duration="1"/>
			</State>
			<State ux:Name="StateDown">
				<Move Target="TheArrow" Y="200" Duration="1"/>
				<Rotate Target="TheArrow" Degrees="0" Duration="1"/><!-- rest of image -->
				<Change Target="TheImage.RelativeScrollPosition" Value="0.5,1" Duration="1"/>
			</State>
			<State ux:Name="StateLeft">
				<Move Target="TheArrow" X="-200" Duration="1"/>
				<Rotate Target="TheArrow" Degrees="90" Duration="1"/>
				<Change Target="TheImage.RelativeScrollPosition" Value="0,0.5" Duration="1"/>
			</State>
			<State ux:Name="StateUp">
				<Move Target="TheArrow" Y="-200" Duration="1"/>
				<Rotate Target="TheArrow" Degrees="180" Duration="1"/>
				<Change Target="TheImage.RelativeScrollPosition" Value="0.5,0" Duration="1"/>
			</State>
		</StateGroup>
		
		<Grid DefaultColumn="auto" DefaultRow="auto" Alignment="BottomRight">
			<Style>
				<Button FontSize="30"/>
			</Style>
			
			<Button Grid.Column="1" Grid.Row="0" Text="^">
				<Clicked><SetState Target="SG.Active" Value="StateUp"/></Clicked>
			</Button>
			<Button Grid.Column="0" Grid.Row="1" Text="&lt;">
				<Clicked><SetState Target="SG.Active" Value="StateLeft"/></Clicked>
			</Button>
			<Button Grid.Column="1" Grid.Row="1" Text="*">
				<Clicked><SetState Target="SG.Active" Value="StateRest"/></Clicked>
			</Button>
			<Button Grid.Column="2" Grid.Row="1" Text=">">
				<Clicked><SetState Target="SG.Active" Value="StateRight"/></Clicked>
			</Button>
			<Button Grid.Column="1" Grid.Row="2" Text="v">
				<Clicked><SetState Target="SG.Active" Value="StateDown"/></Clicked>
			</Button>
		</Grid>
		
		<Panel Alignment="Center" Width="500" Height="500">
			<ScrollViewer AllowedScrollDirections="Both" IsEnabled="false" ux:Name="TheImage">
				<Image File="lake.jpg" StretchMode="PointPrecise" Alignment="Center"/>
			</ScrollViewer>
			
			<StackPanel Orientation="Horizontal" Alignment="BottomCenter" Anchor="50,0" AnchorUnit="Percent">
				<Text Alignment="VerticalCenter">Exclusive</Text>
				<Switch Toggled="true">
					<WhileToggled>
						<Change Target="SG.Transition" Value="Parallel"/>
					</WhileToggled>
				</Switch>
				<Text Alignment="VerticalCenter">Parallel</Text>
			</StackPanel>
		</Panel>

    </Panel>
</App>