Details view animation
In this example we implement this really cool list item to detail view animation by Dejan Markovic
In this article we focus on the high level concepts used in creating the transition from list item to details view.
The transition
The transition from list item to details view is achieved by predefining the details view with placeholder panels. Each part of this placeholder layout is passed in to each of the list items using ux:Dependency. When an item is selected, it is then animated to the correct placeholder panel using the RelativeTo="PositionOffset"
of Move
. We also use Resize
since the items has to change slightly in size to fit the new layout. The PositionOffset
option of RelativeTo
means that the item will move in the direction of the item specified by RelativeNode
.
Here is an example of those animators:
<Move Easing="CubicInOut" Target="img" Vector="1" RelativeTo="PositionOffset" RelativeNode="detailsImagePanel" Duration="0.6" />
<Resize Easing="CubicInOut" Target="img" Vector="1" RelativeTo="Size" RelativeNode="detailsImagePanel" Duration="0.6" />
Exclusive selection
To make sure only one item can be selected at once (in case the user clicked on two at the same time), we make all the items in the list be a part of a Selection
with max selection count of 1:
<Selection MinCount="0" MaxCount="1" Value="{Write current}"/>
We give each item a Selectable
with its Value
set to a unique id
coming from JavaScript. We can then use a WhileSelected
trigger to flip the switch on the WhileTrue
which animates the item to its details view layout.
Feel free to download the full source code and dig around.