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
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.
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
<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.
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.
<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:
<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.
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
<LayoutAnimation>
<Move RelativeTo="LayoutChange" X="1" Y="1" Duration="1" />
</LayoutAnimation>
to animate eventual changes. I think this will need to be removed.
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
Yumm, risk Thanks!
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.