Merge pull request #1 from shawyunz/PolishAnimation

Replace Triggers with delegate and event for smooth animation.
tuyen-vuduc · Dec 16, 2022 · dad1333 · dad1333
2 parents 7a8846e + cfe95d9
commit dad1333
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 21 deletions.
diff --git a/src/TodoApp.Android/Resources/Resource.designer.cs b/src/TodoApp.Android/Resources/Resource.designer.cs
diff --git a/src/TodoApp/Features/Todos/Pages/TodosPage.xaml b/src/TodoApp/Features/Todos/Pages/TodosPage.xaml
@@ -11,7 +11,7 @@
     Shell.NavBarHasShadow="False"
     Shell.NavBarIsVisible="False"
     ios:Page.UseSafeArea="True"
-    BackgroundColor="{x:Static app:Colors.Bg}"
+    BackgroundColor="{x:Static app:Colors.Primary}"
     BindingContext="{app:BindingContext {x:Type app:TodosPageViewModel}}">
     <ContentPage.ToolbarItems>
         <ToolbarItem
@@ -29,7 +29,7 @@
                 Glyph={x:Static app:Mdi.Bell}
             }" />
     </ContentPage.ToolbarItems>
-    <ContentPage.Triggers>
+    <!--<ContentPage.Triggers>
         <DataTrigger
             Binding="{Binding SidebarMenuVisible}"
             Value="True"
@@ -38,16 +38,19 @@
                 Property="BackgroundColor"
                 Value="{x:Static app:Colors.Primary}" />
         </DataTrigger>
-    </ContentPage.Triggers>
+    </ContentPage.Triggers>-->
 
     <Grid
         x:Name="grid">
-        <app:SideBarMenuView />
+        <app:SideBarMenuView 
+            x:Name="SideBarView" 
+            TranslationX="-300"/>
 
         <app:TodosMainContentView
+            x:Name="TodoContentView"
             BindingContext="{Binding BindingContext, Source={x:Reference root}}"
             >
-            <app:TodosMainContentView.Triggers>
+            <!--<app:TodosMainContentView.Triggers>
                 <DataTrigger
                     Binding="{Binding SidebarMenuVisible}"
                     Value="True"
@@ -87,7 +90,7 @@
                         Property="TranslationX"
                         Value="0" />
                 </DataTrigger>
-            </app:TodosMainContentView.Triggers>
+            </app:TodosMainContentView.Triggers>-->
         </app:TodosMainContentView>
     </Grid>
 </app:BasePage>
diff --git a/src/TodoApp/Features/Todos/Pages/TodosPage.xaml.cs b/src/TodoApp/Features/Todos/Pages/TodosPage.xaml.cs
@@ -8,5 +8,33 @@ public TodosPage()
         {
             InitializeComponent();
         }
+
+        protected override void OnAppearing()
+        {
+            base.OnAppearing();
+
+            TodoContentView.OnMenuClicked += Menu_ClickedEvent;
+            SideBarView.OnBackClicked += Back_ClickedEvent;
+        }
+
+        protected override void OnDisappearing()
+        {
+            TodoContentView.OnMenuClicked -= Menu_ClickedEvent;
+            SideBarView.OnBackClicked -= Back_ClickedEvent;
+        }
+
+        private void Back_ClickedEvent()
+        {
+            TodoContentView.TranslateTo(0, 0, 500, Easing.CubicOut);
+            TodoContentView.ScaleTo(1, 500, Easing.CubicOut);
+            SideBarView.TranslateTo(-App.Current.MainPage.Width * 0.8, 0, 500, Easing.CubicOut);
+        }
+
+        private void Menu_ClickedEvent()
+        {
+            TodoContentView.TranslateTo(App.Current.MainPage.Width * 0.8, 0, 500, Easing.CubicIn);
+            TodoContentView.ScaleTo(0.85, 500, Easing.CubicIn);
+            SideBarView.TranslateTo(0, 0, 500, Easing.CubicIn);
+        }
     }
 }
diff --git a/src/TodoApp/Features/Todos/Pages/TodosPageViewModel.cs b/src/TodoApp/Features/Todos/Pages/TodosPageViewModel.cs
@@ -159,12 +159,5 @@ async void ExecuteDeleteCommand(TodoModel model)
             Items.Remove(model);
             RefreshStatistics();
         }
-
-        public ICommand ToggleSidebarCommand => _ToggleSidebarCommand ??= new Command(ExecuteToggleSidebarCommand);
-        ICommand _ToggleSidebarCommand;
-        void ExecuteToggleSidebarCommand()
-        {
-            SidebarMenuVisible = !SidebarMenuVisible;
-        }
     }
 }
diff --git a/src/TodoApp/Features/Todos/Views/SideBarMenuView.xaml b/src/TodoApp/Features/Todos/Views/SideBarMenuView.xaml
@@ -151,7 +151,7 @@
                         All={x:Static app:Dimens.SpacingSm}}">
                     <Frame.GestureRecognizers>
                         <TapGestureRecognizer
-                            Command="{Binding ToggleSidebarCommand}" />
+                            Tapped="TapGestureRecognizer_Tapped" />
                     </Frame.GestureRecognizers>
                     <Image
                         Source="{FontImage

diff --git a/src/TodoApp/Features/Todos/Views/SideBarMenuView.xaml.cs b/src/TodoApp/Features/Todos/Views/SideBarMenuView.xaml.cs
@@ -1,6 +1,4 @@
 using System;
-using System.Collections.Generic;
-using Xamarin.Forms;
 
 namespace TodoApp
 {
@@ -10,5 +8,14 @@ public SideBarMenuView()
         {
             InitializeComponent();
         }
+
+        public delegate void OnBackClickedDelegate();
+
+        public OnBackClickedDelegate OnBackClicked { get; set; }
+
+        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
+        {
+            OnBackClicked?.Invoke();
+        }
     }
-}
+}
diff --git a/src/TodoApp/Features/Todos/Views/TodosMainContentView.xaml b/src/TodoApp/Features/Todos/Views/TodosMainContentView.xaml
@@ -31,7 +31,7 @@
                         }" />
                     <ContentView.GestureRecognizers>
                         <TapGestureRecognizer
-                            Command="{Binding ToggleSidebarCommand}" />
+                            Tapped="TapGestureRecognizer_Tapped" />
                     </ContentView.GestureRecognizers>
                 </ContentView>
                 <ContentView

diff --git a/src/TodoApp/Features/Todos/Views/TodosMainContentView.xaml.cs b/src/TodoApp/Features/Todos/Views/TodosMainContentView.xaml.cs
@@ -1,5 +1,4 @@
 using System;
-using System.Collections.Generic;
 using Xamarin.Forms;
 
 namespace TodoApp
@@ -10,5 +9,14 @@ public TodosMainContentView()
         {
             InitializeComponent();
         }
+
+        public delegate void OnMenuClickedDelegate();
+
+        public OnMenuClickedDelegate OnMenuClicked { get; set; }
+
+        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
+        {
+            OnMenuClicked?.Invoke();
+        }
     }
-}
+}