Hiding NavigationView header in UWP

The NavigationView control added in the Fall Creators Update of Windows 10 is a very useful tool for creating nice hamburger menu navigation that fits the guidelines of UWP apps. The control however includes a “header” area, that gives you a chance to provide a title of your page on the top. What if we don’t want it?

The minimal problem

NavigationView has a AlwaysShowHeader property which allows you to specify if you want to display its header or not. This property works great, until the window size is too narrow and the NavigationView‘s display mode switches to Minimal.

Minimal mode shows the header
Minimal mode shows the header

Even when the header is empty, the content of your page is pushed down to make space for it, as though it was there. This is not very user friendly, especially on smaller screens (like phones), where every pixel matters.

Hidden in the template

If we dig into the default NavigationView‘s style, we can find the following XAML definition inside:

The problem is quite clear – the MinHeight property is set to 48 effective pixels. In Minimal mode, the header is always shown and even when it does not contain anything, it still takes up 48 precious pixels of your screen.

The solution is very simple – we can just remove the MinHeight property altogether.

The header is gone!
The header is gone!

Of course now we have one additional task – to make sure our page content count on the fact that top left corner is occluded by the hamburger button. This problem arises in the Minimal mode only, so you can quite easily use a VisualStateTrigger to add the required left margin to the top elements of your page when necessary.

Following is the updated Style. You can find it in the sample source code for this article on GitHub as well.

Sample code

Source code for this article is available on my GitHub.

Summary

We have shown how to make sure that NavigationView does not show any header even in the Minimal display mode and how to give our content a chance to shine on the whole area available for our app.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*