Rotation and Opacity in WPF Carousel

You can rotate and change the opacity of the carousel items in WPF Carousel control.

You can place the carousel items with a specific rotation angle by using the RotationAngle property. The default value of RotationAngle property is 0.

<syncfusion:Carousel RotationAngle="180" 
                     Name="carousel" />
carousel.RotationAngle = 180;

Carousel items rotated with 25 degree angle

NOTE

View Sample in GitHub

Change rotation speed

If you want to change the rotation speed of the carousel items when selecting or navigating from one item to another item, use the RotationSpeed property. This will effective only on Standard visual mode. The default value of RotationSpeed property is 200.

<syncfusion:Carousel RotationSpeed="150"
                     VisualMode="Standard"
                     Name="carousel" />
carousel.RotationSpeed = 150;
carousel.VisualMode = VisualMode.Standard;

Carousel items rotation speed changed

NOTE

View Sample in GitHub

Disable rotation animation

If you want to disable the animated rotation of carousel items when selecting or navigating from one item to another item, use the EnableRotationAnimation property value as false. This will effective only on Standard visual mode. The default value of EnableRotationAnimation property is true.

<syncfusion:Carousel EnableRotationAnimation="False" 
                     VisualMode="Standard"
                     Name="carousel" />
carousel.EnableRotationAnimation = false;
carousel.VisualMode = VisualMode.Standard;

Carousel items animated rotation disabled

NOTE

View Sample in GitHub

If you want to change the opacity of the carousel items except the selected item in the VisualMode.Standard mode, set the fraction value to the OpacityFraction property. The default value of OpacityFraction property is 0.

<syncfusion:Carousel OpacityFraction="0.8" 
                     VisualMode="Standard"
                     Name="carousel" />
carousel.OpacityFraction = 0.8;
carousel.VisualMode = VisualMode.Standard;

Carousel items opacity fraction changed in standard view mode

NOTE

View Sample in GitHub

If you want to individually change the opacity of the next, previous items or selected carousel items in the VisualMode.CustomPath mode, set the fraction values to the OpacityFractions collection property. You can disable it by setting the OpacityEnabled property value as false. The default value of OpacityFractions property is null and OpacityEnabled property is true.

<syncfusion:Carousel OpacityEnabled="True"
                     VisualMode="CustomPath"
                     Name="carousel">
    <syncfusion:Carousel.OpacityFractions>
        <syncfusion:PathFractionCollection>
            
            <!--Opacity for next items from the selected item-->
            <syncfusion:FractionValue Fraction="0" Value="0"/>
            
            <!--Opacity for selected item-->
            <syncfusion:FractionValue Fraction="0.5" Value="0.8"/>
            
            <!--Opacity for previous items from the selected item-->
            <syncfusion:FractionValue Fraction="1" Value="0"/>
        </syncfusion:PathFractionCollection>
    </syncfusion:Carousel.OpacityFractions>
</syncfusion:Carousel>
FractionValue NextItemfraction = new FractionValue() { Fraction = 0, Value = 0 };			
FractionValue selectedItemfraction = new FractionValue() { Fraction = 0.5, Value = 0.8 };
FractionValue PreviousItemfraction = new FractionValue() { Fraction = 1, Value = 0 };

PathFractionCollection pathFraction = new PathFractionCollection();
pathFraction.Add(NextItemfraction);
pathFraction.Add(selectedItemfraction);
pathFraction.Add(PreviousItemfraction);

//Adding opacity fractions to the carousel items
carousel.OpacityFractions = pathFraction;

carousel.OpacityEnabled = true;
carousel.VisualMode = VisualMode.CustomPath;

Carousel items opacity fraction changed in custom path view mode

NOTE

View Sample in GitHub