In this post, I have created an example of animation with triggers, This time, we are talking about triggers.

Xamarin.Forms have a powerful class named Trigger. I want to show you stack layout flipping with animation which I have created with Trigger.

First, let us create a folder named Triggers. Then, create a class with the name SwitchLayout.

Then, write the following code in that.

  1. public class SwitchLayout : TriggerAction<Button>
  2. {
  3. public enum AnimationDirection
  4. { Left, Right }
  6. protected override async void Invoke(Button sender)
  7. {
  8. View Viewhide = null;
  9. View Viewshow = null;
  10. if (TargetElement != null)
  11. {
  12. // This is For Finding TargetView
  13. Viewshow = ((View)sender.Parent.Parent).FindByName<View>(TargetElement);
  14. if (Viewshow != null)
  15. {
  16. // This is For Finding SourceView
  17. if (SourceElement != null)
  18. {
  19. Viewhide = ((View)sender.Parent.Parent).FindByName<View>(SourceElement);
  20. if (Viewhide != null)
  21. {
  22. await PerformAnimation(Viewhide, Viewshow);
  23. }
  24. }
  25. }
  26. }
  27. }
  28. public string SourceElement { get; set; }
  29. public string TargetElement { get; set; }
  30. public AnimationDirection Direction { get; set; }
  32. private async Task PerformAnimation(View ViewElementHide, View ViewElementShow)
  33. {
  34. int hideStart = 0;
  35. int hideStop = 0;//if you want to use another rotate animation So you Comment Out and remove 0//(Direction == AnimationDirection.Left ? -90 : 90);
  36. int showStart = 0;//if you want to use another rotate animation So you Comment Out and remove 0//(Direction == AnimationDirection.Left ? 90 : 270);
  37. int showStop = 0;//if you want to use another rotate animation So you Comment Out and remove 0//(Direction == AnimationDirection.Left ? 0 : 360);
  38. await ViewElementHide.RotateYTo(hideStart, 0);
  39. await ViewElementShow.RotateYTo(showStart, 0);
  40. await ViewElementShow.ScaleTo(0.2, 0);
  41. ViewElementShow.IsVisible = true; // This is rotated at 90 or 270 degrees
  42. // Animate
  43. ViewElementHide.FadeTo(0.5, 100, Easing.SinOut);
  44. ViewElementHide.ScaleTo(0.2, 100, Easing.Linear);
  45. await ViewElementHide.RotateYTo(hideStop, 150, Easing.Linear);
  46. ViewElementShow.FadeTo(1, 100, Easing.SinIn);
  47. ViewElementShow.ScaleTo(1, 150, Easing.Linear);
  48. await ViewElementShow.RotateYTo(showStop, 150, Easing.Linear);
  50. ViewElementHide.IsVisible = false;
  51. }
  52. }

Here is the XAML code.

You need to add the reference like this.

