Setting TopAppBar on page inside an inner frame places the app bar at the top of the window (good), but still takes space (bad) - xaml

Question

When I have a page with an CommandBar set on Page.TopAppBar (and that page in an inner page on another page), the UI element appears at the top of the window (which is what I expected and want).
However, the page on the inner page gets "space" taken out of it - as if the CommandBar is actually on it.
I tried a couple of things, the only thing that kind'a works is playing with margins, but even that seems to have weird artifacts (and anyway is not how I want to solve this).
Here's the XAML for the outer page:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="100" BorderBrush="Pink" BorderThickness="3">
<Frame x:Name="frame" />
</Border>
</Grid>
And here's the XAML form the inner page:
<Page.TopAppBar>
<CommandBar>
</CommandBar>
</Page.TopAppBar>
<Grid Background="Black">
</Grid>
Here's what the UI looks like - as you can see, the inner page has a bunch of space "taken" out as if the appbar is actually located on it.:

Answer 1

Remove container, just put CommandBar inside your Page in inner Frame. Put CommandBar in the bottom to make sure it overlays other element in the inner Page.
Final code should look like:
<Grid Background="Black">
<!-- Content here -->
<CommandBar>
</CommandBar>
</Grid>