add Drawer

README.md

@@ -86,6 +86,10 @@ Step 4：enjoy coding
 
 ## Latest examples
 
+### Drawer
+
+![Drawer](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Drawer.gif)
+
 ### Poptip
 
 ![Poptip](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Poptip.gif)
@@ -102,12 +106,12 @@ Step 4：enjoy coding
 
 ![SplitButton](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/SplitButton.png)
 
+## History publication
+
 ### FloatingBlock
 
 ![FloatingBlock](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/FloatingBlock.gif)
 
-## History publication
-
 ### HoneycombPanel
 
 ![HoneycombPanel](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/HoneycombPanel.png)

src/Shared/HandyControlDemo_Shared/Data/SideMenuConfig.json

@@ -0,0 +1,120 @@
+[
+  {
+    "Header": "Overview",
+    "IconKey": "/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Overview.png",
+    "Items": [
+      {
+        "Header": "Summary",
+        "IconKey": ""
+      },
+      {
+        "Header": "Dashboards",
+        "IconKey": ""
+      },
+      {
+        "Header": "Wiki",
+        "IconKey": ""
+      }
+    ]
+  },
+  {
+    "Header": "Boards",
+    "IconKey": "/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Boards.png",
+    "Items": [
+      {
+        "Header": "Work Items",
+        "IconKey": ""
+      },
+      {
+        "Header": "Boards",
+        "IconKey": ""
+      },
+      {
+        "Header": "Backlogs",
+        "IconKey": ""
+      },
+      {
+        "Header": "Sprints",
+        "IconKey": ""
+      },
+      {
+        "Header": "Queries",
+        "IconKey": ""
+      }
+    ]
+  },
+  {
+    "Header": "Repos",
+    "IconKey": "/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Repos.png",
+    "Items": [
+      {
+        "Header": "Files",
+        "IconKey": ""
+      },
+      {
+        "Header": "Commits",
+        "IconKey": ""
+      },
+      {
+        "Header": "Pushes",
+        "IconKey": ""
+      },
+      {
+        "Header": "Branches",
+        "IconKey": ""
+      },
+      {
+        "Header": "Tags",
+        "IconKey": ""
+      },
+      {
+        "Header": "Pull requests",
+        "IconKey": ""
+      }
+    ]
+  },
+  {
+    "Header": "Pipelines",
+    "IconKey": "/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Pipelines.png",
+    "Items": [
+      {
+        "Header": "Builds",
+        "IconKey": ""
+      },
+      {
+        "Header": "Releases",
+        "IconKey": ""
+      },
+      {
+        "Header": "Library",
+        "IconKey": ""
+      },
+      {
+        "Header": "Task groups",
+        "IconKey": ""
+      },
+      {
+        "Header": "Deployment groups",
+        "IconKey": ""
+      }
+    ]
+  },
+  {
+    "Header": "Test Plans",
+    "IconKey": "/HandyControlDemo;component/Resources/Img/DevOps/DevOps-TestPlans.png",
+    "Items": [
+      {
+        "Header": "Test Plans",
+        "IconKey": ""
+      },
+      {
+        "Header": "Runs",
+        "IconKey": ""
+      },
+      {
+        "Header": "Load test",
+        "IconKey": ""
+      }
+    ]
+  }
+]

src/Shared/HandyControlDemo_Shared/UserControl/Controls/DrawerDemoCtl.xaml

@@ -21,7 +21,7 @@
                 <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="1" Grid.Column="2" Content="Right" IsChecked="{Binding IsOpen,ElementName=DrawerRight}"/>
                 <ToggleButton Margin="10" HorizontalAlignment="Stretch" Grid.Row="2" Grid.Column="1" Content="Bottom" IsChecked="{Binding IsOpen,ElementName=DrawerBottom}"/>
             </Grid>
-            <hc:Drawer Name="DrawerLeft" Dock="Left">
+            <hc:Drawer Name="DrawerLeft" Dock="Left" ShowMode="Push">
                 <Border Background="{DynamicResource RegionBrush}" Width="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
                     <Grid>
                         <Grid.RowDefinitions>
@@ -33,7 +33,7 @@
                     </Grid>
                 </Border>
             </hc:Drawer>
-            <hc:Drawer Name="DrawerTop" Dock="Top">
+            <hc:Drawer Name="DrawerTop" Dock="Top" ShowMode="Press">
                 <Border Background="{DynamicResource RegionBrush}" Height="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
                     <Grid>
                         <Grid.RowDefinitions>
