flipping card

Question

but it doesn't show the card

Accepted Answer

Hello,

Welcome to our Microsoft Q&A platform!

By the way how can I make the view in the VM ,I forgot to mention that I am using MVVM

If you use MVVM. We should put the controls from Dare page and Truth page to the , then use IsVisible to control it like following xaml.

Here is layout's background code.

   public MainPage()  
           {  
               InitializeComponent();  
               this.BindingContext = new MyViewModel();  
           }

Here is my ViewMode.

   public class MyViewModel : INotifyPropertyChanged  
       {  
           private bool _isViewFlippedg = false;  
           public bool IsViewFlipped  
           {  
               get { return _isViewFlippedg; }  
               set  
               {  
                   _isViewFlippedg = value;  
     
                   IsShowText =! _isViewFlippedg;  
     
                   OnPropertyChanged(nameof(IsViewFlipped));  
               }  
           }  
     
     
           private bool _isShowText = true;  
           public bool IsShowText  
           {  
               get { return _isShowText; }  
               set  
               {  
                   _isShowText = value;  
                   OnPropertyChanged(nameof(IsShowText));  
               }  
           }  
     
     
     
           private bool _isDareShow = false;  
           public bool IsDareShow  
           {  
               get { return _isDareShow; }  
               set  
               {  
                   _isDareShow = value;  
                   OnPropertyChanged(nameof(IsDareShow));  
               }  
           }  
           private bool _isTruthShow = false;  
           public bool IsTruthShow  
           {  
               get { return _isTruthShow; }  
               set  
               {  
                   _isTruthShow = value;  
                   OnPropertyChanged(nameof(IsTruthShow));  
               }  
           }  
     
           public ICommand TruthCommand { protected set; get; }  
     
           public ICommand DareCommand { protected set; get; }  
     
           public ICommand BackCommand { protected set; get; }  
     
           public MyViewModel(){  
     
               TruthCommand = new Command(() =>  
               {  
                   IsViewFlipped = !IsViewFlipped;  
                   IsDareShow = false;  
                   IsTruthShow = true;  
                    
     
               });  
     
               DareCommand = new Command(() =>  
               {  
                   IsViewFlipped = !IsViewFlipped;  
                   IsTruthShow = false;  
                   IsDareShow = true;  
     
               });  
     
               BackCommand = new Command(() =>  
               {  
                   IsViewFlipped = !IsViewFlipped;  
                    
               });  
           }  
     
     
           public event PropertyChangedEventHandler PropertyChanged;  
     
           protected virtual void OnPropertyChanged(string propertyName)  
           {  
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  
           }  
     
     
       }

I notifice you use FFimageLoad, it achieve click command by GestureRecognizers like following xaml. I

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.

Answer

Hello,

Welcome to our Microsoft Q&A platform!

I write a simiple demo about your flipping card. Here is running screenshot.

Click the Truth icon, show the following view. When you click the send button, will flip back to previous page.

Click the dare icon, show the following view. When you click the first button, will flip back to previous page.

