# How to move an item to a corner of the screen?

**URL:** <https://forums.fusetools.com/t/how-to-move-an-item-to-a-corner-of-the-screen/3831>\
**Category:** How-to Discussions\
**Created:** [December 22, 2015, 1:59pm UTC](https://forums.fusetools.com/t/how-to-move-an-item-to-a-corner-of-the-screen/3831 "2015-12-22T13:59:38Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Costin\_Bereveanu](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/costin_bereveanu/32/628_2.png) [@Costin\_Bereveanu](https://forums.fusetools.com/u/Costin_Bereveanu)\
**Post date:** [December 22, 2015, 1:59pm UTC](https://forums.fusetools.com/t/how-to-move-an-item-to-a-corner-of-the-screen/3831/1 "2015-12-22T13:59:38Z")

</div>

Trying to move an image button to the bottom left corner of the screen upon being clicked.

It is part of a list of buttons, so I think placeholders don’t work here. I am trying to use an Attractor, but I would need to feed it dimensions related to the size of the screen or to the main container, which I don’t know how to get.

Help? 🙂

Thanks, Costin

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [December 22, 2015, 2:20pm UTC](https://forums.fusetools.com/t/how-to-move-an-item-to-a-corner-of-the-screen/3831/2 "2015-12-22T14:20:20Z")

</div>

Can you explain a bit more what the UI looks like and why the image moves to the bottom right? There are a few different ways to accomplish this and I want to give you the correct one.

---

<div class="post-metadata">

**Author:** ![Costin\_Bereveanu](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/costin_bereveanu/32/628_2.png) [@Costin\_Bereveanu](https://forums.fusetools.com/u/Costin_Bereveanu)\
**Post date:** [December 22, 2015, 2:30pm UTC](https://forums.fusetools.com/t/how-to-move-an-item-to-a-corner-of-the-screen/3831/3 "2015-12-22T14:30:23Z")

</div>

Cool! The idea is pretty basic: a list of language picking buttons, placed in the center of the screen, generated using . Then, when the user picks a language, I want the selected one to transition to the bottom left corner of the screen. The unselected languages will end up in a separate menu which will appear when the user clicks the current language button, from the bottom left.

The language buttons are placed in a

```auto
<StackPanel Orientation="Horizontal" Alignment="Center" ItemSpacing="16">
<Each Items="{languages}">
<LangButton />
</Each>
</StackPanel>

```

The stack panel is in another vertical stack panel, which is in a DockPanel.

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/ownAZ9k2cPVv-legacy-files-5qApLCAfFA9jP7f0--hM5za7tG-mAa5fE89KLGB5d.png)

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [December 22, 2015, 2:40pm UTC](https://forums.fusetools.com/t/how-to-move-an-item-to-a-corner-of-the-screen/3831/4 "2015-12-22T14:40:30Z")

</div>

You’re creating essentially a temporary effect. It’s correct not to use placeholder here since the bottom-left icon and list aren’t directly related in the state. There is no reason to share an element. Transforms are generally the right tool for such temporary effects.

One approach you can use is to use a `Move` transform on the item in the list to move it to the bottom left element.

```auto
<Clicked>
    <Move RelativeTo="PositionOffset" RelativeNode="BottomLeftIcon" Duration="0.3" DurationBack="0"/>
</Clicked>

```

The `PositionOffset` mode is the difference in position between the element you are moving and the `RelativeNode`.

There is also a `SizeFactor` that can be used with scale in case the other icon is not the same size:

```auto
<Scale RelativeTo="SizeFactor" RelativeNode="BottomLeftIcon" Duration="0.3" DurationBack="0">

```

Note that I’m sticking a `DurationBack` on these since we’re using them inside a `Clicked`. If I didn’t put on the `DuratinoBack` they’d animate backwards as well, which isn’t what we want.

---

<div class="post-metadata">

**Author:** ![Costin\_Bereveanu](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/costin_bereveanu/32/628_2.png) [@Costin\_Bereveanu](https://forums.fusetools.com/u/Costin_Bereveanu)\
**Post date:** [December 22, 2015, 2:46pm UTC](https://forums.fusetools.com/t/how-to-move-an-item-to-a-corner-of-the-screen/3831/5 "2015-12-22T14:46:06Z")

</div>

Is PositionOffset a not yet released mode? Seems to be not defined in 0.9.4

The movement happens in a JS controlled StateGroup (which works) and in the component I am also using a

```auto
<LayoutAnimation>
        <Move RelativeTo="LayoutChange" X="1" Y="1" Duration="1" />
    </LayoutAnimation>

```

to animate eventual changes. I think this will need to be removed.

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [December 22, 2015, 2:49pm UTC](https://forums.fusetools.com/t/how-to-move-an-item-to-a-corner-of-the-screen/3831/6 "2015-12-22T14:49:58Z")

</div>

Costin: It’s a fairly recent feature. 0.9.5 is out in a preview version, you can fetch it here (at your own risk): [https://www.fusetools.com/downloads/channel/qa](https://www.fusetools.com/downloads/channel/qa)

---

<div class="post-metadata">

**Author:** ![Costin\_Bereveanu](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/costin_bereveanu/32/628_2.png) [@Costin\_Bereveanu](https://forums.fusetools.com/u/Costin_Bereveanu)\
**Post date:** [December 22, 2015, 2:51pm UTC](https://forums.fusetools.com/t/how-to-move-an-item-to-a-corner-of-the-screen/3831/7 "2015-12-22T14:51:16Z")

</div>

Yumm, risk 🙂 Thanks!

---

<div class="post-metadata">

**Author:** ![Costin\_Bereveanu](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/costin_bereveanu/32/628_2.png) [@Costin\_Bereveanu](https://forums.fusetools.com/u/Costin_Bereveanu)\
**Post date:** [December 22, 2015, 2:57pm UTC](https://forums.fusetools.com/t/how-to-move-an-item-to-a-corner-of-the-screen/3831/8 "2015-12-22T14:57:12Z")

</div>

Worked! Thanks a bunch! For whoever will look at this, BottomLeftIcon can be a bottom left docked transparent panel you can set up as an anchor.