Change Property->ReadProperty in samples

Samples/Animation/AttractorMotion/Pointly.ux

@@ -7,9 +7,9 @@
 			<Panel ux:InnerClass="MoveIt" Color="#AAF" Padding="2" Alignment="Center">
 				<string ux:Property="Text"/>
 				<Size ux:Property="Value"/>
-				<Text FontSize="20" Value="{Property this.Text}"/>
+				<Text FontSize="20" Value="{ReadProperty this.Text}"/>
 				<Clicked>
-					<Set Target="A1.Value" Value="{Property this.Value}"/>
+					<Set Target="A1.Value" Value="{ReadProperty this.Value}"/>
 				</Clicked>
 			</Panel>
 			<MoveIt Text="&lt;" Value="0"/>

Samples/Animation/AttractorMotion/Rotater.ux

@@ -19,23 +19,23 @@
 
 		<Circle LengthAngleDegrees="15" ux:Name="TheCircle">
 			<Stroke Width="20" Alignment="Inside" Color="#080"/>
-			<Attractor Target="TheCircle.StartAngleDegrees" Value="{Property TheBehavior.DegreesValue}"
+			<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="{Property TheBehavior.DegreesValue}"
+			<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="{Property TheBehavior.DegreesValue}"
+			<Attractor Target="TheCircle3.StartAngleDegrees" Value="{ReadProperty TheBehavior.DegreesValue}"
 				Unit="Degrees" Easing="BounceOut" Duration="1" Distance="90"/>
 		</Circle>
 
-		<Circle Color="#EEE" LengthAngleDegrees="15" StartAngleDegrees="{Property TheBehavior.DegreesValue}"/>
+		<Circle Color="#EEE" LengthAngleDegrees="15" StartAngleDegrees="{ReadProperty TheBehavior.DegreesValue}"/>
 		<Circle Color="#DDD"/>
 
 	</RangeControl>

Samples/Animation/CyclePhase/MainView.ux

@@ -4,10 +4,10 @@
 		<float ux:Property="TimeOffset"/>
 		<Translation RelativeTo="ParentSize" ux:Name="TheTrans"/>
 		<WhileVisible>
-			<Cycle Target="TheTrans.X" Low="0" High="1" ProgressOffset="{Property self.TimeOffset}"
+			<Cycle Target="TheTrans.X" Low="0" High="1" ProgressOffset="{ReadProperty self.TimeOffset}"
 				Frequency="0.2" Waveform="Sawtooth" Easing="CircularOut"/>
 			<Cycle Target="self.Opacity" Low="0" High="1" Waveform="Sawtooth" Frequency="0.2"
-				ProgressOffset="{Property self.TimeOffset}" Easing="QuinticOut"/>
+				ProgressOffset="{ReadProperty self.TimeOffset}" Easing="QuinticOut"/>
 		</WhileVisible>
 	</Circle>
 

Samples/Animation/ExpandingToolbar/MainView.ux

@@ -5,7 +5,7 @@
 		<Rectangle ux:Class="Icon" IconColor="#fff">
 			<FileSource ux:Property="IconFile"/>
 			<float4 ux:Property="IconColor"/>
-			<Image File="{Property this.IconFile}" Color="{Property this.IconColor}" Width="50%"/>
+			<Image File="{ReadProperty this.IconFile}" Color="{ReadProperty this.IconColor}" Width="50%"/>
 		</Rectangle>
 		<Panel Height="60" Aspect="5" BoxSizing="FillAspect">
 			<Grid ColumnCount="5">

Samples/Animation/TimelineWrap/MainView.ux

@@ -4,7 +4,7 @@
 		<double ux:Property="TimeOffset"/>
 		<SolidColor Color="0.8,0.96,0.99,1" ux:Name="TheColor"/>
 
-		<Timeline PlayMode="Wrap" InitialProgress="{Property self.TimeOffset}"
+		<Timeline PlayMode="Wrap" InitialProgress="{ReadProperty self.TimeOffset}"
 			TimeMultiplier="0.9">
 			<Move KeyframeInterpolation="CatmullRom" RelativeTo="ParentSize">
 				<Keyframe X="0" Time="0"/>
