UWP Hamburger Menu Top App Bar leaving extra empty space for no reason

Question

I am facing a strange problem in my UWP application, I have a hamburger button and a text block(the page name) on the top of the main page. At the bottom I have the Split View with a pane and content. The pane showing the navigation buttons and the content with a frame.

Here's the screen-shot of the Application

Now as the frame navigates to the home page, I face a strange problem. The "top" command bar goes at the top of the application (strangely at the place of the title text block on the main page) well I don't have any problem with that as I can adjust its width and make it transparent to show the title and make the hamburger button work, but the actual problem that I am facing is that it leaves a strange empty space on the page top(home page) for no reason, I have tried various ways but I can't seem to fix it. I am adding some pictures of the running application and code, any help will be greatly appreciated :)

Here's the code of the home page

Answer 1

Typically Page.TopAppBar and Page.BottomAppBar is used in the outer page because they will be paced in Top/Bottom of App , not on Page . So you can use CommandBar inside your grid of the inner page.

<Grid>
    <CommandBar>

    </CommandBar>
</Grid>