Search code examples
c#xamarinxamarin.iosxamarin-zebblezebble

How can I change the animation of the carousel in Zebble for Xamarin?


I found a subject on http://zebble.net/docs/carousel-class and use it on my device application and I provide the code below, but I have a problem with changing the animation of the carousel such as home pages in android devices.

<Carousel Id="MyCarousel">
  <z-place inside="MyCarousel.Slides">
    <Stack>
      <TextView Text="Slide 1" />
      <Button Text="Test1" />
    </Stack>
    <Stack>
      <TextView Text="Slide 2" />
      <Button Text="Test2" />
    </Stack>
    <Stack>
      <TextView Text="Slide 3" />
      <Button Text="Test3" />
    </Stack>
  </z-place>
</Carousel>

I want to add a 3D transition such as cube transition which exists on android and IOS devices


Solution

  • The carousel component is used only for standard carousel UX with horizontal sliding between pages of content.

    For other forms of content switching such as a cube effect, you can use the following:

    1. Add a container Canvas
    2. Handle its Swipe gesture event (swipe left and right)
    3. Select the next content (depending on left or right) and animate it into view.

    For example, you can animate RotationY from 90 degrees to 0 to bring the right side of the cube into view, and rotate RotationY from 0 to -90 degrees for the previous one to turn out of the page.