@@ -26,7 +26,7 @@
 				<Keyframe Value="1" Time="2"/>
 			</Scale>
 		</Timeline>
-		<Timeline PlayMode="Wrap" InitialProgress="{Property self.TimeOffset}">
+		<Timeline PlayMode="Wrap" InitialProgress="{ReadProperty self.TimeOffset}">
 			<Move KeyframeInterpolation="Linear" RelativeTo="ParentSize">
 				<Keyframe Y="0" Time="0"/>
 				<Keyframe Y="1" Time="4"/>

Samples/Camera/MainView.ux

@@ -2,7 +2,7 @@
 	<JavaScript File="main.js"/>
 	<Panel ux:Class="FatButton" Background="#FFFFFF" Margin="0,5,0,5" Text="">
 		<string ux:Property="Text" />
-		<Button Text="{Property this.Text}" Padding="5,5,5,5" />
+		<Button Text="{ReadProperty this.Text}" Padding="5,5,5,5" />
 	</Panel>
 	<ClientPanel>
 		<WhileEmpty Items="{imagePath}">

Samples/Controls/ButtonWithImage/MainView.ux

@@ -5,17 +5,17 @@
 		<DockPanel ux:Class="MyButtonFile" Padding="10">
 			<Uno.UX.FileSource ux:Property="FileImage"/>
 			<string ux:Property="Text"/>
-			<Image File="{Property this.FileImage}" Dock="Left" Color="0,0.2,0.2,1"/>
-			<Text Alignment="Center" Value="{Property this.Text}"/>
+			<Image File="{ReadProperty this.FileImage}" Dock="Left" Color="0,0.2,0.2,1"/>
+			<Text Alignment="Center" Value="{ReadProperty this.Text}"/>
 			<Rectangle Layer="Background" Color="0.9,1,1,1"/>
 		</DockPanel>
 
 		<!-- Provides an `Image` property that is bound to an ImageSource -->
 		<DockPanel ux:Class="MyButtonSource" Padding="10">
 			<ImageSource ux:Property="Image"/>
 			<string ux:Property="Text"/>
-			<Image Source="{Property this.Image}" Dock="Left" Color="0,0.2,0.2,1"/>
-			<Text Alignment="Center" Value="{Property this.Text}"/>
+			<Image Source="{ReadProperty this.Image}" Dock="Left" Color="0,0.2,0.2,1"/>
+			<Text Alignment="Center" Value="{ReadProperty this.Text}"/>
 			<Rectangle Layer="Background" Color="0.9,1,1,1"/>
 		</DockPanel>
 

Samples/Controls/Circular/MainView.ux

@@ -2,7 +2,7 @@
 	<Panel ux:Class="ClockTick" ux:Name="self">
 		<string ux:Property="Text"/>
 		<float ux:Property="ClockValue"/>
-	<Text Alignment="Center" Value="{Property self.Text}" FontSize="24" Color="0,0,0,1"/>
+	<Text Alignment="Center" Value="{ReadProperty self.Text}" FontSize="24" Color="0,0,0,1"/>
 	</Panel>
 
 	<Panel ux:Class="ClockHand" Anchor="0%,50%" X="50%" Y="50%" Width="29.5%" Height="10%"
@@ -88,12 +88,12 @@
 
 				<ClockHand ux:Name="TheHourLine">
 					<Rotation ux:Name="HourRotate"/>
-					<Attractor Target="HourRotate.Degrees" Value="{Property HourSlide.DegreesValue}"
+					<Attractor Target="HourRotate.Degrees" Value="{ReadProperty HourSlide.DegreesValue}"
 						Type="SmoothSnap" Unit="Degrees"/>
 
 					<Attractor Target="TheHourLine.Width" ux:Name="HourLineAttractor"
 						Type="SmoothSnap" Unit="Points"/>
-					<RangeAnimation Value="{Property HourSelect.ValueY}" Minimum="0" Maximum="1">
+					<RangeAnimation Value="{ReadProperty HourSelect.ValueY}" Minimum="0" Maximum="1">
 						<Change HourLineAttractor.Value="41.5"/>
 					</RangeAnimation>
 				</ClockHand>
