Version

Modifying the Skew Effect of Items on a Path

The xamDataPresenter’s™ Carousel View can skew items on the path. You can set the skewing effect on either the X or Y axis independently. Similar to other Path effects (Opacity, Scale, Z-Order), the CarouselViewSettings object exposes the SkewAngleXStopEffectCollection and SkewAngleYStopEffectCollection. In addition, also similar to the other effects, you need to set the direction of the effect as either Horizontal, Vertical, or UseItemPath for both the X and Y skew by setting the SkewAngleXEffectStopDirection and SkewAngleYEffectStopDirection properties. The skew’s values deal with the rotation of an object and are valid from -360 to +360.

Note
Note

This topic assumes you have completed the tasks in Adding xamDataPresenter to Your Application, and have read About CarouselView.

Modifying the Skew-X

The following code skews objects along the X axis in relation to the path. The first SkewAngleXEffectStop is skewing Records 25 degrees at the beginning of the path (offset 0). Records at the half way point (offset .5) are not skewed. Records at the end of the path (offset 1) are skewed -25 degrees.

In XAML:

<igDP:CarouselView.ViewSettings>
    <igWindows:CarouselViewSettings SkewAngleXEffectStopDirection="UseItemPath"
          UseSkewing="True">
        <igWindows:CarouselViewSettings.SkewAngleXEffectStops>
            <igWindows:SkewAngleXEffectStopCollection>
                <igWindows:SkewAngleXEffectStop Offset="0" Value="25" />
                <igWindows:SkewAngleXEffectStop Offset=".5" Value="0" />
                <igWindows:SkewAngleXEffectStop Offset="1" Value="-25" />
            </igWindows:SkewAngleXEffectStopCollection>
        </igWindows:CarouselViewSettings.SkewAngleXEffectStops>
    </igWindows:CarouselViewSettings>
</igDP:CarouselView.ViewSettings>
modifying the skew-x effects of items on xamdatapresenter's path

Modifying the Skew-Y

The following code skews objects along the Y axis in relation to the path. The first SkewAngleYEffectStop skews Records 10 degrees at the beginning of the path (offset 0). Records at the half-way point (offset .5) are not skewed. Records at the end of the path (offset 1) are skewed -10 degrees.

In XAML:

<igDP:CarouselView.ViewSettings>
    <igWindows:CarouselViewSettings SkewAngleYEffectStopDirection="UseItemPath"
          UseSkewing="True">
        <igWindows:CarouselViewSettings.SkewAngleYEffectStops>
            <igWindows:SkewAngleYEffectStopCollection>
                <igWindows:SkewAngleYEffectStop Offset="0" Value="10" />
                <igWindows:SkewAngleYEffectStop Offset=".5" Value="0" />
                <igWindows:SkewAngleYEffectStop Offset="1" value="-10" />
            </igWindows:SkewAngleYEffectStopCollection>
        </igWindows:CarouselViewSettings.SkewAngleYEffectStops>
    </igWindows:CarouselViewSettings>
</igDP:CarouselView.ViewSettings>
modifying the skew-y effects of items xamdatapresenter's path

Related Topics

Overview of Path Effects

Modifying the Opacity Effect of Items on a Path

Modifying the Scale of Elements on a Path