I have the following Ui and clicking on the "Admin login" button will extend the grid by adding another field ("Device owner") below the password field. When this happens the outermost grid grows in its height and it's so sudden.
What I'm expecting is when the "Admin login" button is been clicked the height change should animate with an 'ease in' animation. I tried with storyboard and AnimationBuilder but since the height change is dynamic I don't know how to set the "To" value. Any help would be appreciated.
The "Admin login" button's logic is just to set the visibility of the "Device owner" grid.
Since I'm not setting the height property this code is useless.
storyboard1 = new Storyboard();
var AnimationOne = new EasingDoubleKeyFrame() { KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(AnimationTime)), Value = GridHight, EasingFunction = new QuarticEase() { EasingMode = EasingMode.EaseIn } };
var AnimOne = new DoubleAnimationUsingKeyFrames();
AnimOne.EnableDependentAnimation = true;
AnimOne.KeyFrames.Add(AnimationOne);
Storyboard.SetTargetProperty(AnimOne, "(FrameworkElement.Height)");
Storyboard.SetTarget(AnimOne, LoginGrid);
storyboard1.Children.Add(AnimOne);
storyboard1.Begin();
I prefer to have the animation via XAML and no code is involved. But at this point, I'll accept anything. :) Thank you for your consideration.
Initial
After the button clicked
