Flip effect in xamarin forms?

Question

Hi Team,

I want to achieve the below flip effect in xamarin forms.( example : flipboard mobile app)

Please find the feature which I need to achieve from below video.

https://www.dropbox.com/s/gikr1lw2jyp5uuf/WhatsApp%20Video%202021-03-11%20at%203.36.47%20PM%20%28online-video-cutter.com%29.mp4?dl=0

if anyone have example code please share it.

Thanks

Answer

Hello,

Welcome to our Microsoft Q&A platform!

First of all, I find two example code about Flip effect,

https://github.com/UdaraAlwis/XFFlipViewControl

https://github.com/jsuarezruiz/xamarin-forms-page-transitions#flip

So I used the first example code.

I edited his XFFlipView code

   using System;  
   using System.Collections.Generic;  
   using System.Linq;  
   using System.Text;  
   using System.Threading.Tasks;  
   using Xamarin.Forms;  
     
   namespace App64  
   {  
       public class XFFlipView : ContentView  
       {  
           private readonly RelativeLayout _contentHolder;  
     
           public XFFlipView()  
           {  
               _contentHolder = new RelativeLayout();  
               Content = _contentHolder;  
           }  
     
           public static readonly BindableProperty FrontViewProperty =  
           BindableProperty.Create(  
               nameof(FrontView),  
               typeof(View),  
               typeof(XFFlipView),  
               null,  
               BindingMode.Default,  
               null,  
               FrontViewPropertyChanged);  
     
           private static void FrontViewPropertyChanged(BindableObject bindable, object oldValue, object newValue)  
           {  
               if (newValue != null)  
               {  
                   ((XFFlipView)bindable)  
                       ._contentHolder  
                       .Children  
                       .Add(((XFFlipView)bindable).FrontView,  
                           Constraint.Constant(0),  
                           Constraint.Constant(0),  
                           Constraint.RelativeToParent((parent) => parent.Width),  
                           Constraint.RelativeToParent((parent) => parent.Height)  
                       );  
               }  
           }  
     
           ///   
           /// Gets or Sets the front view  
           ///   
           public View FrontView  
           {  
               get { return (View)this.GetValue(FrontViewProperty); }  
               set { this.SetValue(FrontViewProperty, value); }  
           }  
     
     
     
           public static readonly BindableProperty BackViewProperty =  
           BindableProperty.Create(  
               nameof(BackView),  
               typeof(View),  
               typeof(XFFlipView),  
               null,  
               BindingMode.Default,  
               null,  
               BackViewPropertyChanged);  
     
           private static void BackViewPropertyChanged(BindableObject bindable, object oldvalue, object newvalue)  
           {  
               //Set BackView Rotation before rotating  
               if (newvalue != null)  
               {  
                   ((XFFlipView)bindable)  
                       ._contentHolder  
                       .Children  
                       .Add(((XFFlipView)bindable).BackView,  
                           Constraint.Constant(0),  
                           Constraint.Constant(0),  
                           Constraint.RelativeToParent((parent) => parent.Width),  
                           Constraint.RelativeToParent((parent) => parent.Height)  
                        );  
     
                   ((XFFlipView)bindable).BackView.IsVisible = false;  
               }  
           }  
     
           ///   
           /// Gets or Sets the back view  
           ///   
           public View BackView  
           {  
               get { return (View)this.GetValue(BackViewProperty); }  
               set { this.SetValue(BackViewProperty, value); }  
           }  
     
     
     
           public static readonly BindableProperty IsFlippedProperty =  
           BindableProperty.Create(  
               nameof(IsFlipped),  
               typeof(bool),  
               typeof(XFFlipView),  
               false,  
               BindingMode.Default,  
               null,  
               IsFlippedPropertyChanged);  
     
           ///   
           /// Gets or Sets whether the view is already flipped  
           /// ex :   
           ///   
           public bool IsFlipped  
           {  
               get { return (bool)this.GetValue(IsFlippedProperty); }  
               set { this.SetValue(IsFlippedProperty, value); }  
           }  
     
           private static void IsFlippedPropertyChanged(BindableObject bindable, object oldValue, object newValue)  
           {  
               if ((bool)newValue)  
               {  
                   ((XFFlipView)bindable).FlipFromFrontToBack();  
               }  
               else  
               {  
                   ((XFFlipView)bindable).FlipFromBackToFront();  
               }  
           }  
     
           ///   
           /// Performs the flip  
           ///   
           private async void FlipFromFrontToBack()  
           {  
               await FrontToBackRotate();  
     
               // Change the visible content  
               this.FrontView.IsVisible = false;  
               this.BackView.IsVisible = true;  
     
               await BackToFrontRotate();  
           }  
     
           ///   
           /// Performs the flip  
           ///   
           private async void FlipFromBackToFront()  
           {  
               await FrontToBackRotate();  
     
               // Change the visible content  
               this.BackView.IsVisible = false;  
               this.FrontView.IsVisible = true;  
     
               await BackToFrontRotate();  
           }  
     
           #region Animation Stuff  
     
           private async Task FrontToBackRotate()  
           {  
               ViewExtensions.CancelAnimations(this);  
     
               this.RotationX = 360;  
     
               await this.RotateXTo(270, 500, Easing.Linear);  
     
               return true;  
           }  
     
           private async Task BackToFrontRotate()  
           {  
               ViewExtensions.CancelAnimations(this);  
     
               this.RotationX = 90;  
     
               await this.RotateXTo(0, 500, Easing.Linear);  
     
               return true;  
           }  
     
           #endregion  
       }  
   }

Then I used it in my Contentpage.

     
     
         
             
                 
                   0, 20, 0, 0

Here is page‘s background code.

   using System;  
   using System.Collections.Generic;  
   using System.Linq;  
   using System.Text;  
   using System.Threading.Tasks;  
     
   using Xamarin.Forms;  
   using Xamarin.Forms.Xaml;  
     
   namespace App64  
   {  
       [XamlCompilation(XamlCompilationOptions.Compile)]  
       public partial class Page1 : ContentPage  
       {  
           public Page1()  
           {  
               InitializeComponent();  
     
               XFFlipViewControl1.IsFlipped = true;  
           }  
     
           private async void FlippedButton_OnClicked(object sender, EventArgs e)  
           {  
               ((Button)sender).IsEnabled = false;  
     
               Random rand = new Random();  
     
               XFFlipViewControl1.IsFlipped = !XFFlipViewControl1.IsFlipped;  
     
               await Task.Delay(rand.Next(200, 1000));  
     
               XFFlipViewControl2.IsFlipped = !XFFlipViewControl2.IsFlipped;  
     
               await Task.Delay(rand.Next(200, 1000));  
     
               XFFlipViewControl3.IsFlipped = !XFFlipViewControl3.IsFlipped;  
     
               await Task.Delay(rand.Next(200, 1000));  
     
               XFFlipViewControl4.IsFlipped = !XFFlipViewControl4.IsFlipped;  
     
               ((Button)sender).IsEnabled = true;  
           }  
       }  
   }

Best Regards,

Leon Lu

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Flip effect in xamarin forms?

1 answer