question

EduardoGomez-1870 avatar image
0 Votes"
EduardoGomez-1870 asked LeonLu-MSFT edited

flipping card


<ContentPage.ToolbarItems>
        <ToolbarItem
            Command="{Binding CloseCommand}"
            IconImageSource="close.png"
            Order="Primary"
            Priority="0" />
    </ContentPage.ToolbarItems>

    <Grid
        Padding="10"
        RowDefinitions="30,50,*"
        RowSpacing="10">

        <Label
            FontSize="Large"
            HorizontalOptions="Center"
            Text="{i18N:Translate NumberCards}"
            TextColor="White" />

        <Label
            Grid.Row="1"
            FontSize="40"
            HorizontalOptions="Center"
            Text="10"
            TextColor="White"
            VerticalTextAlignment="Center" />

        <!--  Selection  -->

        <controls:FlipView
            x:Name="FlipView"
            HeightRequest="400"
            IsFlipped="{x:Binding IsFlipped}">

            <controls:FlipView.FrontView>

                <Frame
                    Grid.Row="2"
                    Margin="30,10,30,30"
                    Padding="0"
                    BorderColor="Yellow"
                    CornerRadius="30"
                    HasShadow="False"
                    IsClippedToBounds="True">

                    <!--  Select truth or dare  -->

                    <StackLayout Padding="20" IsVisible="false">

                        <ffimageloadingsvg:SvgCachedImage
                            xct:TouchEffect.Command="{x:Binding FlipCommand}"
                            xct:TouchEffect.CommandParameter="0"
                            ErrorPlaceholder="wefeel.svg"
                            HeightRequest="100"
                            HorizontalOptions="Center"
                            LoadingPlaceholder="wefeel.svg"
                            Source="TruthOrDare_Truth.svg"
                            WidthRequest="100" />

                        <Label
                            HorizontalTextAlignment="Center"
                            Style="{x:StaticResource TitleHeadingText}"
                            Text="{i18N:Translate Truth}" />

                        <ffimageloadingsvg:SvgCachedImage
                            xct:TouchEffect.Command="{x:Binding FlipCommand}"
                            xct:TouchEffect.CommandParameter="1"
                            ErrorPlaceholder="wefeel.svg"
                            HeightRequest="100"
                            HorizontalOptions="Center"
                            LoadingPlaceholder="wefeel.svg"
                            Source="TruthOrDare_Dare.svg"
                            VerticalOptions="EndAndExpand"
                            WidthRequest="100" />

                        <Label
                            HorizontalTextAlignment="Center"
                            Style="{x:StaticResource TitleHeadingText}"
                            Text="{i18N:Translate Dare}" />

                    </StackLayout>
                </Frame>

            </controls:FlipView.FrontView>

            <controls:FlipView.BackView />

            <!--  Dare  -->
            <StackLayout
                Grid.Row="2"
                Padding="40"
                IsVisible="{x:Binding IsDare}">

                <Label
                    HorizontalTextAlignment="Center"
                    Style="{x:StaticResource TitleHeadingText}"
                    Text="{i18N:Translate Dare}" />

                <Label
                    HorizontalTextAlignment="Center"
                    LineBreakMode="WordWrap"
                    Style="{x:StaticResource SubtitleText}"
                    Text="Comele la boca a tu pareja, delante de un grupo de amigo o familia" />

                <StackLayout
                    x:Name="OptionsStack"
                    BindableLayout.ItemsSource="{x:Binding UserActivity.Activity.Options}"
                    HorizontalOptions="Center"
                    Orientation="Vertical"
                    VerticalOptions="Center">

                    <BindableLayout.ItemTemplate>
                        <DataTemplate x:DataType="activity:OptionsModel">
                            <Frame
                                Margin="0,20,0,0"
                                Padding="0"
                                CornerRadius="30"
                                IsClippedToBounds="True">
                                <Grid>
                                    <Label
                                        Padding="10"
                                        BackgroundColor="{x:StaticResource Primary}"
                                        Style="{StaticResource TitleText}"
                                        Text="{x:Binding OptionText}"
                                        TextColor="{StaticResource WhiteText}"
                                        VerticalTextAlignment="Center" />
                                    <ffimageloadingsvg:SvgCachedImage HorizontalOptions="EndAndExpand" Source="{x:Binding Image}" />

                                </Grid>

                            </Frame>
                        </DataTemplate>
                    </BindableLayout.ItemTemplate>
                </StackLayout>

            </StackLayout>
        </controls:FlipView>

        <!--  Truth  -->

        <StackLayout
            Grid.Row="2"
            Padding="40"
            IsVisible="{x:Binding IsTruth}"
            Spacing="10">
            <Label
                HorizontalTextAlignment="Center"
                Style="{x:StaticResource TitleHeadingText}"
                Text="Verdad" />

            <Label
                HorizontalTextAlignment="Center"
                Style="{x:StaticResource SubtitleText}"
                Text="¿Cuántos perros calientes te caben en la boca?" />

            <Frame
                Padding="0"
                BackgroundColor="{x:StaticResource PrimaryLight}"
                CornerRadius="25"
                HeightRequest="150"
                IsClippedToBounds="True"
                VerticalOptions="CenterAndExpand"
                WidthRequest="200">

                <renderers:CustomEditor
                    x:Name="TruthEditor"
                    AutoSize="TextChanges"
                    HorizontalOptions="CenterAndExpand"
                    Keyboard="Chat"
                    Placeholder="{i18N:Translate EnterYourAnswer}"
                    Style="{x:StaticResource EditorEditorRadius}" />
            </Frame>

            <Button
                Command="{x:Binding SendCommand}"
                CommandParameter="{x:Binding Source={x:Reference TruthEditor},
                                             Path=Text}"
                IsEnabled="{x:Binding EnableButton}"
                Style="{x:StaticResource ButtonCornerBase}"
                Text="{i18N:Translate Send}" />

        </StackLayout>

    </Grid>