@@ -45,8 +45,8 @@
                     </Grid>
                 </Border>
             </hc:Drawer>
-            <hc:Drawer Name="DrawerRight" ShowMask="False">
+            <hc:Drawer Name="DrawerRight" MaskCanClose="False">
-                <Border Background="{DynamicResource RegionBrush}" Width="300" BorderThickness="1,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
+                <Border Background="{DynamicResource RegionBrush}" Width="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
                     <Grid>
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto"/>
@@ -57,8 +57,8 @@
                     </Grid>
                 </Border>
             </hc:Drawer>
-            <hc:Drawer Name="DrawerBottom" Dock="Bottom">
+            <hc:Drawer Name="DrawerBottom" Dock="Bottom" ShowMask="False">
-                <Border Background="{DynamicResource RegionBrush}" Height="300" BorderBrush="{DynamicResource BorderBrush}">
+                <Border Background="{DynamicResource RegionBrush}" Height="300" BorderThickness="0,1,0,0" BorderBrush="{DynamicResource BorderBrush}">
                     <Grid>
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto"/>

src/Shared/HandyControl_Shared/Controls/Other/Drawer.cs

@@ -5,6 +5,7 @@ using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Markup;
 using System.Windows.Media;
+using System.Windows.Media.Animation;
 using HandyControl.Data;
 using HandyControl.Interactivity;
 using HandyControl.Tools;
@@ -14,20 +15,28 @@ namespace HandyControl.Controls
     [ContentProperty("Content")]
     public class Drawer : FrameworkElement
     {
+        private Storyboard _storyboard;
+
         private AdornerContainer _container;
 
-        private ContentControl _animateControl;
+        private ContentControl _animationControl;
 
         private TranslateTransform _translateTransform;
 
         private double _animationLength;
 
-        private DependencyProperty _animationProperty;
+        private string _animationPropertyName;
 
         private FrameworkElement _maskElement;
 
         private AdornerLayer _layer;
 
+        private System.Windows.Window _window;
+
+        private UIElement _windowContentElement;
+
+        private Point _contentRenderTransformOrigin;
+
         public Drawer()
         {
             Loaded += Drawer_Loaded;
@@ -47,10 +56,16 @@ namespace HandyControl.Controls
         private void Drawer_Unloaded(object sender, RoutedEventArgs e)
         {
             Loaded -= Drawer_Loaded;
+            
             if (_maskElement != null)
             {
                 _maskElement.PreviewMouseLeftButtonDown -= MaskElement_PreviewMouseLeftButtonDown;
             }
+
+            if (_storyboard != null)
+            {
+                _storyboard.Completed -= Storyboard_Completed;
+            }
         }
 
         public static readonly DependencyProperty IsOpenProperty = DependencyProperty.Register(
@@ -122,88 +137,19 @@ namespace HandyControl.Controls
             set => SetValue(ContentProperty, value);
         }
 
-        private void OnIsOpenChanged(bool isOpen)
-        {
-            if (Content == null) return;
-
-            var window = WindowHelper.GetActiveWindow();
-            if (window == null) return;
-
-            var decorator = VisualHelper.GetChild<AdornerDecorator>(window);
-            _layer = decorator?.AdornerLayer;
-            if (_layer == null) return;
-
-            if (_container == null)
-            {
-                CreateContainer();
-            }
-
-            switch (ShowMode)
-            {
-                case DrawerShowMode.Cover:
-                    ShowByCover(isOpen);
-                    break;
-                case DrawerShowMode.Push:
-                    ShowByPush(isOpen);
-                    break;
-                case DrawerShowMode.Press:
-                    ShowByPress(isOpen);
-                    break;
-                default:
-                    throw new ArgumentOutOfRangeException();
-            }
-        }
-
-        private void ShowByCover(bool isOpen)
-        {
-            if (isOpen)
-            {
-                _maskElement?.BeginAnimation(OpacityProperty, AnimationHelper.CreateAnimation(1));
-                _translateTransform.BeginAnimation(_animationProperty, AnimationHelper.CreateAnimation(0));
-                _layer.Add(_container);
-            }
-            else
-            {
-                var animation = AnimationHelper.CreateAnimation(_animationLength);
-                animation.Completed += (s, e) => _layer.Remove(_container);
-                _maskElement?.BeginAnimation(OpacityProperty, AnimationHelper.CreateAnimation(0));
-                _translateTransform.BeginAnimation(_animationProperty, animation);
-            }
-        }
-
-        private void ShowByPush(bool isOpen)
-        {
-            if (isOpen)
-            {
-                
-            }
-            else
-            {
-                
-            }
-        }
-
-        private void ShowByPress(bool isOpen)
-        {
-            if (isOpen)
-            {
-
-            }
-            else
-            {
-
-            }
-        }
-
         private void CreateContainer()
         {
+            _storyboard = new Storyboard();
+            _storyboard.Completed += Storyboard_Completed;
+
             _translateTransform = new TranslateTransform();
-            _animateControl = new ContentControl
+            _animationControl = new ContentControl
             {
                 Content = Content,
                 RenderTransform = _translateTransform,
                 DataContext = this
             };
+
             var panel = new SimplePanel
             {
                 ClipToBounds = true
@@ -220,44 +166,44 @@ namespace HandyControl.Controls
                 panel.Children.Add(_maskElement);
             }
 
-            _animateControl.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
+            _animationControl.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity));
-            var size = _animateControl.DesiredSize;
+            var size = _animationControl.DesiredSize;
 
             switch (Dock)
             {
                 case Dock.Left:
-                    _animateControl.HorizontalAlignment = HorizontalAlignment.Left;
+                    _animationControl.HorizontalAlignment = HorizontalAlignment.Left;
-                    _animateControl.VerticalAlignment = VerticalAlignment.Stretch;
+                    _animationControl.VerticalAlignment = VerticalAlignment.Stretch;
                     _translateTransform.X = -size.Width;
                     _animationLength = -size.Width;
-                    _animationProperty = TranslateTransform.XProperty;
+                    _animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.X)";
                     break;
                 case Dock.Top:
-                    _animateControl.HorizontalAlignment = HorizontalAlignment.Stretch;
+                    _animationControl.HorizontalAlignment = HorizontalAlignment.Stretch;
-                    _animateControl.VerticalAlignment = VerticalAlignment.Top;
+                    _animationControl.VerticalAlignment = VerticalAlignment.Top;
                     _translateTransform.Y = -size.Height;
                     _animationLength = -size.Height;
-                    _animationProperty = TranslateTransform.YProperty;
+                    _animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.Y)";
                     break;
                 case Dock.Right:
-                    _animateControl.HorizontalAlignment = HorizontalAlignment.Right;
+                    _animationControl.HorizontalAlignment = HorizontalAlignment.Right;
-                    _animateControl.VerticalAlignment = VerticalAlignment.Stretch;
+                    _animationControl.VerticalAlignment = VerticalAlignment.Stretch;
                     _translateTransform.X = size.Width;
                     _animationLength = size.Width;
-                    _animationProperty = TranslateTransform.XProperty;
+                    _animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.X)";
                     break;
                 case Dock.Bottom:
-                    _animateControl.HorizontalAlignment = HorizontalAlignment.Stretch;
+                    _animationControl.HorizontalAlignment = HorizontalAlignment.Stretch;
-                    _animateControl.VerticalAlignment = VerticalAlignment.Bottom;
+                    _animationControl.VerticalAlignment = VerticalAlignment.Bottom;
                     _translateTransform.Y = size.Height;
                     _animationLength = size.Height;
-                    _animationProperty = TranslateTransform.YProperty;
+                    _animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.Y)";
                     break;
                 default:
                     throw new ArgumentOutOfRangeException();
             }
 
-            panel.Children.Add(_animateControl);
+            panel.Children.Add(_animationControl);
             _container = new AdornerContainer(_layer)
             {
                 Child = panel,
@@ -265,6 +211,145 @@ namespace HandyControl.Controls
             };
         }
 
