Flip effect in xamarin forms?

Smart Man 21 Reputation points
2021-03-11T10:18:37.01+00:00

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

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
4,820 questions
No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 41,821 Reputation points Microsoft Employee
    2021-03-11T12:47:01.55+00:00

    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)  
                           );  
                   }  
               }  
         
               /// <summary>  
               /// Gets or Sets the front view  
               /// </summary>  
               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;  
                   }  
               }  
         
               /// <summary>  
               /// Gets or Sets the back view  
               /// </summary>  
               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);  
         
               /// <summary>  
               /// Gets or Sets whether the view is already flipped  
               /// ex :   
               /// </summary>  
               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();  
                   }  
               }  
         
               /// <summary>  
               /// Performs the flip  
               /// </summary>  
               private async void FlipFromFrontToBack()  
               {  
                   await FrontToBackRotate();  
         
                   // Change the visible content  
                   this.FrontView.IsVisible = false;  
                   this.BackView.IsVisible = true;  
         
                   await BackToFrontRotate();  
               }  
         
               /// <summary>  
               /// Performs the flip  
               /// </summary>  
               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<bool> FrontToBackRotate()  
               {  
                   ViewExtensions.CancelAnimations(this);  
         
                   this.RotationX = 360;  
         
                   await this.RotateXTo(270, 500, Easing.Linear);  
         
                   return true;  
               }  
         
               private async Task<bool> BackToFrontRotate()  
               {  
                   ViewExtensions.CancelAnimations(this);  
         
                   this.RotationX = 90;  
         
                   await this.RotateXTo(0, 500, Easing.Linear);  
         
                   return true;  
               }  
         
               #endregion  
           }  
       }  
    

    Then I used it in my Contentpage.

       <?xml version="1.0" encoding="utf-8" ?>  
       <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:xfFlipViewControl="clr-namespace:App64"  
                    x:Class="App64.Page1">  
           <ContentPage.Padding>  
               <OnPlatform x:TypeArguments="Thickness">  
                   <OnPlatform.iOS>  
                       0, 20, 0, 0  
                   </OnPlatform.iOS>  
               </OnPlatform>  
           </ContentPage.Padding>  
         
           <ContentPage.Content>  
               <Grid>  
                   <xfFlipViewControl:XFFlipView  
                       x:Name="XFFlipViewControl1"  
                       Grid.Row="0"  
                       Grid.Column="0">  
         
                       <xfFlipViewControl:XFFlipView.FrontView>  
                           <Frame  
                               Margin="10"  
                               Padding="0"  
                               BackgroundColor="#0080ff"  
                               CornerRadius="10"  
                               HasShadow="True"  
                               OutlineColor="Silver">  
                               <Grid>  
                                   <Image  
                                       Aspect="AspectFit"  
                                       HeightRequest="100"  
                                       Source="icon.png"  
                                       VerticalOptions="CenterAndExpand" />  
                               </Grid>  
                           </Frame>  
                       </xfFlipViewControl:XFFlipView.FrontView>  
                       <xfFlipViewControl:XFFlipView.BackView>  
                           <Frame  
                               Margin="10"  
                               Padding="0"  
                               BackgroundColor="#ff0080"  
                               CornerRadius="10"  
                               HasShadow="True"  
                               OutlineColor="Silver">  
                               <Grid>  
                                   <Image  
                                       Aspect="AspectFit"  
                                       HeightRequest="100"  
                                       Source="favourite.png"  
                                       VerticalOptions="CenterAndExpand" />  
                               </Grid>  
                           </Frame>  
                       </xfFlipViewControl:XFFlipView.BackView>  
         
                   </xfFlipViewControl:XFFlipView>  
         
                   <xfFlipViewControl:XFFlipView  
                       x:Name="XFFlipViewControl2"  
                       Grid.Row="1"  
                       Grid.Column="0">  
         
                       <xfFlipViewControl:XFFlipView.FrontView>  
                           <Frame  
                               Margin="10"  
                               Padding="0"  
                               BackgroundColor="#0080ff"  
                               CornerRadius="10"  
                               HasShadow="True"  
                               OutlineColor="Silver">  
                               <Grid>  
                                   <Image  
                                       Aspect="AspectFit"  
                                       HeightRequest="100"  
                                       Source="icon.png"  
                                       VerticalOptions="CenterAndExpand" />  
                               </Grid>  
                           </Frame>  
                       </xfFlipViewControl:XFFlipView.FrontView>  
                       <xfFlipViewControl:XFFlipView.BackView>  
                           <Frame  
                               Margin="10"  
                               Padding="0"  
                               BackgroundColor="#ff0080"  
                               CornerRadius="10"  
                               HasShadow="True"  
                               OutlineColor="Silver">  
                               <Grid>  
                                   <Image  
                                       Aspect="AspectFit"  
                                       HeightRequest="100"  
                                       Source="favourite.png"  
                                       VerticalOptions="CenterAndExpand" />  
                               </Grid>  
                           </Frame>  
                       </xfFlipViewControl:XFFlipView.BackView>  
         
                   </xfFlipViewControl:XFFlipView>  
         
                   <xfFlipViewControl:XFFlipView  
                       x:Name="XFFlipViewControl3"  
                       Grid.Row="0"  
                       Grid.RowSpan="2"  
                       Grid.Column="1">  
         
                       <xfFlipViewControl:XFFlipView.FrontView>  
                           <Frame  
                               Margin="10"  
                               Padding="0"  
                               BackgroundColor="#0080ff"  
                               CornerRadius="10"  
                               HasShadow="True"  
                               OutlineColor="Silver">  
                               <Grid>  
                                   <Image  
                                       Aspect="AspectFit"  
                                       HeightRequest="100"  
                                       Source="icon.png"  
                                       VerticalOptions="CenterAndExpand" />  
                               </Grid>  
                           </Frame>  
                       </xfFlipViewControl:XFFlipView.FrontView>  
                       <xfFlipViewControl:XFFlipView.BackView>  
                           <Frame  
                               Margin="10"  
                               Padding="0"  
                               BackgroundColor="#ff0080"  
                               CornerRadius="10"  
                               HasShadow="True"  
                               OutlineColor="Silver">  
                               <Grid>  
                                   <Image  
                                       Aspect="AspectFit"  
                                       HeightRequest="100"  
                                       Source="favourite.png"  
                                       VerticalOptions="CenterAndExpand" />  
                               </Grid>  
                           </Frame>  
                       </xfFlipViewControl:XFFlipView.BackView>  
         
                   </xfFlipViewControl:XFFlipView>  
         
                   <xfFlipViewControl:XFFlipView  
                       x:Name="XFFlipViewControl4"  
                       Grid.Row="2"  
                       Grid.Column="0"  
                       Grid.ColumnSpan="2">  
         
                       <xfFlipViewControl:XFFlipView.FrontView>  
                           <Frame  
                               Margin="10"  
                               Padding="0"  
                               BackgroundColor="#0080ff"  
                               CornerRadius="10"  
                               HasShadow="True"  
                               OutlineColor="Silver">  
                               <Grid>  
                                   <Image  
                                       Aspect="AspectFit"  
                                       HeightRequest="100"  
                                       Source="icon.png"  
                                       VerticalOptions="CenterAndExpand" />  
                               </Grid>  
                           </Frame>  
                       </xfFlipViewControl:XFFlipView.FrontView>  
                       <xfFlipViewControl:XFFlipView.BackView>  
                           <Frame  
                               Margin="10"  
                               Padding="0"  
                               BackgroundColor="#ff0080"  
                               CornerRadius="10"  
                               HasShadow="True"  
                               OutlineColor="Silver">  
                               <Grid>  
                                   <Image  
                                       Aspect="AspectFit"  
                                       HeightRequest="100"  
                                       Source="favourite.png"  
                                       VerticalOptions="CenterAndExpand" />  
                               </Grid>  
                           </Frame>  
                       </xfFlipViewControl:XFFlipView.BackView>  
         
                   </xfFlipViewControl:XFFlipView>  
         
                   <Button  
                       Grid.Row="3"  
                       Grid.Column="0"  
                       Grid.ColumnSpan="2"  
                       Clicked="FlippedButton_OnClicked"  
                       Text="Flip em!" />  
         
                   <Grid.ColumnDefinitions>  
                       <ColumnDefinition Width="0.5*" />  
                       <ColumnDefinition Width="0.5*" />  
                   </Grid.ColumnDefinitions>  
                   <Grid.RowDefinitions>  
                       <RowDefinition Height="0.3*" />  
                       <RowDefinition Height="0.3*" />  
                       <RowDefinition Height="0.3*" />  
                       <RowDefinition Height="0.1*" />  
                   </Grid.RowDefinitions>  
               </Grid>  
           </ContentPage.Content>  
       </ContentPage>  
    

    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.