Added Button Animations

Author: CodingFactoryT

AnimationHandler.cs

@@ -0,0 +1,86 @@
+
+using System;
+using System.Diagnostics;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Media.Animation;
+
+namespace On_Screen_Keyboard
+{
+    public class AnimationHandler : Page
+    {
+        private const int shrinkModifier = 10;
+        private const int animationDuration = 50;
+        private Button button;
+        private double previousWidth;
+        private double previousHeight;
+        private Thickness previousMargin;
+        public AnimationHandler(Button button)
+        {
+            this.button = button;
+            previousWidth = button.Width;
+            previousHeight = button.Height;
+            previousMargin = button.Margin;
+
+            NameScope.SetNameScope(this, new NameScope());
+            RegisterName(button.Name, button);
+        }
+
+        public void ButtonMouseDownAnimation(object sender, RoutedEventArgs e)
+        {
+            DoubleAnimation widthShrinkAnimation = new DoubleAnimation(button.Width - shrinkModifier, TimeSpan.FromMilliseconds(animationDuration));
+            Storyboard.SetTargetName(widthShrinkAnimation, button.Name);
+            Storyboard.SetTargetProperty(widthShrinkAnimation, new PropertyPath(Button.WidthProperty));
+
+            Thickness margin = new Thickness();
+            margin.Left = shrinkModifier / 2 + button.Margin.Left;
+            margin.Top = shrinkModifier / 2 + button.Margin.Top;
+            margin.Right = shrinkModifier / 2 + button.Margin.Right;
+            margin.Bottom = shrinkModifier / 2 + button.Margin.Bottom;
+
+            ThicknessAnimation marginExpandAnimation = new ThicknessAnimation(margin, TimeSpan.FromMilliseconds(animationDuration));
+            Storyboard.SetTargetName(marginExpandAnimation, button.Name);
+            Storyboard.SetTargetProperty(marginExpandAnimation, new PropertyPath(Button.MarginProperty));
+
+            Storyboard storyboard = new Storyboard();
+            storyboard.Children.Add(widthShrinkAnimation);
+            storyboard.Children.Add(marginExpandAnimation);
+
+            if (button.Name.Equals("Btn_ENTER"))    //the height of Btn_ENTER is not Auto so you have to set it manually
+            {
+                DoubleAnimation heightShrinkAnimation = new DoubleAnimation(button.Height - shrinkModifier, TimeSpan.FromMilliseconds(animationDuration));
+                Storyboard.SetTargetName(heightShrinkAnimation, button.Name);
+                Storyboard.SetTargetProperty(heightShrinkAnimation, new PropertyPath(Button.HeightProperty));
+                storyboard.Children.Add(heightShrinkAnimation);
+            }
+
+            storyboard.Begin(this);
+        }
+        
+        public void ButtonMouseUpAnimation(object sender, RoutedEventArgs e)
+        {
+            DoubleAnimation widthExpandAnimation = new DoubleAnimation(previousWidth, TimeSpan.FromMilliseconds(animationDuration));
+            Storyboard.SetTargetName(widthExpandAnimation, button.Name);
+            Storyboard.SetTargetProperty(widthExpandAnimation, new PropertyPath(Button.WidthProperty));
+
+            ThicknessAnimation marginShrinkAnimation = new ThicknessAnimation(previousMargin, TimeSpan.FromMilliseconds(animationDuration));
+            Storyboard.SetTargetName(marginShrinkAnimation, button.Name);
+            Storyboard.SetTargetProperty(marginShrinkAnimation, new PropertyPath(Button.MarginProperty));
+
+            Storyboard storyboard = new Storyboard();
+            storyboard.Children.Add(widthExpandAnimation);
+            storyboard.Children.Add(marginShrinkAnimation);
+
+            if (button.Name.Equals("Btn_ENTER"))    //the height of Btn_ENTER is not Auto so you have to reset it manually
+            {
+                DoubleAnimation heightShrinkAnimation = new DoubleAnimation(previousHeight, TimeSpan.FromMilliseconds(animationDuration));
+                Storyboard.SetTargetName(heightShrinkAnimation, button.Name);
+                Storyboard.SetTargetProperty(heightShrinkAnimation, new PropertyPath(Button.HeightProperty));
+                storyboard.Children.Add(heightShrinkAnimation);
+            }
+
+            storyboard.Begin(this);
+        }
+
+    }
+}

ButtonClickHandler.cs

@@ -72,8 +72,7 @@ public void ToggableButton_Click(object sender, RoutedEventArgs e)
 
         public void SimulateToggableButtonPress(string buttonName)
         {
-            Button button = DataFetcher.GetControlByName(buttonName) as Button;
-            
+            Button button = DataFetcher.GetControlByName(buttonName) as Button;      
         }
 
         private void ToggleRow1Visibility(bool isFnctToggled)

