Book page flipping in xamarin forms.

LakshyaLakshya Member ✭✭✭
I need to implement a page flip animation in my xamarin forms app.I tried with flipping but that doesn't give a perfect look.

I want a page flip like below link.

https://android.jlelse.eu/easyflipviewpager-the-flip-animations-for-your-viewpager-fd66b34f4703

Answers

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited August 26

    Try to create a custom ContentView to achieve the feature.

    public class XFFlipView : ContentView
    {
        private readonly RelativeLayout _contentHolder;
    
        public XFFlipView()
        {
            _contentHolder = new RelativeLayout();
            Content = _contentHolder;
        }
    
        public static readonly BindableProperty FrontViewProperty =
        BindableProperty.Create(...);
    
        public static readonly BindableProperty BackViewProperty =
        BindableProperty.Create(...);
    
        public static readonly BindableProperty IsFlippedProperty =
        BindableProperty.Create(...);
    
        private static void IsFlippedPropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if ((bool)newValue)
            {
                ((XFFlipView)bindable).FlipFromFrontToBack();
            }
            else
            {
                ((XFFlipView)bindable).FlipFromBackToFront();
            }
        }
    
        /// <summary>
        /// Performs the flip
        /// </summary>
        private async void FlipFromFrontToBack()
        {
            ...
        }
    
        /// <summary>
        /// Performs the flip
        /// </summary>
        private async void FlipFromBackToFront()
        {
            ...
        }
    }
    
    

    Tutorial about Flipping a View
    https://theconfuzedsourcecode.wordpress.com/2017/12/10/its-a-flippin-flipity-flippable-view-in-xamarin-forms/

    Sample code:
    https://github.com/UdaraAlwis/XFFlipViewControl

  • LakshyaLakshya Member ✭✭✭
    @AlessandroCaliaro Actually I want page flipping not card flipping.Like in the above link there is book page flipping. Anyway thanks for your response . If you get more about this please share the code.
  • LakshyaLakshya Member ✭✭✭
    edited August 27
    Here is what I did...
    await this.RotateYTo(-90, 200);
    this.RotationY = -270;
    this.RotateYTo(-360, 200);
    await this.TranslateTo(0, 0, 220);
    this.RotationY = 0;
  • LakshyaLakshya Member ✭✭✭
    edited August 28
    Any updates
  • JarvanJarvan Member, Xamarin Team Xamurai

    I've reproduced you code and it works as expected. Add the Rotation effect in page2's constructor method. What's the problems now?

    page1.xaml.cs

    public partial class Page1 : ContentPage
    {
        public Page1()
        {
            InitializeComponent();
        }
    
        private void Button_Clicked(object sender, EventArgs e)
        {
            Navigation.PushAsync(new Page2(""));
        }
    }
    

    page2.xaml.cs

    public partial class Page2 : ContentPage
    {
        public Page2()
        {
            InitializeComponent();
        }
    
        public Page2(string s)
        {
            InitializeComponent();
    
            RotationMethod();
        }
    
        private async void RotationMethod()
        {
            await this.RotateYTo(-90, 200);
            this.RotationY = -270;
            this.RotateYTo(-360, 200);
            await this.TranslateTo(0, 0, 220);
            this.RotationY = 0;
        }
    }
    

  • LakshyaLakshya Member ✭✭✭
    edited August 29
    I already tried with the rotation implementation. Actually I want a flipping like this video.
  • JarvanJarvan Member, Xamarin Team Xamurai

    Not the same as effects the video shown, but also contains a lot of page turning effects.Hope this will help you.
    https://github.com/jsuarezruiz/xamarin-forms-page-transitions

  • LakshyaLakshya Member ✭✭✭
    edited August 29

    will check

  • LakshyaLakshya Member ✭✭✭

    Hi,
    I tried with this link :- https://github.com/harism/android-pagecurl.

    But I didn't get any curl effect

  • LakshyaLakshya Member ✭✭✭

    Any update..

Sign In or Register to comment.