OpacityEffectStops Property

Returns a collection of OpacityEffectStop objects that define the stops to be used when setting the opacity of items along the ItemPath

Syntax

Visual Basic

'Declaration
 
Public Property OpacityEffectStops As OpacityEffectStopCollection

C#

public OpacityEffectStopCollection OpacityEffectStops {get; set;}

Remarks

Note: the UseOpacity property must be set to true for these OpacityEffectStops to be applied.

The way in which the opacity effect stops are applied to each item is determined by the item's location in the display area of the XamCarouselPanel and the setting of the OpacityEffectStopDirection property.

For example, if you are using a circular path and you want to give the user the sense that the items at the top of the circle are further away, set the this property to EffectStopDirection.Vertical and add OpacityEffectStops that range from a value of .6 at an Offset of zero to a value of 1 at an Offset of 1. This will make the items 'in the distance' appear a bit more transparent. To further enhance the perspective effect you can also do a similar thing with ScalingEffectStops - make items in the foreground (i.e., bottom of the circle) bigger and items in the back (i.e., top of the circle) smaller.

Example

In the following example, the UseOpacity has been set to true so that the panel will utilize the OpacityEffectStops that have been provided. Since the OpacityEffectStopDirection is set to Vertical, the offsets are calculated with regards to that orientation and items at the bottom will be fully opaque and the items as you move further from the bottom will be more transparent.

XAML

<igWindows:XamCarouselPanel>
    <igWindows:XamCarouselPanel.ViewSettings>
        <igWindows:CarouselViewSettings 
            UseOpacity="True"
            OpacityEffectStopDirection="Vertical"
            ItemPathRenderBrush="#77000000">

            <igWindows:CarouselViewSettings.ItemPath>
                <Path Data="M 0,0 100,100, 200,0" />
            </igWindows:CarouselViewSettings.ItemPath>

            <igWindows:CarouselViewSettings.OpacityEffectStops>
                <igWindows:OpacityEffectStopCollection>
                    <igWindows:OpacityEffectStop/>
                    <igWindows:OpacityEffectStop Offset="0.20" Value="0.10"/>
                    <igWindows:OpacityEffectStop Offset="0.50" Value="0.40"/>
                    <igWindows:OpacityEffectStop Offset="0.80" Value="0.60"/>
                    <igWindows:OpacityEffectStop Offset="1" Value="1"/>
                </igWindows:OpacityEffectStopCollection>
            </igWindows:CarouselViewSettings.OpacityEffectStops>                                        
            
        </igWindows:CarouselViewSettings>
    </igWindows:XamCarouselPanel.ViewSettings>

    <Ellipse Width="50" Height="50" Stroke="Black" Fill="Red" />
    <Ellipse Width="100" Height="50" Stroke="Black" Fill="Green" />
    <Polygon Points="0, 25, 25, 0, 75, 0, 100, 25, 75, 50, 25, 50" Stroke="Black" Fill="Yellow" />
    <Rectangle Width="100" Height="50" Stroke="Black" Fill="Purple" />
    <Polyline Points="0, 25, 25, 0, 50, 25, 25, 50, 0, 25" Stroke="SlateGray" StrokeThickness="2" Fill="Blue"/>
    <Path Stroke="Black" Fill="Gray" Data="M 10,10 C 10,100 100,-100 100,10" />
</igWindows:XamCarouselPanel>

Requirements

Target Platforms: Windows 10, Windows 8.1, Windows 8, Windows 7, Windows Server 2012, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2