question

SmartMan-0143 avatar image
0 Votes"
SmartMan-0143 asked ·

Flip effect in xamarin forms?

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

dotnet-xamarinformsdotnet-xamarinforms-xaml
10 |1000 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.

1 Answer

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

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.



· 4 ·
10 |1000 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 Thanks for your reply.

This example is to display static item. How to display dynamic list item with flip effect.

In dynamic list item we will not be having front view and back view right.


Thanks

0 Votes 0 ·

xamarinforms do not have this plugin like FlipView in native android

https://github.com/openaphid/android-flip

You can use binding library to integrate this FlipLibrary for Xamarin.Android.

https://docs.microsoft.com/en-us/xamarin/android/platform/binding-java-library/

1 Vote 1 ·

@LeonLu-MSFT Actually i want this functionality for both android and IOS .If could able to achieve this from xamarin forms it would be great.Bu based on your last rply it will not be possible and we have to write separate code for both android and IOS...Don't we have any other way

0 Votes 0 ·
Show more comments