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.

Seems like a bug. In the good old days of WPF, I would try invalidating the parent control. As a test, you could toggle the visibility of the appbar when you add the new button. Or, recreate the entire bar. — WiredPrairie, Oct 24 '13 at 10:59

Jeremy · Accepted Answer · 2013-11-16T06:03:59.430

2

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

edited Nov 16 '13 at 06:03

answered Nov 16 '13 at 05:49

Jeremy

36
2

It gives me a **'System.NullReferenceException'**! What should I test not to be null before calling this? – yalematta Apr 22 '15 at 07:37

score 0 · Answer 2 · answered Jun 26 '14 at 12:50

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

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

2 Answers2