First of all, we write a contentView to achieve the flipping card result. add the actual animation implementation for contentView.

   using System;  
   using System.Collections.Generic;  
   using System.Linq;  
   using System.Text;  
   using System.Threading.Tasks;  
   using Xamarin.Forms;  
     
   namespace App125  
   {  
       public class FlipView : ContentView  
       {  
           private readonly RelativeLayout _contentHolder;  
     
           public FlipView()  
           {  
               _contentHolder = new RelativeLayout();  
               Content = _contentHolder;  
           }  
     
           public static readonly BindableProperty FrontViewProperty =  
           BindableProperty.Create(  
               nameof(FrontView),  
               typeof(View),  
               typeof(FlipView),  
               null,  
               BindingMode.Default,  
               null,  
               FrontViewPropertyChanged);  
     
           private static void FrontViewPropertyChanged(BindableObject bindable, object oldValue, object newValue)  
           {  
               if (newValue != null)  
               {  
                   ((FlipView)bindable)  
                       ._contentHolder  
                       .Children  
                       .Add(((FlipView)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(FlipView),  
               null,  
               BindingMode.Default,  
               null,  
               BackViewPropertyChanged);  
     
           private static void BackViewPropertyChanged(BindableObject bindable, object oldvalue, object newvalue)  
           {  
               //Set BackView Rotation before rotating  
               if (newvalue != null)  
               {  
                   ((FlipView)bindable)  
                       ._contentHolder  
                       .Children  
                       .Add(((FlipView)bindable).BackView,  
                           Constraint.Constant(0),  
                           Constraint.Constant(0),  
                           Constraint.RelativeToParent((parent) => parent.Width),  
                           Constraint.RelativeToParent((parent) => parent.Height)  
                        );  
     
                   ((FlipView)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(FlipView),  
               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)  
               {  
                   ((FlipView)bindable).FlipFromFrontToBack();  
               }  
               else  
               {  
                   ((FlipView)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.RotationY = 360;  
     
               await this.RotateYTo(270, 500, Easing.Linear);  
     
               return true;  
           }  
     
           private async Task BackToFrontRotate()  
           {  
               ViewExtensions.CancelAnimations(this);  
     
               this.RotationY = 90;  
     
               await this.RotateYTo(0, 500, Easing.Linear);  
     
               return true;  
           }  
     
           #endregion  
       }  
     
   }

Then use it in my layout. Truth.png and dare.png is part screenshot from your question's screenshot

Here is my layout's background code. Based on the different imageview's click event to add different view to the FlipView.BackView.

   using System;  
   using System.Collections.Generic;  
   using System.Linq;  
   using System.Text;  
   using System.Threading.Tasks;  
     
   using Xamarin.Forms;  
   using Xamarin.Forms.Xaml;  
     
   namespace App125  
   {  
       [XamlCompilation(XamlCompilationOptions.Compile)]  
       public partial class Page1 : ContentPage  
       {  
           private bool _isViewFlippedg = false;  
           public bool IsViewFlipped  
           {  
               get { return _isViewFlippedg; }  
               set  
               {  
                   _isViewFlippedg = value;  
                   OnPropertyChanged(nameof(IsViewFlipped));  
               }  
           }  
           public Page1()  
           {  
               InitializeComponent();  
     
               BindingContext = this;  
           }  
     
            
           private void ImageButton_Clicked(object sender, EventArgs e)  
           {  
     
                 
               mysl.Children.Clear();  
               IsViewFlipped = true;  
               mylabel1.IsVisible = !IsViewFlipped;  
               mylabel2.IsVisible = !IsViewFlipped;  
               Label label = new Label();  
               label.Text = "Verdad";  
               label.FontSize = 50;  
               label.TextColor = Color.Blue;  
               label.HorizontalOptions = LayoutOptions.Center;  
     
               Label label2 = new Label();  
               label.Text = "this is a test";  
               label.FontSize = 20;  
               label.TextColor = Color.Blue;  
               label.HorizontalOptions = LayoutOptions.Center;  
     
     
               var editor = new Editor { Placeholder = "Enter your answer", PlaceholderColor = Color.Olive };  
               editor.HeightRequest = 200;  
               editor.HorizontalOptions = LayoutOptions.FillAndExpand;  
     
               Button button = new Button { Text="send", CornerRadius=30, BackgroundColor=Color.Purple };  
               mysl.Children.Add(label);  
               mysl.Children.Add(label2);  
     
               mysl.Children.Add(editor);  
               mysl.Children.Add(button);  
     
               button.Clicked += Button_Clicked;  
     
           }  
     
             
     
           private void ImageButton_Clicked_1(object sender, EventArgs e)  
           {  
                
               mysl.Children.Clear();  
               IsViewFlipped = true;  
               mylabel1.IsVisible = !IsViewFlipped;  
               mylabel2.IsVisible = !IsViewFlipped;  
     
               Label label = new Label();  
               label.Text = "Dare";  
               label.FontSize = 50;  
               label.TextColor = Color.Blue;  
               label.HorizontalOptions = LayoutOptions.Center;  
     
               Label label2 = new Label();  
               label.Text = "this is a test";  
               label.FontSize = 20;  
               label.TextColor = Color.Blue;  
               label.HorizontalOptions = LayoutOptions.Center;  
     
     
               Button button1 = new Button { Text = "Alla voy", CornerRadius = 30, BackgroundColor = Color.Purple };  
               Button button2 = new Button { Text = "Mas tarde", CornerRadius = 30, BackgroundColor = Color.Purple };  
               Button button3 = new Button { Text = "Ni de cona", CornerRadius = 30, BackgroundColor = Color.Purple };  
     
               mysl.Children.Add(label);  
               mysl.Children.Add(label2);  
     
               mysl.Children.Add(button1);  
               mysl.Children.Add(button2);  
               mysl.Children.Add(button3);  
     
     
               button1.Clicked += Button_Clicked;  
           }  
     
           private void Button_Clicked(object sender, EventArgs e)  
           {  
               IsViewFlipped = false;  
               mylabel1.IsVisible = !IsViewFlipped;  
               mylabel2.IsVisible = !IsViewFlipped;  
           }  
       }  
   }

Other details you can adjust it by yourself.

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.

Share via

flipping card

1 additional answer

Your answer