Overlay not working as expected

Bug Reports
1

I have a complex swipe transition scenario with a lot of elements. They’re grouped into page classes. But some elements are in the page control container because they’re moving over more than one page (like in the onboarding sample). Some elements of the pages have to be top most. So I tried the Layer property. I found out that overlaying elements only working on elements at the same level. My expectation is that I can overlay over all.

Here is some example code:

<App>
	<ClientPanel>
		<Page ux:Class="PageWithTitle" ux:Name="self" HitTestMode="LocalBoundsAndChildren">
			<DockLayout />
			<float4 ux:Property="HeaderColor" />
			<float4 ux:Property="HeaderTextColor" />
			<string ux:Property="Instructions" />
			<StackPanel Dock="Top">
				<Panel Color="{Property self.HeaderColor}" Height="45">
					<Text Value="{Property self.Title}" FontSize="22"
						Alignment="Center" TextColor="{Property self.HeaderTextColor}"/>
				</Panel>
			</StackPanel>
			<Panel Height="10%" Color="#0008" Alignment="Bottom">
				<WhileActive Invert="true" Threshold="0.4">
					<Move RelativeTo="Size" Y="1" Duration="0.4" Easing="CircularInOut"/>
				</WhileActive>
				<Text Value="{Property self.Instructions}" Margin="20" TextColor="#fff" Alignment="Center" />
			</Panel>
		</Page>
		<Rectangle ux:Name="OverlayRect" Color="#0094E5" Width="80" Height="80" CornerRadius="0" />
		<PageControl>
			<PageWithTitle Title="Basic animation" HeaderColor="#595FFF" HeaderTextColor="#fff"
						Color="#FEFDFC" Instructions="Tap and hold the rectangle">
				<Panel>
					<Rectangle ux:Name="myRectangle" Layer="Overlay" Color="#4894E5" Width="80" Height="80" CornerRadius="0">
						<WhilePressed>
							<Rotate Degrees="45" Easing="CubicInOut" Duration="0.5" />
							<Scale  Factor="2"   Easing="CubicInOut" Duration="0.5" />
							<Change myRectangle.Color="#FC5185"      Duration="0.3" />
							<Change myRectangle.CornerRadius="15" 	 Duration="0.3" />
						</WhilePressed>
					</Rectangle>
				</Panel>
			</PageWithTitle>

		</PageControl>
	</ClientPanel>
</App>

As you can see: the changeable rectangle of the page stays behind the first rectangle although it has Layer=“Overlay”. It follows the layout order and is not coming up (top most) as I would expect.

Is this a bug or the intended behavior?

2

That’s fully expected behaviour. Layer works within the scope the node in question is in.

You can change the scope during run-time by changing the LayoutMaster of a node, as seen, for example, in this example.