+        private void Storyboard_Completed(object sender, EventArgs e)
+        {
+            if (!IsOpen)
+            {
+                _windowContentElement.SetCurrentValue(RenderTransformOriginProperty, _contentRenderTransformOrigin);
+                _layer.Remove(_container);
+            }
+        }
+
+        private void OnIsOpenChanged(bool isOpen)
+        {
+            if (Content == null) return;
+
+            _window = WindowHelper.GetActiveWindow();
+            if (_window == null) return;
+
+            _windowContentElement = _window.Content as UIElement;
+            if (_windowContentElement == null) return;
+
+            _contentRenderTransformOrigin = _windowContentElement.RenderTransformOrigin;
+
+            var decorator = VisualHelper.GetChild<AdornerDecorator>(_window);
+            _layer = decorator?.AdornerLayer;
+            if (_layer == null) return;
+
+            if (_container == null)
+            {
+                CreateContainer();
+            }
+
+            switch (ShowMode)
+            {
+                case DrawerShowMode.Push:
+                    ShowByPush(isOpen);
+                    break;
+                case DrawerShowMode.Press:
+                    _windowContentElement.SetCurrentValue(RenderTransformOriginProperty, new Point(0.5, 0.5));
+                    ShowByPress(isOpen);
+                    break;
+            }
+
+            if (isOpen)
+            {
+                if (_maskElement != null)
+                {
+                    var maskAnimation = AnimationHelper.CreateAnimation(1);
+                    Storyboard.SetTarget(maskAnimation, _maskElement);
+                    Storyboard.SetTargetProperty(maskAnimation, new PropertyPath(OpacityProperty.Name));
+                    _storyboard.Children.Add(maskAnimation);
+                }
+
+                var drawerAnimation = AnimationHelper.CreateAnimation(0);
+                Storyboard.SetTarget(drawerAnimation, _animationControl);
+                Storyboard.SetTargetProperty(drawerAnimation, new PropertyPath(_animationPropertyName));
+                _storyboard.Children.Add(drawerAnimation);
+                _layer.Remove(_container);
+                _layer.Add(_container);
+            }
+            else
+            {
+                if (_maskElement != null)
+                {
+                    var maskAnimation = AnimationHelper.CreateAnimation(0);
+                    Storyboard.SetTarget(maskAnimation, _maskElement);
+                    Storyboard.SetTargetProperty(maskAnimation, new PropertyPath(OpacityProperty.Name));
+                    _storyboard.Children.Add(maskAnimation);
+                }
+
+                var drawerAnimation = AnimationHelper.CreateAnimation(_animationLength);
+                Storyboard.SetTarget(drawerAnimation, _animationControl);
+                Storyboard.SetTargetProperty(drawerAnimation, new PropertyPath(_animationPropertyName));
+                _storyboard.Children.Add(drawerAnimation);
+            }
+
+            _storyboard.Begin();
+        }
+
+        private void ShowByPush(bool isOpen)
+        {
+            string animationPropertyName;
+
+            switch (Dock)
+            {
+                case Dock.Left:
+                case Dock.Right:
+                    animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.X)";
+                    _windowContentElement.RenderTransform = new TranslateTransform
+                    {
+                        X = isOpen ? 0 : -_animationLength
+                    };
+                    break;
+                case Dock.Top:
+                case Dock.Bottom:
+                    animationPropertyName = "(UIElement.RenderTransform).(TranslateTransform.Y)";
+                    _windowContentElement.RenderTransform = new TranslateTransform
+                    {
+                        Y = isOpen ? 0 : -_animationLength
+                    };
+                    break;
+                default:
+                    throw new ArgumentOutOfRangeException();
+            }
+
+            var animation = isOpen
+                ? AnimationHelper.CreateAnimation(-_animationLength)
+                : AnimationHelper.CreateAnimation(0);
+            Storyboard.SetTarget(animation, _windowContentElement);
+            Storyboard.SetTargetProperty(animation, new PropertyPath(animationPropertyName));
+
+            _storyboard.Children.Add(animation);
+        }
+
+        private void ShowByPress(bool isOpen)
+        {
+            _windowContentElement.RenderTransform = isOpen
+                ? new ScaleTransform()
+                : new ScaleTransform
+                {
+                    ScaleX = 0.9,
+                    ScaleY = 0.9
+                };
+
+            var animationX = isOpen
+                ? AnimationHelper.CreateAnimation(.9)
+                : AnimationHelper.CreateAnimation(1);
+            Storyboard.SetTarget(animationX, _windowContentElement);
+            Storyboard.SetTargetProperty(animationX, new PropertyPath("(UIElement.RenderTransform).(ScaleTransform.ScaleX)"));
+
+            _storyboard.Children.Add(animationX);
+
+            var animationY = isOpen
+                ? AnimationHelper.CreateAnimation(.9)
+                : AnimationHelper.CreateAnimation(1);
+            Storyboard.SetTarget(animationY, _windowContentElement);
+            Storyboard.SetTargetProperty(animationY, new PropertyPath("(UIElement.RenderTransform).(ScaleTransform.ScaleY)"));
+
+            _storyboard.Children.Add(animationY);
+        }
+
         private void MaskElement_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
         {
             if (MaskCanClose)