@@ -143,7 +143,7 @@
 
 				<ClockHand Width="41.5%">
 					<Rotation ux:Name="MinuteRotate"/>
-					<Attractor Target="MinuteRotate.Degrees" Value="{Property MinuteSlide.DegreesValue}"
+					<Attractor Target="MinuteRotate.Degrees" Value="{ReadProperty MinuteSlide.DegreesValue}"
 						Type="SmoothSnap" Unit="Degrees"/>
 				</ClockHand>
 

Samples/Controls/Selection/MainView.ux

@@ -7,7 +7,7 @@
 			<Stroke Width="2" Color="#222"/>
 		</Rectangle>
 		<Rectangle Layer="Background" CornerRadius="5" Color="#0008" Offset="5,5"/>
-		<Label Value="{Property this.Text}"/>
+		<Label Value="{ReadProperty this.Text}"/>
 		<Image Alignment="VerticalCenter" Dock="Right" File="Assets/arrowright.png" Color="#510"/>
 	</DockPanel>
 

Samples/Controls/Selection/PaymentPage.ux

@@ -24,8 +24,8 @@
 				<Rectangle Layer="Background" Color="#DDD">
 					<Stroke Width="1" Color="#000"/>
 				</Rectangle>
-				<Selection Value="{Property this.Value}" MinCount="1" MaxCount="1"/>
-				<Each Items="{Property this.Items}">
+				<Selection Value="{ReadProperty this.Value}" MinCount="1" MaxCount="1"/>
+				<Each Items="{ReadProperty this.Items}">
 					<Panel Color="#0000" ux:Name="ThePanel">
 						<Selectable Value="{value}"/>
 						<Label Value="{label}"/>

Samples/Controls/Selection/PizzaPage.ux

@@ -4,14 +4,14 @@
 		<string ux:Property="Title"/>
 		<string ux:Property="Ingredients"/>
 
-		<Selectable Value="{Property this.Title}"/>
+		<Selectable Value="{ReadProperty this.Title}"/>
 		<Rectangle Layer="Background" CornerRadius="5" Color="#FFF" ux:Name="TheBack">
 		</Rectangle>
 
 		<Image Dock="Right" File="Assets/checkmark.png" Color="#060" ux:Name="TheCheck"
 			Visibility="Hidden" Width="20"/>
-		<Text FontSize="30" Dock="Top" Value="{Property this.Title}"/>
-		<Text FontSize="12" Value="{Property this.Ingredients}"/>
+		<Text FontSize="30" Dock="Top" Value="{ReadProperty this.Title}"/>
+		<Text FontSize="12" Value="{ReadProperty this.Ingredients}"/>
 
 
 		<WhileSelected>
@@ -42,7 +42,7 @@
 			</StackPanel>
 		</ScrollView>
 
-		<WhileString Value="{Property PizzaSel.Value}" Test="IsNotEmpty">
+		<WhileString Value="{ReadProperty PizzaSel.Value}" Test="IsNotEmpty">
 			<Change TheNext.Visibility="Visible"/>
 		</WhileString>
 		<PizzaButton Dock="Bottom" Alignment="BottomRight" Text="Choose Toppings" 

Samples/Controls/Selection/README.md

@@ -12,13 +12,13 @@ This example demonstrates the various aspects of the selection API by means of a
 
 A `PizzaType` class is created to make it easier to create all the items in the selection. The `Selectable` behavior is what makes the item selectable:
 
-	<Selectable Value="{Property this.Title}"/>
+	<Selectable Value="{ReadProperty this.Title}"/>
 
 `Selection` and `Selectable` are the two key types that work together in creating a selection control.
 
 The button to go to the next page doesn't appear until an item is selected. This simple behavior is done by using the `Selection.Value` in a `WhileString` trigger.
 
-	<WhileString Value="{Property PizzaSel.Value}" Test="IsNotEmpty">
+	<WhileString Value="{ReadProperty PizzaSel.Value}" Test="IsNotEmpty">
 
 
 ## Multiple Selection

