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.
if anyone have example code please share it.
Thanks
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.
if anyone have example code please share it.
Thanks
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.
@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
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/
@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
7 people are following this question.