gistfile1.cs

<App Theme="Basic" ux:Class="MyApp">
    <Panel>
		<Image Width="100" Height="100" Alignment="Center" ux:Name="TheArrow" File="arrow.png">
			<Translation ux:Name="RawTranslation"/>
			<Rotation ux:Name="RawRotation"/>
			<PhysicsProperty Target="RawRotation.Degrees" ux:Name="TheRotation"/>
			<PhysicsProperty Target="RawTranslation.Vector" ux:Name="TheTranslation"/>
		</Image>
		
		<StateGroup ux:Name="SG" Transition="Exclusive">
			<State ux:Name="StateRest">
				<Cycle Target="TheRotation.Value" Low="-180" High="180" Hertz="0.3"/>
			</State>
			<State ux:Name="StateRight">
				<Change Target="TheTranslation.Value" Value="200,0,0" DelayBack="1"/>
				<Change Target="TheRotation.Value" Value="-90" DelayBack="1"/>
				<Change Target="TheImage.RelativeScrollPosition" Value="1,0.5" Duration="1"/>
			</State>
			<State ux:Name="StateDown">
				<Change Target="TheTranslation.Value" Value="0,200,0" DelayBack="1"/>
				<Change Target="TheRotation.Value" Value="0" DelayBack="1"/><!-- rest of image -->
				<Change Target="TheImage.RelativeScrollPosition" Value="0.5,1" Duration="1"/>
			</State>
			<State ux:Name="StateLeft">
				<Change Target="TheTranslation.Value" Value="-200,0,0" DelayBack="1"/>
				<Change Target="TheRotation.Value" Value="90" DelayBack="1"/>
				<Change Target="TheImage.RelativeScrollPosition" Value="0,0.5" Duration="1"/>
			</State>
			<State ux:Name="StateUp">
				<Change Target="TheTranslation.Value" Value="0,-200,0" DelayBack="1"/>
				<Change Target="TheRotation.Value" Value="180" DelayBack="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>