Version

Modifying the Scale of Elements on a Path

The xamDataPresenter’s™ Carousel View allows you to scale Records by a percentage based on their position on the path. Scaling gives Records a 3D effect. The ScalingEffect is similar to other Path effects in that you define a ScalingEffectStopCollection that contains ScalingEffectsStops, each of which specify an offset and a value to apply at that offset. The value is a decimal percentage that can go from 0 to 10.

Enable scaling by setting the UseScaling property to True off the CarouselViewSettings object. Off this same object, set the ScalingEffectStopDirection property to UseItemPath, Horizontal, or Vertical.

Note
Note

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

  1. Define the ViewSettings object.

In XAML:

<igWindows:CarouselView.ViewSettings>
        ...
</igWindows:CarouselView.ViewSettings>

  1. Specify the CarouselViewSettings object and set the UseScaling property to True and the ScalingEffectStopDirection property to UseItemPath.

In XAML:

<igWindows:CarouselViewSettings ScalingEffectStopDirection="UseItemPath"
  UseScaling="True">
        ...
</igWindows:CarouselViewSettings>

  1. Define the ScalingEffectStops object. This object contains the ScalingEffectStopCollection and the ScalingEffectStops. Create three ScalingEffectStops.

In XAML:

<igWindows:CarouselViewSettings.ScalingEffectStops>
        <igWindows:ScalingEffectStopCollection>
                <igWindows:ScalingEffectStop Offset="0" Value="2" />
                <igWindows:ScalingEffectStop Offset=".5" Value="1.1" />
                <igWindows:ScalingEffectStop OffsetB"1" Value=".1" />
        </igWindows:ScalingEffectStopCollection>
</igWindows:CarouselViewSettings.ScalingEffectStops>

  1. Build and run the project. You should see the size of the Records in xamDataPresenter increasing in size as they pass through the path similar to the image below.

modifying the scale of elements in xamdatapresenter's path

Related Topics

Overview of Path Effects

Modifying the Opacity Effect of Items on a Path

Modifying the Skew Effect of Items on a Path