xmlns:triggers="clr-namespace:FlipAnimation.Triggers"

  1. <ContentPage.Content>
  2. <Grid>
  3. <Grid.RowDefinitions>
  4. <RowDefinition Height="*" />
  5. </Grid.RowDefinitions>
  6. <Grid.ColumnDefinitions>
  7. <ColumnDefinition Width="*" />
  8. </Grid.ColumnDefinitions>
  9. <Image Opacity="1"
  10. Source="icon.png"
  11. Aspect="AspectFill"/>
  12. <Grid>
  13. <Grid.Padding>
  14. <OnPlatform x:TypeArguments="Thickness">
  15. <OnPlatform.iOS>
  16. 0, 20, 0, 0
  17. </OnPlatform.iOS>
  18. <OnPlatform.Android>
  19. 0, 0, 0, 0
  20. </OnPlatform.Android>
  21. </OnPlatform>
  22. </Grid.Padding>
  23. <Grid.RowDefinitions>
  24. <RowDefinition Height="Auto" />
  25. <RowDefinition Height="Auto" />
  26. <RowDefinition Height="*" />
  27. </Grid.RowDefinitions>
  28. <StackLayout Grid.Row="0">
  29. <Label Text="Login"
  30. TextColor="White"
  31. HorizontalTextAlignment="Center" />
  32. </StackLayout>
  33. <StackLayout Grid.Row="1">
  34. <!--If you want to use Loader and Error Message so you can comment out this-->
  35. <!--<ActivityIndicator x:Name="actInd" IsRunning="False" IsVisible="False" Color="Blue" />
  36. <Label x:Name="lblBusyMsg" IsVisible="False" Text="My Message" >
  37. <Label.Font>
  38. <OnPlatform x:TypeArguments="Font">
  39. <OnPlatform.iOS>Small</OnPlatform.iOS>
  40. </OnPlatform>
  41. </Label.Font>
  42. </Label>
  43. <Label x:Name="labelErrorMessage" IsVisible="False" Text="MY Message" TextColor="Red">
  44. <Label.Font>
  45. <OnPlatform x:TypeArguments="Font">
  46. <OnPlatform.iOS>Small</OnPlatform.iOS>
  47. </OnPlatform>
  48. </Label.Font>
  49. </Label>-->
  50. </StackLayout>
  51. <StackLayout x:Name="stLog"
  52. Grid.Row="1" Grid.Column="0"
  53. IsVisible="True"
  54. Padding="20,20,20,20"
  55. >
  56. <Entry Placeholder="Email" Text="" />
  57. <Entry Placeholder="Password" Text=""
  58. IsPassword="True" />
  60. <Button Text="Login" Clicked="Login_Clicked" />
  61. <Button Text="Register" >
  62. <Button.Triggers>
  63. <EventTrigger Event="Clicked">
  64. <triggers:SwitchLayout SourceElement="stLog" TargetElement="stReg" Direction="Right" />
  65. </EventTrigger>
  66. </Button.Triggers>
  67. </Button>
  68. <Button Text="Forgot Password">
  69. <Button.Triggers>
  70. <EventTrigger Event="Clicked">
  71. <triggers:SwitchLayout SourceElement="stLog" TargetElement="stForgotPass" Direction="Right" />
  72. </EventTrigger>
  73. </Button.Triggers>
  74. </Button>
  75. <Button Text="Change Password">
  76. <Button.Triggers>
  77. <EventTrigger Event="Clicked">
  78. <triggers:SwitchLayout SourceElement="stLog" TargetElement="stChangePass" Direction="Right" />
  79. </EventTrigger>
  80. </Button.Triggers>
  81. </Button>
  82. </StackLayout>
  83. <StackLayout x:Name="stReg" Grid.Row="1" Grid.Column="0" IsVisible="False" Padding="20" >
  84. <Entry Placeholder="Email" Text="" />
  85. <Entry Placeholder="First name" Text="" />
  86. <Entry Placeholder="Last name" Text="" />
  87. <Button Text="Register" Clicked="Register_Clicked" />
  88. <Button Text="Cancel">
  89. <Button.Triggers>
  90. <EventTrigger Event="Clicked">
  91. <triggers:SwitchLayout SourceElement="stReg" TargetElement="stLog" Direction="Left" />
  92. </EventTrigger>
  93. </Button.Triggers>
  94. </Button>
  95. </StackLayout>
  96. <StackLayout x:Name="stForgotPass" Grid.Row="1" Grid.Column="0" IsVisible="False" Padding="20" >
  97. <Entry Placeholder="Email"
  98. Text="" />
  99. <Button Text="Send email" Clicked="ForgetPass_Clicked"/>
  100. <Button Text="Cancel">
  101. <Button.Triggers>
  102. <EventTrigger Event="Clicked">
  103. <triggers:SwitchLayout SourceElement="stForgotPass" TargetElement="stLog" Direction="Left" />
  104. </EventTrigger>
  105. </Button.Triggers>
  106. </Button>
  107. </StackLayout>
  108. <StackLayout x:Name="stChangePass" Grid.Row="1" Grid.Column="0" IsVisible="False" Padding="20" >
  109. <Entry Placeholder="Old password"
  110. IsPassword="True" />
  111. <Entry Placeholder="New password" IsPassword="True" />
  112. <Entry Placeholder="Confirm password" IsPassword="True" />
  113. <Button Text="OK" Clicked="ChangePass_Clicked"/>
  114. <Button Text="Cancel">
  115. <Button.Triggers>
  116. <EventTrigger Event="Clicked">
  117. <triggers:SwitchLayout SourceElement="stChangePass" TargetElement="stLog" Direction="Left" />
  118. </EventTrigger>
  119. </Button.Triggers>
  120. </Button>
  121. </StackLayout>
  122. </Grid>
  123. </Grid>
  124. </ContentPage.Content>

If you want to watch this demo video, click here.

For complete source code, click here