Version

Modifying the Opacity Effect of Items on xamCarouselPanel’s Path

The OpacityEffect can change the opacity of items making them lighter or darker, providing a fading effect. When used properly, this effect could give foreground items the effect of being closer and background items the effect of being further away. The OpacityEffect is created as an OpacityEffectStopCollection. This collection contains several OpacityEffectStops with Offsets and Values. The value can be specified as a decimal percentage from 0 to 1. The Offset depends on the OpacityEffectStopDirection which can be set to one of three values:

  • Vertical

  • Horizontal

  • UseItemPath

Note
Note

This topic assumes you have completed the tasks in Adding xamCarouselPanel to Your Page.

Follow these steps to create an opacity effect for items in the xamCarouselPanel™ control.

  1. Create the xamCarouselPanel ViewSettings which is of type CarouselViewSettings. Set the OpacityEffectStopDirection property to UseItemPath and set the UseOpacity property to True. This ensures that your Opacity settings will be used along the path.

In XAML:

<igWindows:XamCarouselPanel.ViewSettings>
    <igWindows:CarouselViewSettings OpacityEffectStopDirection="UseItemPath"
          UseOpacity="True">
            ...
    </igWindows:CarouselViewSettings>
</igWindows:XamCarouselPanel.ViewSettings>

  1. Define the OpacityEffectStops and OpacityEffectStopCollection objects inside the CarouselViewSettings object.

In XAML:

<igWindows:CarouselViewSettings.OpacityEffectStops>
    <igWindows:OpacityEffectStopCollection>
            ...
    </igWindows:OpacityEffectStopCollection>
</igWindows:CarouselViewSettings.OpacityEffectStops>

  1. Define the OpacityEffectStops object. Create three OpacityEffectStops. The Offsets will start at the beginning of the path and follow to the end, starting at a zero opacity, going to 1, and back to zero.

In XAML:

<igWindows:OpacityEffectStop Offset="0" Value="0" />
<igWindows:OpacityEffectStop Offset=".5" Value="1" />
<igWindows:OpacityEffectStop Offset="1" Value="0" />

  1. Build and run the project. You will see the farthest items are still slightly visible. This is because the items on the path do not necessarily start right at 0 opacity nor do they end right at 1 opacity; items come into view after the beginning of the path, therefore you never see them at exactly 0 opacity.

modifying the opacity effect of items on xamcarousel's path

Related Topics

Overview of Path Effects

Modifying the Scale of Elements on xamCarouselPanel’s Path

Modifying the Skew Effect of Items on xamCarouselPanel’s Path