Version

Modifying the Opacity Effect of Items on a 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 xamDataPresenter to Your Application.

Follow these steps to create an opacity effect for Records in the xamDataPresenter™ Carousel View.

  1. In your code replace the Grid View setup with the following. This creates a CarouselView and a CarouselView’s 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:

<igDP:XamDataPresenter.View>
        <igDP:CarouselView>
                <igDP:CarouselView.ViewSettings>
                        <igWindows:CarouselViewSettings
                          OpacityEffectStopDirection="UseItemPath"
                          UseOpacity="True">
                                ...
                        </igWindows:CarouselViewSettings>
                </igDP:CarouselView.ViewSettings>
        </igDP:CarouselView>
</igDP:XamDataPresenter.View>
  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 Records 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; Records 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 xamdatapresenter's path