Why is my BottomAppBar no longer displaying?

Question

My BottomAppBar was displaying previously. I haven't changed the XAML, which is, in MainPage.xaml:

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
        <CommandBar>
            <CommandBar.SecondaryCommands>
                <AppBarButton Icon="BrowsePhotos" Label="Browse" AutomationProperties.Name="Browse Photos" Click="btnOpenImgFiles_Click"/>
            </CommandBar.SecondaryCommands>
            <CommandBar.PrimaryCommands>
                <AppBarButton Icon="OpenFile" Label="Open" AutomationProperties.Name="Open File" Click="btnOpenMap_Click"/>
                <AppBarButton Icon="Save" Label="Save" AutomationProperties.Name="Save File" Click="btnSaveMap_Click"/>
            </CommandBar.PrimaryCommands>
        </CommandBar>
    </AppBar>
</Page.BottomAppBar>

While running my (at present very minimalistic) app via F5, I can get the BottomAppBar to display via Windows Key + Z, but it is blank now - just a black strip. What could have happened?

Answer 1

You shouldn't put an app bar in an app bar. This is what you should have:

<Page.BottomAppBar>
    <CommandBar x:Name="bottomAppBar">
        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="BrowsePhotos" Label="Browse" AutomationProperties.Name="Browse Photos" Click="btnOpenImgFiles_Click"/>
        </CommandBar.SecondaryCommands>
        <CommandBar.PrimaryCommands>
            <AppBarButton Icon="OpenFile" Label="Open" AutomationProperties.Name="Open File" Click="btnOpenMap_Click"/>
            <AppBarButton Icon="Save" Label="Save" AutomationProperties.Name="Save File" Click="btnSaveMap_Click"/>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

If you really feel strongly about the padding then put it as margins on the buttons instead of nesting app bars.