I'm trying to make a custom hamburger menu for my app. I have the layout all setup, but, for some reason, my DoubleAnimation
isn't working as I expect. I'm trying to accomplish something similar to Cortana's hamburger menu on Windows 10. I'm creating my Storyboard
and DoubleAnimation
in my code (I still have the same problem even if my animation is created in XAML). Here's what I have:
menuButton.Click += (s, e) => {
if (menuIsOpen) {
Animate(
menuPanel,
"Width",
ActualWidth, //Page.ActualWidth
50,
0.1,
new Duration(new TimeSpan(TimeSpan.TicksPerSecond)));
}
else {
Animate(
menuPanel,
"Width",
50,
ActualWidth, //Page.ActualWidth
0.1,
new Duration(new TimeSpan(TimeSpan.TicksPerSecond)));
}
menuIsOpen = !menuIsOpen;
};
This is the signature for Animate()
:
private void Animate(DependencyObject item, string property, double from, double to, double? by, Duration duration) {
var storyboard = new Storyboard();
var animation = new DoubleAnimation();
animation.From = from;
animation.To = to;
animation.Duration = duration;
animation.EasingFunction = new SineEase() { EasingMode = EasingMode.EaseInOut };
animation.By = by;
Storyboard.SetTarget(animation, item);
Storyboard.SetTargetProperty(animation, property);
storyboard.Children.Add(animation);
storyboard.Begin();
}
I used a little Debug.WriteLine()
to see if the Storyboard
is actually running, which it is. The menuPanel
's width does not change at all. I've used a similar approach with some of my other projects and it works fine there.
EDIT: I thought I'd add a little bit more detail.
My app is targeting Windows 10 and I'm able to change the width ofmenuPanel
freely if I don't useStoryboard
s andDoubleAnimation
s.
I found this answer on a similar question, and my animation works just fine now.
I figured it out myself. All I had to do was to Enable Dependent Animation (EnableDependentAnimation) on the DoubleAnimation as this animation affects the layout. And then it worked perfectly.