Added a RelativeTo sample

Author: kristianhasselknippe

README.md

@@ -42,6 +42,7 @@ These samples are supplied directly from the feature teams of Fuse and we welcom
   <tr>
     <td><a href="Samples/Animation/CyclePhase">Cycle Phase</a></td>
     <td><a href="Samples/Animation/TimelineWrap">Timeline Wrap</a></td>
+	<td><a href="Samples/RelativeTo">RelativeTo</a></td>
   </tr>
 </table>
 

Samples/RelativeTo/MainView.ux

@@ -0,0 +1,57 @@
+<App Theme="Basic">
+	<DockPanel>
+		<TopFrameBackground Dock="Top" />
+		<Panel>
+			<Rectangle ux:Name="newLayoutMaster" Width="50" Height="50" Color="#8889" Alignment="TopLeft" Margin="20,50"/>
+			<StackPanel Alignment="Top">
+				<TextInput PlaceholderText="Click me to show the keyboard" Alignment="Center">
+					<WhileKeyboardVisible>
+						<Move Target="rect3" RelativeTo="Keyboard" Y="-1" Duration="0.5" />
+					</WhileKeyboardVisible>
+				</TextInput>
+				<Button Text="Click me" Alignment="Center">
+					<WhilePressed>
+						<Move Target="rect1" RelativeTo="Size" Y="-1" Duration="0.5" />
+						<Move Target="rect2" RelativeTo="ParentSize" Y="-1" Duration="0.5" />
+						<Move Target="rect5" RelativeTo="Size" RelativeNode="relativeNode" Y="-1" Duration="0.5" />
+					</WhilePressed>
+				</Button>
+				<Switch>
+					<WhileTrue>
+						<Change rect4.LayoutMaster="newLayoutMaster" />
+					</WhileTrue>
+				</Switch>
+			</StackPanel>
+			<Rectangle ux:Name="relativeNode" Height="400" Width="50" Color="#bbf" Alignment="BottomRight">
+				<VerticalText Alignment="Center" Width="200">relativeNode</VerticalText>
+			</Rectangle>
+
+			<Text ux:Class="VerticalText" TransformOrigin="Center" Alignment="Bottom" TextColor="#000">
+				<Rotation Degrees="-90" />
+			</Text>
+
+			<Grid ColumnCount="5" Rows="3*,1*" Color="#ddd" Width="80%" Height="100%" Alignment="BottomLeft">
+				<VerticalText Width="200">RelativeTo="Size"</VerticalText>
+				<VerticalText Width="200">RelativeTo="ParentSize"</VerticalText>
+				<VerticalText Width="200">RelativeTo="Keyboard"</VerticalText>
+				<VerticalText Width="200">RelativeTo="PositionChange"</VerticalText>
+				<VerticalText Width="200">RelativeNode="relativeNode"</VerticalText>
+
+
+
+				<Rectangle ux:Name="rect1" Width="50" Height="50" Color="#f00" Alignment="Bottom"/>
+				<Rectangle ux:Name="rect2" Width="50" Height="50" Color="#0f0" Alignment="Bottom"/>
+				<Rectangle ux:Name="rect3" Width="50" Height="50" Color="#00f" Alignment="Bottom"/>
+				<Panel Alignment="Bottom" Width="50" Height="50">
+					<Rectangle ux:Name="rect4" Width="50" Height="50" Color="#0ff" LayoutMaster="layoutMaster">
+						<LayoutAnimation>
+							<Move RelativeTo="PositionChange" X="1" Y="1" Duration="0.5" />
+						</LayoutAnimation>
+					</Rectangle>
+					<Rectangle ux:Name="layoutMaster" Width="50" Height="50"/>
+				</Panel>
+				<Rectangle ux:Name="rect5" Width="50" Height="50" Color="#f0f" Alignment="Bottom"/>
+			</Grid>
+		</Panel>
+	</DockPanel>
+</App>

Samples/RelativeTo/README.md

@@ -0,0 +1,10 @@
+# Using the RelativeTo and RelativeNode properties
+
+This sample shows the use of the `RelativeTo` property using the following values:
+
+- Size: Moves the set amount times the size of the element. So Y="-1" moves the element by its entire height in the negative Y direction.
+- ParentSize: Same as Size but uses the elements parents size instead.
+- PositionChange: Used in response to a LayoutAnimation to move the element by the amount of change in position within it's parent.
+- Keyboard: Moves the element relative to the size of the eyboard.
+
+- Also the use of the `RelativeNode`

Samples/RelativeTo/RelativeTo.unoproj

@@ -0,0 +1,30 @@
+{
+  "RootNamespace":"",
+  "Packages": [
+        "Fuse.Animations",
+        "Fuse.BasicTheme",
+        "Fuse.Themes",
+        "Fuse.Controls",
+        "Fuse.Designer",
+        "Fuse.Drawing",
+        "Fuse.Drawing.Primitives",
+        "Fuse.Effects",
+        "Fuse.Elements",
+        "Fuse.Entities",
+        "Fuse.Gestures",
+        "Fuse.Navigation",
+        "Fuse.Shapes",
+        "Fuse.Triggers",
+        "Fuse.Reactive",
+        "Fuse.Android",
+        "Fuse.Desktop",
+        "Fuse.iOS",
+        "Fuse.UserEvents",
+        "FuseCore",
+        "Uno.Collections",
+        "Uno.Geometry"
+  ],
+  "Includes": [
+    "*"
+  ]
+}