Spread out items in carousel

[Caden]

I'm trying to spread out the items in my carousel so there is a bit of space between them (and ideally no change in z depth as they animate).

It seems like the items can only spread out to the edges of the screen. In my case I need 3 landscape images visible at once.

Instead of overlapping 3 images on screen like |[--][--][--]| where the center image is raised/focused, I'd like [-|-][--][-|-] where the side images are the same size and partially off screen.

I've tried the following, as well as using bezier curves with control points, etc.

<Path x:Key="horizontalPath" Stretch="Fill">
  <Path.Data>
     <LineGeometry StartPoint="-1000,0" EndPoint="1000,0" />
  </Path.Data>
</Path>

 

 

[Vladimir Stoyanov]

Hello Caden,

In order to achieve the described functionality I can suggest manually dividing the available Width among the CarouselItems. Additionally, you can position the items by modifying their RenderTransform. You can do that by inheriting the RadCarouselPanel and overriding the ArrangeOverride method. 

I am attaching a sample project to demonstrate what I have in mind. Note, that the suggested approach is a customization and I have not tested it extensively. That said, I do hope that you will find it useful as a starting point. Of course, feel free to modify the demonstrated approach in order to adapt it to your specific scenario. 

Regards,
Vladimir Stoyanov
Progress Telerik