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

<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:

• InMovementXSpeed
• InMovementZSpeed
• InRotationSpeed
• InScaleSpeed
• OutMovementXSpeed
• OutMovementZSpeed
• OutRotationSpeed
• OutScaleSpeed

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

<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>