Adding/Removing AppBar Buttons on the fly

I am now back to working on an app that will be brand-new for the Marketplace, namely a Ham Radio practice exam app that I have mentioned on my product page, though not here, apparently.   I temporarily abandoned it to address problems in my Fraction Calculator, as well as adding support for Trial Mode and tightening up its execution speed.  But having submitted the improved F/C to the marketplace today (and I hope to be able to publish it in a few days), it time to get back to the Ham Practice Exam app.

For Trial Mode with the Fraction Calculator I needed to be able to modify the AppBar buttons on the fly, adding and/or taking away a button as needed, and as it turned out I had a similar need in the Ham Practice Exam a couple of months ago, and figured out how work dynamically with the AppBar.  In the case of Fraction Calculator, I needed for a Buy button to show when the app was in Trial Mode, but not otherwise.  In the case of the Ham Practice Exam, I needed to be able to use the button bar to both navigate forward and backward to sequential questions, and if a question was associated with a diagram that needed to be displayed, then a diagram display button needed to be added and then taken away.

The AppBar is defined in the page Xaml.  Once it is there, it can be modified.  In the main page of the app, the Normal Mode has one AppBar button, a Help button which takes the user to the Help page.  In Trial Mode, it must be joined by a Buy button that will cause the user to be directed to the Marketplace to purchase the app.  Here’s the Normal AppBar Xaml.

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton x:Name="AppBarHelpButton" 
             IconUri="/Images/QuestionMark.png" 
             Text="Help" Click="AppBarHelpButton_Click" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>


Now, you might think that you could put a second ApplicationBarIconButton in there, with some kind of property set to true that would make it invisible.  But there isn’t, not at the ApplicationBarIconButton level.  You can make the entire AppBar visible or invisible on the fly by changing the IsVisible property, but not individual buttons.  

To start with, before you add the Buy button, you should make sure it isn’t already there.  Two of them might serve to emphasize to the Trial user that you’re really serious about getting paid for your app, but three might be overkill.  So, use this to see if you already have one:

private bool BuyMeButtonPresent()
{
    bool result = false;
    string bt = string.Empty;

    for (int x = 0; x < ApplicationBar.Buttons.Count; x++)
        {
            bt = (ApplicationBarIconButton)ApplicationBar.Buttons[x]).Text;
            if ((bt == "Buy")
           {
                result = true;
           }
    }
    return result;
}

As you can see, the method loops through each of the buttons, checking them to see if any of them has “Buy” in its Text property, and if so then it returns True.

Now, if you have an existing button that you need to get rid of, simply use the same strategy, and loop through the AppBar’s buttons, removing the one(s) you need to remove.

private void RemoveBuyMeButton()
{
    string bt = string.Empty;
    for (int x = 0; x < ApplicationBar.Buttons.Count; x++)
    {
        bt = (ApplicationBarIconButton)ApplicationBar.Buttons[x]).Text;
        if ((bt == "Buy")
        {
            ApplicationBar.Buttons.RemoveAt(x);
        }
    }
}

And once you’ve satisfied yourself that you don’t have any such button, and you want to add one, well, here’s how you do that:

private void AddBuyMeButton()
{
    ApplicationBarIconButton b = new ApplicationBarIconButton();
    b.IconUri = new Uri("/Images/BuyMe.png", UriKind.Relative);
    b.Text = "Buy";
    b.Click += BuyMe_Click;

    ApplicationBar.Buttons.Add(b);
}

Note that the BuyMe_Click event method included above already exists in the app’s code; you just need to add it to the new button’s Click event as shown above.

Note carefully, that I did not check to see if it is a good idea to remove the reference to the Click event if you are removing the button from the AppBar — in my case, this removal would happen exactly once during the app’s lifetime in any event, so if it were a loose end remaining, it wouldn’t be particularly loose. If you have a need to remove and re-add a button time after time while the same app instance is running, then perhaps you better make sure this isn’t going to be a problem. I can’t do everything for you, you know!

This entry was posted in Windows Phone 7 Development. Bookmark the permalink.

3 Responses to Adding/Removing AppBar Buttons on the fly

  1. Alex says:

    Do buttons jump when added/removed?

  2. Tiago says:

    Do we need to add any extra extra “using directive” to use ApplicationBarIconButton?

    Because I tried this code, but it says that I am missing a using directive.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s