Understanding Carousel Scaling

[Paul Parkins]

Please can you give me some information on how scaling works on the wpf Carousel control? I have checked the API reference here and it is of no help at all for it to inform me that the "ScaleFracrtions" property " Gets or sets the scale fractions". I could have guessed that, but HOW does a scale fraction work?

I have seen the layout demo in the master demos and it uses a ScaleFraction of 0.6. But then in the Succinctly Series demo it uses a value of 100. I had tried various values and it doesn't seem logical.  You can be re-scaling by 0.1 at a time and the selected item gets, smaller, then all of a sudden it gets bigger.

There are 3 related properties that have no useful description: ScaleFraction, ScaleFractions and ScalingEnabled.

I have this weird problem where I rotate my carousel and it appears to animate in the opposite direction to which I am swiping. I am wondering if it is realted to this, or maybe something to do with the fact you seem to have to se some very odd margins just to get the carousel to appear in the position you want (even though should be contained in a grid cell)

[Sekar Sivalingam]

Hi Paul Parkins,

Query 1: "How Scaling works on WPF Carousel control?"

The ScalingFraction property in a carousel control is used to define how much non-selected items are scaled (in terms of size) relative to the selected item in the carousel. In a carousel, the selected item is typically highlighted as the most prominent item, while other items are displayed smaller, gradually decreasing in size as they move further away from the center.

please refer the below UG documentation: https://help.syncfusion.com/wpf/carousel/getting-started#resize-the-carousel-items

Query 2: "Facing weird problem where I rotate my carousel"

I understand that you're seeing the carousel rotate in the opposite direction to your swipe and are encountering some layout issues. I'll explain how the carousel's animation and layout work, which should help clarify what you’re experiencing.

In a carousel control, the rotation direction is determined based on the position of the clicked item. Here’s how it typically works:

• If you click or swipe an item from the left side of the carousel, the carousel will rotate clockwise, bringing the clicked item to the topmost position.
• If you click or swipe an item from the right side, the carousel rotates counterclockwise, again bringing the clicked item to the topmost position.

This might be causing the behavior you are seeing, where the carousel seems to rotate in the opposite direction. The rotation is not based directly on the direction of your swipe but rather on the relative position of the item you clicked or swiped.

[Paul Parkins]

Hi,

Thanks for the help with the scaling. The Syncfusion SuccintlySeries demo uses a ScaleFraction of 100 which is definately not a value between 0 and 1. I think the ScalingEnabled property affects the use of ScaleFraction in some way such as whether it expect 0.1 or 10 (both for 10%)

With regards to swiping, I can confirm that the Master Layout Demo of the Carousel / Custom Path behaves exact;ly as you describe.  So does my own application, but when using a touch screen monitor to swipe the carousel, the resultant behaviour seems totally counter-intuitive

However, when I look at the Syncfuction's SuccintlySeries demo, the book carousel in there swipes exactly as I would like my own carousel to swipe. Counter to your expectation of how it should work, if I swipe right to left on either an item (book) on the left OR the right side of the carousel, then the carousel spins right to left (what I would call clockwise) as I would expect.

I am trying to find out what it is about that demo that is so different, but even when I try similar carousel properties in my app, it's just doesn't work like that demo. I'll post back if I get any progress....

[Sekar Sivalingam]

Hi Paul Parkins,

Query 1: Clarification on ScaleFraction Limits in the Carousel Control

 

To clarify, while the ScaleFraction property can accept values greater than 1, the maximum effective limit is 1. This means that any value set above 1 (like 100) will be interpreted as 1, resulting in no additional scaling effect beyond the default. The ScalingEnabled property allows for the scaling feature to be active or inactive, but it does not change the maximum value for ScaleFraction.

 

Query 2: Touch Screen Swiping Behavior in Carousel

 

We will validate this issue with a touch screen setup and assess the behavior further. We'll get back to you with our findings shortly.

Regards,
Sekar Sivalingam

[Paul Parkins]

Hi,

I still stand by my statement on the difference on how your two demos model the carousel scrolling behaviour, but FYI I have now managed to get my own carousel working as I would like.

For my own, I had to tweak the margin and radius properties, in relation to the size of the item defined in the carousel. So as I make my item larger, I have to make the carousel margins more negative. Without having these correctly defined, it is possible to view the carousel, but for it to appear squashed and not react to swiping as I wished.

In defining a carousel, it's important to realise when trying to size the carousel, that to get it to work effectively, you have to size the margins so the control exists in an area which is much larger than it's container (in my case a grid cell). This is achieved using negative margin values.