Using the properties in the CarouselViewSettings class, you can create special visual effects for your carousel items when they reach any position along the Path that you can imagine. These Path Effects result in simulating two-dimensional layouts that appear to be three-dimensional. The techniques are really simple to learn, and have been practiced by art students since the time of the Renaissance. By scaling items to be smaller as they become farther away, and decreasing an item's opacity as it reaches the proverbial vanishing point on the horizon, you can create immersive experiences for end users that enhance their impression of your application.
When you look at the many "Effects"-oriented properties in the CarouselViewSettings class, you will see that for every Path Effect supported, there are several recurring properties. Understanding these principles related to applying effects to your Path will lead you to use all of the Path Effects with greater success. For more information on the key role that the CarouselViewSettings class plays in the Carousel View, see Architecture.
The common principles you need to keep in mind are:
- Stops -- The starting point of your Path has a value of 0.0, and the ending point of your Path has a value of 1.0. Even if your Path is a closed circuit, such that it might seem as if it had no beginning or end, the first point which you specify for the Path.Data will be treated as the starting point. You can specify any number of Stops along this Path, and it will be at these Stops where you can change the value of a Path Effect. For example, you might specify Stops at 0.25, 0.50, 0.75, and 1.0. This means you can change the values of the Path Effect at these points. As carousel items move along the Path between Stops, the Value is linearly interpolated. What this means is that if you specified a Scale of 1.0 at 0, and 2.0 at 0.25, then when your carousel item is one-eighth (0.125) along the Path, its Scale will be automatically calculated at 1.5. Therefore, you do not need to enter lots of Stops, because the Value continuously recalculates itself to smoothly transition between the Values you specify at the Stop points. Instead, you should place Stops at points where you want the Value to change at a different rate, or reverse in Value.
- Stop Direction -- The Path moves two-dimensionally. You can associate Values with a Path Effect based on its relative position vertically (along the y-axis) or horizontally (along the x-axis) if you want. For example, you can apply a Vertical Stop Direction so that a Path Effect (e.g., Scaling) takes place only as carousel items move up and down (but not left or right) on the screen. Taking advantage of this direction of a carousel item's travel makes it easier to apply a consistent Stop value at points along the vertical and the horizontal, without having to compute precisely how far along the Path your carousel item has gone. For more complex Paths, this calculation requires trigonometry to solve.
- Using -- Every Path Effect has a Using property associated with it so that you can turn the effect on or off instantaneously. This allows you to define Stop collections, Stop directions, and Values for your Path Effect in advance, but not activate those effects until a time of your choosing. To enable a particular Path Effect, simply set its Using property to True.
Now that you understand the basic principles that apply to all Path Effects, you should take some time becoming more acquainted with the Path Effects supported by xamCarouselPanel and the controls that use it to display information in Carousel View.
The following is a list of the supported Path Effects:
- Scaling -- Scaling lets you magnify or shrink a carousel item, where values of less than 1.0 reduce the size (height and width) of the carousel item, and values greater than 1.0 increase its size. Scaling effects let you make carousel items appear smaller and intuitively to many end users who experience your carousel-enabled application, seemingly more "distant". Conversely, scaling a carousel item to appear larger makes it appear closer than other items. However, ensure that the Z-Order (defined below) is set appropriately to draw a carousel item that you've scaled larger in order to make it seem closer, actually over top of something you intend to be in the background. Scaling also works very well with Opacity effects, and can be used with several sophisticated Skewing effects.
- Skewing -- Skewing lets you skew the appearance of a carousel item along the x- and y-axes, independently or together. The value for a skew is measured in degrees of arc. Therefore, skewing an item (in any direction) by a Value of 360 degrees will return the item to its original appearance. Skewing is beneficial for Values between -90 and 90. Ninety degrees is a right angle, and is equivalent to one-quarter of a clockwise turn (or counter-clockwise turn, if the Value is negative) in the direction of skew. You can use Skewing to create an accelerated sense of motion (as the carousel item "tears" away), or to perform more sophisticated effects like clockwise (or counter-clockwise) rotation. A carousel item will rotate a number of degrees clockwise if you skew it in both the x- and y-axes by the same number of degrees.
- Opacity -- Opacity means how opaque (that is, impenetrable to being seen through) an object is, and it is the opposite of transparency. An Opacity value of 0.0 makes a carousel item completely transparent (you won't see it), whereas an Opacity value of 1.0 will make the carousel item completely opaque (you won't see what is behind it). Between these values is translucency, where you see some percentage of the background showing through the carousel item. You can use Opacity effects to fade items in and out of view, create the illusion of a vanishing point and smooth transition into full opacity, and enhance the sense of realism in the data you are presenting.
- Z-Order -- Z-Order refers to the position of one carousel item in front of, or behind, another carousel item. The Z-Order has an effect on the order in which carousel items are drawn by the WPF rendering engine. It is important that you coordinate other Path Effects you may be using with the Z-Order effect to ensure that items you have scaled and/or made more transparent so that they seemed to be farther away do, in fact, draw behind the carousel items you want in the foreground. By default, the UseZOrder property is set to False, which means that items appearing first (earlier) in the list of items bound to the Carousel-enabled control will be in the background, and those that appear last (later) in the list of items will be in the forefront.
In addition to these Path Effects, which you can add to the appropriate Path Effect's Stops collection on the ViewSettings property, there is an additional mechanism for applying Scaling and Opacity Effects as a carousel item moves onto or off of the Path. The PathItemTransitionStyle enumeration lists the Path Effects available to you. They have been specialized for the case of transitioning an item to/from invisibility as it enters or leaves the "horizon" at the ends of the Path. This transition area is defined by the Path's ItemPathPrefixPercent and ItemPathSuffixPercent properties. Assign the appropriate transition style enumeration value to the ItemTransitionStyle property on ViewSettings to take advantage of this special feature.
