1

I'm in the process of implementing my own popup menu for app bar icon buttons (something similar to the PhoneFlipMenu tool). I'm using a vertical StackPanel for my popup, and I need to display it with animation when the corresponding app bar button is clicked. The code looks like this:

private void appBarIconButtonList_Click(object sender, EventArgs e)
{
    ApplicationBar.IsVisible = false;
    AnimatePopupMenuListCommands(true);
}

private void AnimatePopupMenuListCommands(bool openMenu)
{
    PlaneProjection planeProjection = popupMenuListCommands.Projection as PlaneProjection;

    DoubleAnimation anima = new DoubleAnimation();
    if (openMenu)
    {
        anima.From = 90;
        anima.To = 0;
    }
    else
    {
        anima.From = 0;
        anima.To = 90;
    }
    anima.Duration = new Duration(TimeSpan.FromSeconds(0.1));

    Storyboard.SetTarget(anima, planeProjection);
    Storyboard.SetTargetProperty(anima, new PropertyPath(PlaneProjection.RotationXProperty));

    Storyboard storyboard = new Storyboard();
    storyboard.Children.Add(anima);
    storyboard.Begin();
}

The main problem is that the animation begins before the application bar is hidden. As a result, the popup menu jumps a little bit after that. How to run the animation after the application bar has been totally hidden?

10
  • The animation performed by the OS to hide the appbar is always done in a fixed time. Maybe you can measure it and have a timer wait that amout of time before starting your animation. Or instead of a timer you can make that delay a part of your animation.
    – disklosr
    Commented Jun 4, 2014 at 11:36
  • @SJD, IF the app bar is hidden, we get extra space at the bottom. When the app bar disappears, the whole layout is recalculated because of this, and the popup menu moves down together with the control under it. Perhaps, a better description of this effect is that the Top coordinate of the popup menu is increased by the height of the hidden app bar after it has been hidden.
    – Tecman
    Commented Jun 4, 2014 at 11:37
  • @disklosr, it's a bad idea to use a timer and hard code a time value. We need an universal solution.
    – Tecman
    Commented Jun 4, 2014 at 11:38
  • @TecMan I'm aware of this ut I couldn't think of any other solution. Your solution (the height of the view being recalculated) might not work when the app bar is ON TOP of the view and not a part of it. Also, are you sure that the recalculation is done after the animation finishes?
    – disklosr
    Commented Jun 4, 2014 at 11:42
  • @disklosr, my app bar is not semi-transparent, so it is not on top of the other controls.
    – Tecman
    Commented Jun 4, 2014 at 11:46

2 Answers 2

0

Try to hide application bar after the animation is complete.

 storyboard.Completed += storyboard_Completed;


    void storyboard_Completed(object sender, EventArgs e)
    {
        ApplicationBar.IsVisible = false;
    }
1
  • In one of my tests, I used this - but for the case when I need to hide the popup menu. In the case when we open it, it looks ugly as first the popup menu appears with the animation, and only after that the app bar is hidden. The same 'jump effect'.
    – Tecman
    Commented Jun 4, 2014 at 11:51
0

You could wait for the appbar to be hidden using the Dispatcher or a DispatcherTimer. Here is an exmaple using the Dispatcher:

private void ApplicationBarIconButton_OnClick(object sender, EventArgs e)
{
    ApplicationBar.IsVisible = false;
    WaitForAppBarThenShowMenu();
}

private void WaitForAppBarThenShowMenu()
{
    if (ApplicationBar.IsVisible)
    {
        Dispatcher.BeginInvoke(WaitForAppBarThenShowMenu);
    }
    else
    {
        AnimatePopupMenuListCommands();
    }
}

OLD ANSWER - DOES NOT WORK I believe you can subscribe to the StateChanged event of the ApplicationBar and then start your story.

EventHandler<ApplicationBarStateChangedEventArgs> stateChanged = null;
stateChanged = (s,e) => 
{
    ApplicationBar.StateChanged -= stateChanged;
    AnimatePopupMenuListCommands(true);
};
ApplicationBar.StateChanged += stateChanged;
ApplicationBar.IsVisible = false;
2
  • Did you read the docu carefully?? The event description is the following: "Occurs when the user opens or closes the Application Bar by clicking the ellipsis." See - clicking the ellipsis. How can I use it for my needs?
    – Tecman
    Commented Jun 6, 2014 at 7:22
  • I must say that I do not appreciate the down vote. I did not say it would work, I said I think it will. I was not able to test, but it looked like it might work. The answer included all of the moving parts to help you out. I have updated the answer with something that I was able to test out. Commented Jun 6, 2014 at 15:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.