ButtonGenerator.cs

@@ -47,6 +47,9 @@ private Button GetSingleButton(KeyboardButtonData buttonData, Visibility visibil
             else
                 keyboardButton.Click += buttonClickHandler.NonToggableButton_Click;
 
+            AnimationHandler animationHandler = new AnimationHandler(keyboardButton);
+            keyboardButton.PreviewMouseDown += animationHandler.ButtonMouseDownAnimation;
+            keyboardButton.PreviewMouseUp += animationHandler.ButtonMouseUpAnimation;
             return keyboardButton;
         }
     }

OnScreenKeyboard.xaml

@@ -20,8 +20,8 @@
                     <StackPanel x:Name="row5" Orientation="Horizontal" Height="55"/>
                 </StackPanel>
 
-                <Button x:Name="Btn_Enter" Content="Enter" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="11 82" Width="112" Height="106" Style="{StaticResource KeyboardButtonStyle}"/>
-                <Button x:Name="Btn_Exit" Content="x" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="5" Padding="2 2"  Width="25" Height="25" Style="{StaticResource KeyboardButtonStyle}"/>
+                <Button x:Name="Btn_ENTER" Content="Enter" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="11 82" Width="112" Height="106" Style="{StaticResource KeyboardButtonStyle}"/>
+                <Button x:Name="Btn_EXIT" Content="x" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="5" Padding="2 2"  Width="25" Height="25" Style="{StaticResource KeyboardButtonStyle}"/>
 
                 <Thumb x:Name="thumb" Width="0" Height="0"/>
             </Grid>

OnScreenKeyboard.xaml.cs

@@ -20,8 +20,8 @@ public OnScreenKeyboard()
             SetPopupSizeAndPosition(0.5, 0.3);  //the size of the popup is half of the screen width and a nearly a third od the screen height
             ActivateDragBehaviour();
 
-            ConfigureBtn_Enter();
-            ConfigureBtn_Exit();
+            ConfigureBtn_ENTER();
+            ConfigureBtn_EXIT();
         }
 
         private void SetPopupSizeAndPosition(double screenWidthMultiplier, double screenHeightMuliplier)
@@ -38,7 +38,7 @@ private void SetPopupSizeAndPosition(double screenWidthMultiplier, double screen
 
         private void ActivateDragBehaviour()
         {
-            popup.MouseDown += (s, e) =>
+            popup.MouseLeftButtonDown += (s, e) =>
             {
                 thumb.RaiseEvent(e);
             };
@@ -50,20 +50,24 @@ private void ActivateDragBehaviour()
             };
         }
 
-        private void ConfigureBtn_Enter()
+        private void ConfigureBtn_ENTER()
         {
-            Btn_Enter.Background = DataFetcher.GetBrushByName("KeyboardButtonColor");
+            Btn_ENTER.Background = DataFetcher.GetBrushByName("KeyboardButtonColor");
 
             ButtonClickHandler buttonClickHandler = new ButtonClickHandler();
-            Btn_Enter.Click += buttonClickHandler.Btn_Enter_Click;
+            Btn_ENTER.Click += buttonClickHandler.Btn_Enter_Click;
+
+            AnimationHandler animationHandler = new AnimationHandler(Btn_ENTER);
+            Btn_ENTER.PreviewMouseDown += animationHandler.ButtonMouseDownAnimation;
+            Btn_ENTER.PreviewMouseUp += animationHandler.ButtonMouseUpAnimation;
         }
 
-        private void ConfigureBtn_Exit()
+        private void ConfigureBtn_EXIT()
         {
-            Btn_Exit.Background = DataFetcher.GetBrushByName("KeyboardButtonColor");
+            Btn_EXIT.Background = DataFetcher.GetBrushByName("KeyboardButtonColor");
 
             ButtonClickHandler buttonClickHandler = new ButtonClickHandler();
-            Btn_Exit.Click += buttonClickHandler.Btn_Exit_Click;
+            Btn_EXIT.Click += buttonClickHandler.Btn_Exit_Click;
         }
     }
 }

Resources/CustomStyles.xaml

@@ -15,10 +15,10 @@
     </Style>
 
     <Style TargetType="Button" x:Key="KeyboardButtonStyle">
-        <Setter Property="Background" Value="#EEE"/>
         <Setter Property="Width" Value="55"/>
         <Setter Property="Height" Value="Auto"/>
         <Setter Property="Margin" Value="2"/>
+
         <Style.Resources>
             <Style TargetType="Border">
                 <Setter Property="CornerRadius" Value="5"/>