BringToFront or SendToBack are not working in LinearNavigation

General
1

I am trying to achieve a very common effect.The idea is to implement a bottom dock with circle tag which scales when swiping.I am able to achieve desired result But the problem is that i cant seem to bring forward the current active ItemCard.
This is my ItemCard.

 <Panel ux:Class="ItemCard" Width="150" Height="150" Opacity="0.75" ZOffset="0.0" >
<FileSource ux:Property="ImageFile"/>
<ActivatingAnimation>
	<Change  this.Opacity="1" Duration="1" />
	<Change  this.ZOffset="1.0"  />
</ActivatingAnimation>

<EnteringAnimation Scale="0.25">
	<Move RelativeTo="Size">
		<Keyframe Time="0.25" X="-0.7" Y="0" />
		<Keyframe Time="0.5"  X="-1.3" Y="0" />
		<Keyframe Time="0.75" X="-1.5" Y="0" />
		<Keyframe Time="1"    X="-1.8" Y="0" />
	</Move>
	<Scale RelativeNode="OuterCircle"  Factor="0.00000025" Duration="1"/>
	<SendToBack/>

</EnteringAnimation>

<ExitingAnimation Scale="0.25">
	<Move RelativeTo="Size">
		<Keyframe Time="0.25" X="0.7" Y="0" />
		<Keyframe Time="0.5"  X="1.3" Y="0" />
		<Keyframe Time="0.75" X="1.5" Y="0" />
		<Keyframe Time="1"    X="1.8" Y="0" />
	</Move>
<Scale  Factor="0.00000025" Duration="1"/>

<SendToBack/>
</ExitingAnimation>
<Circle ux:Name="OuterCircle" Color="#fff6" Margin="0,0,0,0" ClipToBounds="True">

<Circle Color="#000" Margin="6" ClipToBounds="True">
	<ImageFill File="{}"/>

	
</Circle>

</Circle>

file
dXDO83DhQnWQ-image-1516127432770.png386×798

As u can see the previous circle overlaps the next circle.How would I remove it…?
My BottomBar Class






					<Each Items="{items}">
						<Grid ux:Name="item" Rows="240" >
							<ItemCard ImageFile="{image}" >
								<Clicked>
									<NavigateTo Target="item" />
								</Clicked>
							</ItemCard>
						</Grid>
					</Each>
				</Panel>

The Design is modification of Angled navigation …

2

Hi Cliff,

could you please post a complete reproduction? Something like a single-UX-file app that we could copy-paste and run.

The problem you’re describing might be caused by how you use your custom ux:Class, so we need to see full code to suggest anything.

3

Thanks Uldis…
First of all …I would like to tell you how valuable your streams are…!!
Keep doing the great work…

Attached ZIP file

This is the quick and dirty modification of the Angled Navigation which resulted in above desired effect.(May contain extra files…)

4

One way to solve this would be to alter this part like so:

		<Each Items="{items}">
			<Grid ux:Name="item" Rows="240" >
				<ItemCard ImageFile="{image}">
					<Activated When="Immediate">
						<BringToFront Target="item" />
					</Activated>
					<Clicked>
						<NavigateTo Target="item" />
					</Clicked>
				</ItemCard>
			</Grid>
		</Each>

and of course removing the ZOffset and BringToFronts from your ItemCard.ux.

Hope this helps.

5

Thanks Uldis…
Works Flawlessly