# BringToFront or SendToBack are not working in LinearNavigation 

**URL:** <https://forums.fusetools.com/t/bringtofront-or-sendtoback-are-not-working-in-linearnavigation/2669>\
**Category:** General\
**Created:** [January 16, 2018, 6:35pm UTC](https://forums.fusetools.com/t/bringtofront-or-sendtoback-are-not-working-in-linearnavigation/2669 "2018-01-16T18:35:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cliff](https://avatars.discourse-cdn.com/v4/letter/c/b38774/32.png) [@Cliff](https://forums.fusetools.com/u/Cliff)\
**Post date:** [January 16, 2018, 6:35pm UTC](https://forums.fusetools.com/t/bringtofront-or-sendtoback-are-not-working-in-linearnavigation/2669/1 "2018-01-16T18:35:39Z")

</div>

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](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/dXDO83DhQnWQ-image-1516127432770.png)  
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 …

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 17, 2018, 8:54am UTC](https://forums.fusetools.com/t/bringtofront-or-sendtoback-are-not-working-in-linearnavigation/2669/2 "2018-01-17T08:54:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Cliff](https://avatars.discourse-cdn.com/v4/letter/c/b38774/32.png) [@Cliff](https://forums.fusetools.com/u/Cliff)\
**Post date:** [January 17, 2018, 9:29am UTC](https://forums.fusetools.com/t/bringtofront-or-sendtoback-are-not-working-in-linearnavigation/2669/3 "2018-01-17T09:29:28Z")

</div>

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

[Attached ZIP file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/HLySNE76Ahf4-image-1516181110342.zip)

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

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [January 17, 2018, 10:20am UTC](https://forums.fusetools.com/t/bringtofront-or-sendtoback-are-not-working-in-linearnavigation/2669/4 "2018-01-17T10:20:31Z")

</div>

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

```auto
		<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 `BringToFront`s from your `ItemCard.ux`.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![Cliff](https://avatars.discourse-cdn.com/v4/letter/c/b38774/32.png) [@Cliff](https://forums.fusetools.com/u/Cliff)\
**Post date:** [January 17, 2018, 10:27am UTC](https://forums.fusetools.com/t/bringtofront-or-sendtoback-are-not-working-in-linearnavigation/2669/5 "2018-01-17T10:27:02Z")

</div>

Thanks Uldis…  
Works Flawlessly