Adding an AppBar by Code (Windows 8.1, C#)

Question

In my scenario I want to write a BasePage for all my Windows 8.1 App Pages. In this BasePage there should be a creation of a TopAppBar.

Actually I have:

public CommandBar TopCommandBar
{
    get
    {
        // Check if a TopAppBar exists
        if (this.TopAppBar != null) return this.TopAppBar.Content as CommandBar;

        var appBar = new AppBar();
        this.TopAppBar = appBar;
        var top = this.TopAppBar.Content as CommandBar;
        if (top == null)
        {
            topCommandBar = new CommandBar();
            this.TopAppBar.Content = topCommandBar;
        }
        return this.TopAppBar.Content as CommandBar;
    }
}

This code is working very well. But later in my BaseClass I want to add a AppBarButton

if (ShowCloseButton)
{
    var closeBtn = new AppBarButton();
    closeBtn.Icon = new SymbolIcon(Symbol.Clear);
    closeBtn.Label = "Close";
    closeBtn.Click += closeBtn_Click;
    this.TopCommandBar.PrimaryCommands.Insert(0, closeBtn);
}

The strage behavior is that the closeBtn will not be shown in the TopAppBar until I click the right button of my mouse twice.

Means the first time I click right --> the TopAppBar appears but with no button inside.

Then I click the right button again --> the TopAppBar stays open and the button appears with its full functionality.

Answer 1

Yes, I agree this looks like a bug. I was seeing the same thing with the code generated route. Upon investigation it looks like the AppBar.IsOpen gets toggled to true during the right click, or swipe, but the CommandBar.IsOpen remains false. This fix worked for me:

BottomAppBar.Opened += (o, args) => { (this.BottomAppBar.Content as CommandBar).IsOpen = true; };

Answer 2

You can also use AppBar directly as CommandBar:

    CommandBar appBar = this.BottomAppBar as CommandBar;
    if (appBar == null)
    {
        appBar = new CommandBar();
        this.BottomAppBar = appBar;
    }

    var btnAbout = new AppBarButton() { Icon = new SymbolIcon(Symbol.Help), Label = "About" };
    btnAbout.Click += btnAbout_Click;
    appBar.SecondaryCommands.Add(btnAbout);