Samples/Controls/Selection/ToppingsPage.ux

@@ -22,10 +22,10 @@
 				<string ux:Property="Value"/>
 				<Uno.UX.FileSource ux:Property="File"/>
 
-				<Selectable Value="{Property this.Value}"/>
+				<Selectable Value="{ReadProperty this.Value}"/>
 
 				<Rectangle CornerRadius="5" Layer="Background" Color="#FFF" ux:Name="TheBack"/>
-				<Image File="{Property this.File}" Margin="10" ux:Name="TheImage"/>
+				<Image File="{ReadProperty this.File}" Margin="10" ux:Name="TheImage"/>
 
 				<WhileSelected>
 					<Change TheBack.Color="#CAF" Duration="0.2"/>

Samples/DropdownMenu/DropdownMenu.ux

@@ -34,10 +34,10 @@
 		<Brush ux:Property="BorderColor" />
 		<float ux:Property="FontSize" />
 		<float4 ux:Property="TextColor" />
-		<Rectangle Layer="Background" ux:Name="bgCol" Fill="{Property self.BackgroundColor}">
-			<Stroke Brush="{Property self.BorderColor}" Width="1" />
+		<Rectangle Layer="Background" ux:Name="bgCol" Fill="{ReadProperty self.BackgroundColor}">
+			<Stroke Brush="{ReadProperty self.BorderColor}" Width="1" />
 		</Rectangle>
-		<Text Margin="10,0,0,0" Alignment="CenterLeft" Value="{Property self.Text}" FontSize="{Property self.FontSize}" Color="{Property self.TextColor}" />
+		<Text Margin="10,0,0,0" Alignment="CenterLeft" Value="{ReadProperty self.Text}" FontSize="{ReadProperty self.FontSize}" Color="{ReadProperty self.TextColor}" />
 
 	</Panel>
 
@@ -49,10 +49,10 @@
 		<Brush ux:Property="BorderColor" />
 		<float ux:Property="FontSize" />
 		<float4 ux:Property="TextColor" />
-		<Text Margin="10,0,0,0" FontSize="{Property self.FontSize}" Color="{Property self.TextColor}" Alignment="CenterLeft" Value="{Property self.Text}" />
+		<Text Margin="10,0,0,0" FontSize="{ReadProperty self.FontSize}" Color="{ReadProperty self.TextColor}" Alignment="CenterLeft" Value="{ReadProperty self.Text}" />
 		<Panel Layer="Background">
-			<Rectangle Layer="Background" Fill="{Property self.BackgroundColor}" Height="100%" Alignment="Top">
-				<!--Stroke Brush="{Property self.BorderColor}" Width="1" /-->
+			<Rectangle Layer="Background" Fill="{ReadProperty self.BackgroundColor}" Height="100%" Alignment="Top">
+				<!--Stroke Brush="{ReadProperty self.BorderColor}" Width="1" /-->
 			</Rectangle>
 		</Panel>
 	</Panel>
@@ -63,17 +63,17 @@
 	<Panel Width="200" Height="40">
 		<DataBinding Target="menu.Selected" Key="selected" />
 		<Rectangle>
-			<Stroke Brush="{Property menu.BorderColor}" Width="1" />
+			<Stroke Brush="{ReadProperty menu.BorderColor}" Width="1" />
 		</Rectangle>
-		<DropdownSelectedItem TextColor="{Property menu.TextColor}" FontSize="{Property menu.FontSize}" Text="{selected}" BackgroundColor="{Property menu.BackgroundColor}" BorderColor="{Property menu.BorderColor}" />
+		<DropdownSelectedItem TextColor="{ReadProperty menu.TextColor}" FontSize="{ReadProperty menu.FontSize}" Text="{selected}" BackgroundColor="{ReadProperty menu.BackgroundColor}" BorderColor="{ReadProperty menu.BorderColor}" />
 		<Clicked>
 			<Toggle Target="expandDropdown" />
 		</Clicked>
 
 		<WhileTrue ux:Name="expandDropdown">
 			<StackPanel Offset="0,40" >
