Rotater.ux

<DockPanel ux:Class="Rotater">
	<!-- mortoray: There's a defect when you first click that it jumps. I think this relates to the rest value status
	of the property. Once duckers merges his changes for the properties I'm hoping it will be fixed. -->
	<JavaScript>
		var Observable = require("FuseJS/Observable")
		
		exports.position = Observable(1)
	</JavaScript>
	<StackPanel Dock="Top">
		<Text TextWrapping="Wrap">A range control that demonstrates a wrapping motion. Green: SmoothSnap, Blue: Elastic, Red: Easing-BounceOut</Text>
		<StackPanel Orientation="Horizontal">
			<Text Value="Position: "/>
			<Text Dock="Top" Value="{position}"/>
		</StackPanel>
	</StackPanel>
	<RangeControl Minimum="0" Maximum="360" ux:Name="TheRange" HitTestMode="LocalBounds"
		Value="{position}">
		<CircularRangeBehavior ux:Name="TheBehavior" IsWrapping="true"/>
		
		<Circle LengthAngleDegrees="15" ux:Name="TheCircle">
			<Stroke Width="20" Alignment="Inside" Color="#080"/>
			<Attractor Target="TheCircle.StartAngleDegrees" Value="{ReadProperty TheBehavior.DegreesValue}"
				Unit="Degrees" Type="SmoothSnap"/>
		</Circle>
		
		<Circle LengthAngleDegrees="15" ux:Name="TheCircle2">
			<Stroke Width="20" Alignment="Inside" Color="#008" Offset="-20"/>
			<Attractor Target="TheCircle2.StartAngleDegrees" Value="{ReadProperty TheBehavior.DegreesValue}"
				Unit="Degrees" Type="Elastic"/>
		</Circle>
		
		<Circle LengthAngleDegrees="15" ux:Name="TheCircle3">
			<Stroke Width="20" Alignment="Inside" Color="#800" Offset="-40"/>
			<Attractor Target="TheCircle3.StartAngleDegrees" Value="{ReadProperty TheBehavior.DegreesValue}"
				Unit="Degrees" Easing="BounceOut" Duration="1" Distance="90"/>
		</Circle>
		
		<Circle Color="#EEE" LengthAngleDegrees="15" StartAngleDegrees="{ReadProperty TheBehavior.DegreesValue}"/>
		<Circle Color="#DDD"/>
		
	</RangeControl>
</DockPanel>