but it doesn't show the card

dotnet-xamarin
tod.png (29.6 KiB)
truth.png (33.8 KiB)
dare.png (45.8 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT edited

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 <FlipView.BackView>, then use IsVisible to control it like following xaml.

<?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:app125="clr-namespace:App129"
             x:Class="App129.MainPage">

    <StackLayout>
        <StackLayout BackgroundColor="Blue">
            <StackLayout HorizontalOptions="FillAndExpand" HeightRequest="200">
                <Label Text="Number of cards" IsVisible="{Binding IsShowText}" TextColor="White" FontSize="Large" HorizontalOptions="Center"/>
                <Label Text="40" IsVisible="{Binding IsShowText}"  FontSize="Header" TextColor="White" HorizontalOptions="Center"/>
            </StackLayout>

            <app125:FlipView  x:Name="FlipView1" HeightRequest="400" HorizontalOptions="Center"  IsFlipped="{Binding IsViewFlipped}" >
                <app125:FlipView.FrontView >
                    <Frame
                        HeightRequest="400"
                        Margin="10"
                         Padding="10,0,10,10"
                        BackgroundColor="White"
                        CornerRadius="10"
                        HasShadow="True">
                        <StackLayout VerticalOptions="Center">
                            <ImageButton 
                                Command="{Binding TruthCommand}"
                                
                                HorizontalOptions="Center"
                                Source="Truth.png"/>
                            <Label
                            
                                 FontAttributes="Bold"
                                 FontSize="Large"
                                 HorizontalTextAlignment="Center"
                                 Text="Truth"
                                 TextColor="Blue"
                                 VerticalTextAlignment="Center" />
                            <ImageButton 
                                Command="{Binding DareCommand}"
                                
                                 HorizontalOptions="Center"
                                Source="dare.png"/>
                            <Label
                            
                                 FontAttributes="Bold"
                                 FontSize="Large"
                                 HorizontalTextAlignment="Center"
                                 Text="Dare"
                                 TextColor="Blue"
                                 VerticalTextAlignment="Center" />
                        </StackLayout>


                    </Frame>
                </app125:FlipView.FrontView>
                <app125:FlipView.BackView>
                    <Frame
                         HeightRequest="400"
                        
                        Margin="10"
                        Padding="10,0,10,10"
                        BackgroundColor="White"
                        CornerRadius="10"
                        HasShadow="True">
                        <StackLayout   x:Name="mysl">
                            <Label IsVisible="{Binding IsTruthShow}" Text="Verdad" FontSize="50" TextColor="Blue" HorizontalOptions="Center"/>
                            <Label IsVisible="{Binding IsTruthShow}" Text="this is verdad text" FontSize="20" TextColor="Blue" HorizontalOptions="Center"/>

                            <Editor IsVisible="{Binding IsTruthShow}" Placeholder="Entry your answer" PlaceholderColor="Olive" HeightRequest="200" HorizontalOptions="FillAndExpand" />
                            <Button IsVisible="{Binding IsTruthShow}" Command="{Binding BackCommand}" Text="send" CornerRadius="30" BackgroundColor="Purple"></Button>


                            <Label IsVisible="{Binding IsDareShow}" Text="Dare" FontSize="50" TextColor="Blue" HorizontalOptions="Center"/>
                            <Label IsVisible="{Binding IsDareShow}" Text="this is dare text" FontSize="20" TextColor="Blue" HorizontalOptions="Center"/>
                            <Button IsVisible="{Binding IsDareShow}"  Command="{Binding BackCommand}"  Text="Alla voy" CornerRadius="30" BackgroundColor="Purple" ></Button>
                            <Button IsVisible="{Binding IsDareShow}" Text="Mas tarde" CornerRadius="30" BackgroundColor="Purple" ></Button>

                            <Button IsVisible="{Binding IsDareShow}" Text="Ni de cona" CornerRadius="30" BackgroundColor="Purple" ></Button>

                        </StackLayout>


                    </Frame>
                </app125:FlipView.BackView>


            </app125:FlipView>


        </StackLayout>
    </StackLayout>

</ContentPage>


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

<ffimageloading:CachedImage.GestureRecognizers>
    <TapGestureRecognizer Command="{Binding ViewImageCommand}" />
</ffimageloading:CachedImage.GestureRecognizers>


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.



5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

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

128936-image.png

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

128981-image.png

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

128839-image.png


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)
                    );
            }
        }

        /// <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(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;
            }
        }

        /// <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(FlipView),
            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)
            {
                ((FlipView)bindable).FlipFromFrontToBack();
            }
            else
            {
                ((FlipView)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.RotationY = 360;

            await this.RotateYTo(270, 500, Easing.Linear);

            return true;
        }

        private async Task<bool> 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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:app125="clr-namespace:App125"
             x:Class="App125.Page1">
    <ContentPage.Content>
        <StackLayout BackgroundColor="Blue">
            <StackLayout HorizontalOptions="FillAndExpand" HeightRequest="200">
                <Label Text="Number of cards" x:Name="mylabel1" TextColor="White" FontSize="Large" HorizontalOptions="Center"/>
                <Label Text="40"  x:Name="mylabel2" FontSize="Header" TextColor="White" HorizontalOptions="Center"/>
            </StackLayout>
           
            <app125:FlipView  x:Name="FlipView1" HeightRequest="400" HorizontalOptions="Center"  IsFlipped="{Binding IsViewFlipped}" >
                <app125:FlipView.FrontView >
                    <Frame
                        HeightRequest="400"
                        Margin="10"
                         Padding="10,0,10,10"
                        BackgroundColor="White"
                        CornerRadius="10"
                        HasShadow="True">
                        <StackLayout VerticalOptions="Center">
                            <ImageButton 
                                Clicked="ImageButton_Clicked"
                                HorizontalOptions="Center"
                                Source="Truth.png"/>
                            <Label
                            
                                 FontAttributes="Bold"
                                 FontSize="Large"
                                 HorizontalTextAlignment="Center"
                                 Text="Truth"
                                 TextColor="Blue"
                                 VerticalTextAlignment="Center" />
                            <ImageButton 
                                Clicked="ImageButton_Clicked_1"
                                 HorizontalOptions="Center"
                                Source="dare.png"/>
                            <Label
                            
                                 FontAttributes="Bold"
                                 FontSize="Large"
                                 HorizontalTextAlignment="Center"
                                 Text="Dare"
                                 TextColor="Blue"
                                 VerticalTextAlignment="Center" />
                        </StackLayout>
                           
                       
                    </Frame>
                </app125:FlipView.FrontView>
                <app125:FlipView.BackView>
                    <Frame
                         HeightRequest="400"
                        
                        Margin="10"
                        Padding="10,0,10,10"
                        BackgroundColor="White"
                        CornerRadius="10"
                        HasShadow="True">
                        <StackLayout   x:Name="mysl">
                           
                        </StackLayout>


                    </Frame>
                </app125:FlipView.BackView>
                
                
            </app125:FlipView>

            
        </StackLayout>
    </ContentPage.Content>
</ContentPage>


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.



image.png (33.4 KiB)
image.png (19.5 KiB)
image.png (22.9 KiB)
· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

you forgot to upload the demo hahahazha

0 Votes 0 ·

By the way how can I make the view in the VM

0 Votes 0 ·

I forgot to mention that I am using MVVM

0 Votes 0 ·
Show more comments