-				<Each Items="{Property menu.ListItems}" >
-					<DropdownOption FontSize="{Property menu.FontSize}" TextColor="{Property menu.TextColor}" Text="{name}" BackgroundColor="{Property menu.BackgroundColor}" Clicked="{onSelected}" BorderColor="{Property menu.BorderColor}" />
+				<Each Items="{ReadProperty menu.ListItems}" >
+					<DropdownOption FontSize="{ReadProperty menu.FontSize}" TextColor="{ReadProperty menu.TextColor}" Text="{name}" BackgroundColor="{ReadProperty menu.BackgroundColor}" Clicked="{onSelected}" BorderColor="{ReadProperty menu.BorderColor}" />
 				</Each>
 			</StackPanel>
 		</WhileTrue>

Samples/ImageViewer/MainView.ux

@@ -33,7 +33,7 @@
 			</DoubleTapped>
 
 			<!-- close when it gets small enough -->
-			<WhileFloat Value="{Property TheTransform.ZoomFactor}" LessThan="0.7">
+			<WhileFloat Value="{ReadProperty TheTransform.ZoomFactor}" LessThan="0.7">
 				<!-- the gestures will be active at this time, so we must explicitly cancel them -->
 				<CancelInteractions/>
 				<Set ViewerVisible.Value="false"/>

Samples/UIStructure/Navigation/MainNavigator.ux

@@ -53,8 +53,8 @@
 				<string ux:Property="Title"/>
 				<Uno.UX.FileSource ux:Property="File"/>
 
-				<Image File="{Property this.File}" StretchMode="PointPrecise" Color="0.4,0.4,0.5,1"/>
-				<Text Value="{Property this.Title}" FontSize="14" Margin="0,3,0,0"/>
+				<Image File="{ReadProperty this.File}" StretchMode="PointPrecise" Color="0.4,0.4,0.5,1"/>
+				<Text Value="{ReadProperty this.Title}" FontSize="14" Margin="0,3,0,0"/>
 			</StackPanel>
 
 			<NavIcon Title="Channels" File="Assets/calendar.png" Clicked="{goChannels}"/>

Samples/UIStructure/Transition/MainView.ux

@@ -14,7 +14,7 @@
 	<ButtonBase ux:Class="ArrowButton" Padding="5" Margin="5">
 		<float ux:Property="Degrees"/>
 		<Image File="Assets/play.png" Color="#000" Name="ArrowImage">
-			<Rotation Degrees="{Property this.Degrees}"/>
+			<Rotation Degrees="{ReadProperty this.Degrees}"/>
 		</Image>
 	</ButtonBase>
 
@@ -84,7 +84,7 @@
 		<PlusButton X="50%" Y="25%" Anchor="50%,50%" Clicked="{goSlideTop}"/>
 
 		<!-- A label to show the pages are changing, and that "back" is actually going back -->
-		<Circle Width="200" Height="200" Color="{Property this.Tint}" Alignment="Center">
+		<Circle Width="200" Height="200" Color="{ReadProperty this.Tint}" Alignment="Center">
 			<StackPanel Alignment="Center">
 				<Text FontSize="22" Value="{Resource Title}" Color="#000"/>
 				<Text Alignment="Center" FontSize="28" Value="{id}" Color="#666"/>

Samples/cattr/Components/ImageRectangle.ux

@@ -1,4 +1,4 @@
 <Rectangle ux:Class="ImageRectangle" CornerRadius="10">
 	<FileSource ux:Property="File" />
-	<ImageFill File="{Property this.File}" StretchMode="UniformToFill" />
+	<ImageFill File="{ReadProperty this.File}" StretchMode="UniformToFill" />
 </Rectangle>

Samples/cattr/Pages/Home/HomePageTab.ux

@@ -2,7 +2,7 @@
 	<string ux:Property="Label" />
 	<PageControl ux:Dependency="pageControl" />
 	<Page ux:Dependency="page" />
-	<WhiteText Alignment="Center" Value="{Property this.Label}" />
+	<WhiteText Alignment="Center" Value="{ReadProperty this.Label}" />
 	<Clicked>
 		<NavigateTo NavigationContext="pageControl" Target="page" />
 	</Clicked>