This example shows how to customize UXFlow's flow effects.
Example
Description
UXFlow provides two types of visual effects. The first one is adapted from Apple iTunes’s cover flow, which uses a perspective point of view, and the other is an Intersoft's unique implementation which uses scale point of view.
Both of the effect shares several settings in common such as explained in the following list:
- ItemOffset
Determines the space between the focus item with the first item on the left and right using the following formula [distance = offset * actual CoverSize]. Meanwhile the distance between the rest of items is determined by ItemSpace. - ItemSpace
Determines the space between items except the first item on the left and right of focus item.
The following example shows you how to use ItemOffset and ItemSpace.
Code
| XAML |  Copy Code |
|---|---|
<Intersoft:UXFlow Grid.Row="1" ItemsSource="{Binding HotelCollection}" ImageMemberPath="Hotel.Image" TitleMemberPath="Hotel.Name" SubTitleMemberPath="Hotel.Location" NavigateUriMemberPath="NavigateUri" ItemOffset="0.4" ItemSpace="70" ></Intersoft:UXFlow> |
|
Example
Description
UXFlow perspective point effect has been significantly enhanced to provide visually compelling flow effect.
The perspective effect is controlled by the following properties:
-
PerspectiveRotation
Determines the angle of rotation that UXFlow should perform; by default the value is 45. -
PerspectiveOffsetY
Determines the Y position of the perspective. The default value is 0.
While the flow animation is controlled by:
You can control the flow-in speed and flow out speed in four different transformations (movement x, movement z, scale and rotation). To achieve the best animation as you desired, you may need to play around with these properties.
Code
| XAML | Copy Code |
|---|---|
<Intersoft:UXFlow Grid.Row="1" ItemsSource="{Binding HotelCollection}" ImageMemberPath="Hotel.Image" TitleMemberPath="Hotel.Name" SubTitleMemberPath="Hotel.Location" NavigateUriMemberPath="NavigateUri" PerspectiveRotation="90" PerspectiveOffsetY="10" InMovementXSpeed="1" InMovementZSpeed="1" InRotationSpeed="1" InScaleSpeed="1" OutMovementXSpeed="1" OutMovementZSpeed="1" OutRotationSpeed="1" OutScaleSpeed="1" ></Intersoft:UXFlow> |
|