Doing something after WP8 app bar has been hidden

Question

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?

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, Jun 04 '14 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, Jun 04 '14 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, Jun 04 '14 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, Jun 04 '14 at 11:42
@disklosr, my app bar is not semi-transparent, so it is not on top of the other controls. — TecMan, Jun 04 '14 at 11:46
That example extends from the PopUp control in Coding4Fun. Might be best to just inherit from it as well — Shawn Kendrot, Jun 04 '14 at 17:50
@ShawnKendrot, even if use a popup control, the problem remains: we cannot position the popup control properly until the app bar becomes totally hidden. — TecMan, Jun 05 '14 at 11:38
Did you use the control from the Cofing4Fun toolkit? Or did you use the standard Popup? Any reason not to use the flip menu you are referring to? Or use the version from Coding4Fun? — Shawn Kendrot, Jun 05 '14 at 14:02
@ShawnKendrot, PhoneFlipMenu does not allow doing several things. 1) You can't set menu item font size. 2) Its menu items do not use a tilt effect. 3) The main page contents isn't faded out when the popup menu is visible. 4) And it still jumps to the bottom when the app bar becomes totally hidden!! — TecMan, Jun 06 '14 at 07:19
@ShawnKendrot, PhoneFlipMenu or the popup control from the Coding4Fun toolkit have the same problem: they jump to the bottom, to the place occupied by the app bar, when the app bar is hidden. — TecMan, Jun 06 '14 at 07:20

score 0 · Answer 1 · answered Jun 04 '14 at 11:43

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;
    }

answered Jun 04 '14 at 11:43

Muhammad Saifullah

4,292
1
29
59

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 Jun 04 '14 at 11:51

Shawn Kendrot · Answer 2 · 2014-06-06T15:53:54.290

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;

edited Jun 06 '14 at 15:53

answered Jun 05 '14 at 14:10

Shawn Kendrot

12,425
1
25
41

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 Jun 06 '14 at 07: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. – Shawn Kendrot Jun 06 '14 at 15:55

Doing something after WP8 app bar has been hidden

2 Answers2