From d82341b89dc72c8b8597be52e5b1f19f012904e6 Mon Sep 17 00:00:00 2001
From: Simeon <simeonc@microsoft.com>
Date: Fri, 16 Oct 2020 19:59:03 -0700
Subject: [PATCH] Make the control panels use transitions to slide in and slide
 out. (#369)

---
 LottieViewer/MainPage.xaml    | 17 ++++++++++-------
 LottieViewer/MainPage.xaml.cs | 32 +++++++++++++++++++++++++++++---
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/LottieViewer/MainPage.xaml b/LottieViewer/MainPage.xaml
index 93baddc..cf31476 100644
--- a/LottieViewer/MainPage.xaml
+++ b/LottieViewer/MainPage.xaml
@@ -79,13 +79,17 @@
             <Grid.Resources>
                 <x:Double x:Key="ControlPanelWidth">355</x:Double>
             </Grid.Resources>
-
             <!--  The stage. This is where the Lotties are displayed.  -->
             <local:Stage x:Name="_stage" ArtboardColor="{x:Bind ArtboardBrush.Color, Mode=OneWay}" />
 
             <!-- Control panel. This shows to the right of the stage. Only one panel is allowed to be
                  open at a time. This is ensured through code behind. -->
             <Grid x:Name="ControlPanel"  Grid.Column="1" Background="{StaticResource DropTargetBrush}">
+                <Grid.ChildrenTransitions>
+                    <TransitionCollection>
+                        <PaneThemeTransition Edge="Right"/>
+                    </TransitionCollection>
+                </Grid.ChildrenTransitions>
                 <Grid.Resources>
                     <Style TargetType="TextBlock">
                         <Setter Property="Foreground" Value="White" />
@@ -93,9 +97,10 @@
                 </Grid.Resources>
 
                 <!-- Color palette panel -->
-                <ScrollViewer x:Name="ColorPanel"
-                              Visibility="{x:Bind PaletteButton.IsChecked, Converter={StaticResource VisibilityConverter}, Mode=OneWay}"
-                              Width="{StaticResource ControlPanelWidth}">
+                <ScrollViewer 
+                    x:Name="ColorPanel"
+                    Width="{StaticResource ControlPanelWidth}">
+
                     <local:PaletteColorPicker 
                         Height="{x:Bind ColorPanel.ViewportHeight, Mode=OneWay}"
                         MinHeight="500"
@@ -107,8 +112,7 @@
                 <!-- Info panel -->
                 <ScrollViewer
                     x:Name="InfoPanel"
-                    Width="{StaticResource ControlPanelWidth}"
-                    Visibility="{x:Bind InfoButton.IsChecked, Converter={StaticResource VisibilityConverter}, Mode=OneWay}">
+                    Width="{StaticResource ControlPanelWidth}">
 
                     <StackPanel Padding="20,10,20,0">
                         <!-- Issues. Collapsed if there are no issues. -->
@@ -224,7 +228,6 @@
                     </StackPanel>
                 </ScrollViewer>
 
-
             </Grid>
         </Grid>
 
diff --git a/LottieViewer/MainPage.xaml.cs b/LottieViewer/MainPage.xaml.cs
index 92e6d4a..6ccd494 100644
--- a/LottieViewer/MainPage.xaml.cs
+++ b/LottieViewer/MainPage.xaml.cs
@@ -51,6 +51,9 @@ namespace LottieViewer
 
             // Get notified when info about the loaded Lottie changes.
             _stage.DiagnosticsViewModel.PropertyChanged += DiagnosticsViewModel_PropertyChanged;
+
+            // Remove all of the control panel panes. They will be added back as needed.
+            ControlPanel.Children.Clear();
         }
 
         public ObservableCollection<object> PropertiesList { get; } = new ObservableCollection<object>();
@@ -325,28 +328,51 @@ namespace LottieViewer
             Clipboard.Flush();
         }
 
+        public bool IsControlPanelVisible => _controlPanelButtons.Any(b => b.IsChecked == true);
+
         // Uncheck all the other control panel buttons when one is checked.
         // This allows toggle buttons to act like radio buttons.
         void ControlPanelButtonChecked(object sender, RoutedEventArgs e)
         {
+            // Uncheck all the other buttons.
             foreach (var button in _controlPanelButtons)
             {
                 if (button != sender)
                 {
-                    button.IsChecked = false;
+                    if (button.IsChecked == true)
+                    {
+                        button.IsChecked = false;
+                    }
                 }
             }
 
+            // Remove all the children from the control pane Grid, then add back the
+            // one that is is being shown. This is done to trigger the PaneThemeTransition
+            // so that the pane slides in and out.
+            ControlPanel.Children.Clear();
+
+            // Add back the panel corresponding to the button that is checked.
+            if (sender == InfoButton)
+            {
+                ControlPanel.Children.Add(InfoPanel);
+            }
+            else if (sender == PaletteButton)
+            {
+                ControlPanel.Children.Add(ColorPanel);
+            }
+
             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsControlPanelVisible)));
         }
 
-        public bool IsControlPanelVisible => _controlPanelButtons.Any(b => b.IsChecked == true);
-
         // When one of the control panel buttons is unchecked, if all the buttons
         // are now unpressed, remove the filler from the play/stop control bar so that
         // the scrubber takes up the whole area.
         void ControlPanelButtonUnchecked(object sender, RoutedEventArgs e)
         {
+            // Remove all the children from the control pane Grid. This is done to
+            // trigger the PaneThemeTransition so that the pane slides in and out.
+            ControlPanel.Children.Clear();
+
             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(IsControlPanelVisible)));
         }